locked
[W8.1] Save State of Media Element while changing Visual States

    Question

  • Hi,

    I am developing a Windows Universal App. There is a Media Element Control in my App,when I change the Visual State from FullScreenLandscape to Filled,Narrow or Portrait, the video playing in the media element starts playing from the beginning.I want that video to resume from where it was before the Visual State was changed, instead of playing from the beginning. How can I do that?


    samEE


    Friday, May 1, 2015 8:20 AM

All replies

  • Hello Sameel,

    That behavior isn't expected. The MediaElement (ME) should automatically pause and resume after the aspect ratio change via the Visual State (VS) change.

    There must be something that you are doing during your VS change that is triggering the ME to reset. Maybe if you can offer some insight into what you are doing during your VS change we can offer some insight.

    The other thing you can look at is handling the "MediaFailed " and "CurrentStateChanged" events. This should allow you to be able to see what is occurring with the ME during the visual state change.

    I hope this helps,

    James


    Windows SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Friday, May 1, 2015 5:56 PM
    Moderator
  • Hi James,

    I checked it again, and what's happening is when I change the visual state e.g. let's say from FullScreenLandscape to Filled view the Media Element of FullScreenLandscape keeps on playing and the Media Element of FilledView also starts playing from the beginning, in other words there are two Media Element Controls that are playing but I only want one.

    Here is the code to my XAML

    <Grid x:Name="FullView" 
                  Visibility="Visible" 
                  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                  DataContext="{Binding Item}"
                  d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=../App1.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}">
                <Grid.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition/>
                    </TransitionCollection>
                </Grid.ChildrenTransitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
    
            <!--
                TODO: Content should be placed within the following grid 
                      to show details for the current item
            -->
            <Grid Grid.Row="1" x:Name="contentRegion">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <ListView Grid.Column="1"
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemGridView"
                AutomationProperties.Name="Items In Group"
                TabIndex="1"
                Grid.RowSpan="2"
                Padding="0,30"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                SelectionMode="None"
                IsSwipeEnabled="false"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick">
                    <ListView.ItemTemplate>
                        <DataTemplate ScrollViewer.HorizontalScrollBarVisibility="Auto">
                            <Grid Height="110" Width="auto" Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                                </Border>
                                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords" MaxHeight="60"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="FrameworkElement">
                            <Setter Property="Margin" Value="52,0,0,2"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
                <StackPanel Width="auto" Height="auto" 
                      Margin="100"   
                      Grid.Column="0">
                    <MediaElement x:Name="VideoPlayer"
                                Height="425"
                                Width="700"
                                AreTransportControlsEnabled="True"
                                AutoPlay="False"
                                Source="{Binding Content}"
                                DoubleTapped="VideoPlayer_DoubleTapped" 
                    />
                </StackPanel>
            </Grid>
        </Grid>
            <Grid x:Name="FilledView"              
                  Visibility="Collapsed"
                  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                  DataContext="{Binding Item}"
                  d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=../App1.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}">
                <Grid.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition/>
                    </TransitionCollection>
                </Grid.ChildrenTransitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
    
                <!--
                TODO: Content should be placed within the following grid 
                      to show details for the current item
            -->
                <Grid Grid.Row="1" x:Name="contentRegion_FilledView">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="2*"/>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>
                    <ListView Grid.Row="1" HorizontalAlignment="Center"
                              x:Name="itemGridView_FilledView"
                
                              AutomationProperties.AutomationId="ItemGridView"
                
                              AutomationProperties.Name="Items In Group"
                
                              TabIndex="1"
                              
                              Padding="0,30"
                
                              ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                
                              SelectionMode="None"
                
                              IsSwipeEnabled="false"
                
                              IsItemClickEnabled="True"
                
                              ItemClick="ItemView_ItemClick">
                        
                        <ListView.ItemTemplate>
                            <DataTemplate ScrollViewer.VerticalScrollBarVisibility="Auto">
                                <Grid HorizontalAlignment="Center" Height="110" Width="auto" Margin="10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="auto" Height="auto">
                                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                                    </Border>
                                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                                        <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                                        <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="FrameworkElement">
                                <Setter Property="Margin" Value="52,0,0,2"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                    <Grid Grid.Row="0" Width="auto" Height="auto" >
                        <MediaElement x:Name="VideoPlayer_FilledView"
                                Height="400"
                                Width="660"
                                AreTransportControlsEnabled="True"
                                AutoPlay="False"
                                Source="{Binding Content}"
                                DoubleTapped="VideoPlayer_DoubleTapped" 
                    />
                    </Grid>
                </Grid>
            </Grid>


    Here is the code of Visual States

    <VisualState x:Name="FullScreenLandScape">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilledView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NarrowView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Filled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilledView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible">
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NarrowView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed">
                                </DiscreteObjectKeyFrame>
    
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

    Here is the code of .CS

    public ItemPage()
            {
                this.Loaded += ItemPage_Loaded;
                this.Unloaded += ItemPage_Unloaded;
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += this.NavigationHelper_LoadState;
                
            }
    
            void ItemPage_Unloaded(object sender, RoutedEventArgs e)
            {
                Window.Current.SizeChanged -= Current_SizeChanged;
            }
    
            void ItemPage_Loaded(object sender, RoutedEventArgs e)
            {
                Window.Current.SizeChanged += Current_SizeChanged;
                DeterminateVisualState();
            }
    
            void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
            {
                DeterminateVisualState();
            }
    
            private void DeterminateVisualState()
            {
                var state = string.Empty;
                var applicationView = ApplicationView.GetForCurrentView();
                var size = Window.Current.Bounds;
    
                if (applicationView.IsFullScreen)
                {
                    if (applicationView.Orientation == ApplicationViewOrientation.Landscape)
                    {
                        state = "FullScreenLandScape";
                    }
                    else
                        state = "FullScreenPortrait";    
                }
                else
                {
                    if (size.Width <= 500)
                    {
                        state = "Narrow";
                    }
                    else
                        state = "Filled";
                }
                VisualStateManager.GoToState(this, state, true);
            }
    private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                
                var item = await SampleDataSource.GetItemAsync((string)e.NavigationParameter);
                this.DefaultViewModel["Item"] = item;
    
                var group = await SampleDataSource.GetGroupAsync("Group-1");
                this.DefaultViewModel["Group"] = group;
                this.DefaultViewModel["Items"] = group.Items;
    
            }
    I hope this will help to understand my problem.


    samEE


    Saturday, May 2, 2015 5:58 AM
  • Hello Sameel,

    Unfortunately posting large amounts of code here in the forum is not helpful. If you would like me to take a look at your code please create a very small Visual Studio 2013 sample that reproduces the problem with the least amount of code possible (only the code necessary to reproduce the problem), zip it up (please don't use RAR), upload it to your OneDrive and then post a link here.

    Thanks,

    James


    Windows SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Tuesday, May 5, 2015 1:00 AM
    Moderator