Media playback controls and strange behaviour of transport controls #uwp

Windows 10 WinRT API introduced ability to query whether a certain class, method, property etc were supported during run-time or not. This would allow applications to conditionally do things rather than crashing out due to unsupported API.

Since the initial release, many APIs have been introduced, Composition layer has seen many enhancements. Controls like MediaElementPlayer which return the load on UI thread by directly targeting GPU have been introduced. Prior to that developers used MediaElement control that was introduced in Windows 8 / Windows Phone 8.1 and was included in UWP API 10.0.10240.0. To take advantage of better performing control on updated devices, we need to use newer control.

private bool UseMediaPlayerElement => ApiInformation.IsTypePresent("Windows.UI.Xaml.Controls.MediaPlayerElement");

At this point we know whether we can use MediaElementPlayer or we need to fallback to MediaElement. Following the guidelines provided by Microsoft to an extent, I created a user control that dynamically injects the right control

public sealed partial class VideoPlayerUC : UserControl
{
    FrameworkElement mediaControl = null;

    private bool UseMediaPlayerElement => 
        ApiInformation.IsTypePresent("Windows.UI.Xaml.Controls.MediaPlayerElement");

    public VideoPlayerUC()
    {
        this.InitializeComponent();
            
        if (this.UseMediaPlayerElement)
        {
            mediaControl = new MediaPlayerElement();
        }
        else
        {
            mediaControl = new MediaElement();
        }

        this.Root.Children.Add(mediaControl);
    }

    public Video Video
    {
        get { return (Video)GetValue(VideoProperty); }
        set { SetValue(VideoProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Video.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty VideoProperty =
        DependencyProperty.Register("Video", 
        typeof(Video), 
        typeof(VideoPlayerUC), 
        new PropertyMetadata(null, OnVideoChanged));

    private static void OnVideoChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = d as VideoPlayerUC;
        control?.HandleVideoChange();
    }

    private void HandleVideoChange()
    {
        if (this.Video == null)
        {
            return;
        }

        MediaSource mediaSource = MediaSource.CreateFromUri(this.Video.Uri);

        MediaPlaybackItem playbackItem = new MediaPlaybackItem(mediaSource);

        if (this.UseMediaPlayerElement)
        {
            var mpe = mediaControl as MediaPlayerElement;

            mpe.Stretch = Stretch.Uniform;
            mpe.AreTransportControlsEnabled = this.Video.ShowControls;
            mpe.Source = playbackItem;
            mpe.PosterSource = new BitmapImage() { UriSource = this.Video.Images.Still.Uri };
            mpe.AutoPlay = Video.AutoPlay;

            if (mpe.MediaPlayer != null)
            {
                mpe.MediaPlayer.IsLoopingEnabled = Video.IsLooping;
            }
        }
        else
        {
            var me = mediaControl as MediaElement;

            me.Stretch = Stretch.Uniform;
            me.AreTransportControlsEnabled = this.Video.ShowControls;
            me.SetPlaybackSource(playbackItem);
            me.PosterSource = new BitmapImage() { UriSource = this.Video.Images.Still.Uri };
            me.AutoPlay = Video.AutoPlay;
            me.IsLooping = Video.IsLooping;
        }
    }
}

what I however noticed was that the playback controls (aptly called Transport controls) were very flaky.. Here’s an example.. they’d work some times and not at other times (read most of the times)

I was really baffled by this behaviour.. I reworked the user control a few times. I moved to using PlayerFramework but its styling is Windows 8 and that was rather annoying trying to style.

So I decided to try creating custom transport controls. Step one I created a custom template control that just derived from MediaTransportControls

public sealed class VideoControls : MediaTransportControls
{
    public VideoControls()
    {
        this.DefaultStyleKey = typeof(VideoControls);
    }
}

Set the XAML to default MediaTransport Style.
Now instantiate this and add that to the MediaPlayerElement / MediaElement and all was good except it was looking a bit rough. So time to style it like my design team wanted it to look. Here’s the final style

VideoControls controls = new VideoControls();

mpe.TransportControls = controls;

<Style TargetType="view:VideoControls">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="FlowDirection" Value="LeftToRight" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="IsTextScaleFactorEnabled" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="view:VideoControls">
                <Grid x:Name="RootGrid" Background="Transparent">
                    <Grid.Resources>

                        <!-- New AppBar button style 48x48 pixels in size -->

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton">
                            <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
                            <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
                            <Setter Property="Background" Value="#FF919191" />
                            <Setter Property="Foreground" Value="#FFFFFFFF" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="AppBarButton">
                                        <Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}">
                                            <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
                                                <ContentPresenter x:Name="Content" Height="20" Margin="0,14,0,4" HorizontalAlignment="Stretch" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" />
                                                <TextBlock x:Name="TextLabel" Margin="0,0,0,6" FontFamily="{TemplateBinding FontFamily}" FontSize="12" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Label}" TextAlignment="Center" TextWrapping="Wrap" />
                                            </StackPanel>

                                            <TextBlock x:Name="OverflowTextLabel" Margin="12,0,12,0" Padding="0,5,0,7" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontFamily="{TemplateBinding FontFamily}" FontSize="15" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Label}" TextAlignment="Left" TextTrimming="Clip" TextWrapping="NoWrap" Visibility="Collapsed" />
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="ApplicationViewStates">
                                                    <VisualState x:Name="FullSize" />
                                                    <VisualState x:Name="Compact">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Overflow">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="OverflowWithToggleButtons">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <Storyboard>
                                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#FF616161" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#FFFFFFFF" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="InputModeStates">
                                                    <VisualState x:Name="InputModeDefault" />
                                                    <VisualState x:Name="TouchInputMode">
                                                        <VisualState.Setters>
                                                            <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>


                        <!-- New CommandBar Style -->

<Style x:Key="CommandBarStyle" TargetType="CommandBar">
                            <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
                            <Setter Property="Background" Value="Transparent" />
                        </Style>


                        <!-- Style for Error Message text -->

<Style x:Key="MediaTextBlockStyle" TargetType="TextBlock">
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                            <Setter Property="FontSize" Value="{ThemeResource MTCMediaFontSize}" />
                            <Setter Property="FontFamily" Value="{ThemeResource MTCMediaFontFamily}" />
                            <Setter Property="IsTextScaleFactorEnabled" Value="False" />
                        </Style>



                        <!-- Style for Position slider used in Media Transport Controls -->

<Style x:Key="MediaSliderStyle" TargetType="Slider">
                            <Setter Property="Background" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
                            <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
                            <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                            <Setter Property="ManipulationMode" Value="None" />
                            <Setter Property="UseSystemFocusVisuals" Value="True" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Slider">
                                        <Grid Margin="{TemplateBinding Padding}">
                                            <Grid.Resources>

<Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                                    <Setter Property="BorderThickness" Value="0" />
                                                    <Setter Property="Background" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                                    <Setter Property="Foreground" Value="{ThemeResource SystemControlBackgroundChromeMediumBrush}" />
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="Thumb">
                                                                <Ellipse x:Name="ellipse" Fill="{TemplateBinding Foreground}" Stroke="{TemplateBinding Background}" StrokeThickness="2" />
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>


<Style x:Key="MediaSliderProgressBarStyle" TargetType="ProgressBar">
                                                    <Setter Property="Height" Value="{ThemeResource SliderTrackThemeHeight}" />
                                                    <Setter Property="Minimum" Value="0" />
                                                    <Setter Property="Maximum" Value="100" />
                                                    <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                                    <Setter Property="Background" Value="Transparent" />
                                                    <Setter Property="BorderBrush" Value="Transparent" />
                                                    <Setter Property="BorderThickness" Value="1" />
                                                </Style>

                                            </Grid.Resources>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <ContentPresenter x:Name="HeaderContentPresenter" Margin="{ThemeResource SliderHeaderThemeMargin}" x:DeferLoadStrategy="Lazy" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" Visibility="Collapsed" />
                                            <Grid x:Name="SliderContainer" Grid.Row="1" Background="Transparent" Control.IsTemplateFocusTarget="True">
                                                <Grid x:Name="HorizontalTemplate" MinHeight="44">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="18" />
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="18" />
                                                    </Grid.RowDefinitions>
                                                    <Rectangle x:Name="HorizontalTrackRect" Grid.Row="1" Grid.ColumnSpan="3" Height="{ThemeResource SliderTrackThemeHeight}" Fill="{TemplateBinding Background}" />
                                                    <ProgressBar x:Name="DownloadProgressIndicator" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Style="{StaticResource MediaSliderProgressBarStyle}" />
                                                    <Rectangle x:Name="HorizontalDecreaseRect" Grid.Row="1" Fill="{TemplateBinding Foreground}" />
                                                    <TickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="0,0,0,4" VerticalAlignment="Bottom" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Visibility="Collapsed" />
                                                    <TickBar x:Name="HorizontalInlineTickBar" Grid.Row="1" Grid.ColumnSpan="3" Height="{ThemeResource SliderTrackThemeHeight}" Fill="{ThemeResource SystemControlBackgroundAltHighBrush}" Visibility="Collapsed" />
                                                    <TickBar x:Name="BottomTickBar" Grid.Row="2" Grid.ColumnSpan="3" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="0,4,0,0" VerticalAlignment="Top" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Visibility="Collapsed" />
                                                    <Thumb x:Name="HorizontalThumb" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" Width="24" Height="24" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SystemControlForegroundAccentBrush}" DataContext="{TemplateBinding Value}" Style="{StaticResource SliderThumbStyle}" />
                                                </Grid>

                                                <Grid x:Name="VerticalTemplate" MinWidth="44" Visibility="Collapsed">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="18" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="18" />
                                                    </Grid.ColumnDefinitions>
                                                    <Rectangle x:Name="VerticalTrackRect" Grid.RowSpan="3" Grid.Column="1" Width="{ThemeResource SliderTrackThemeHeight}" Fill="{TemplateBinding Background}" />
                                                    <Rectangle x:Name="VerticalDecreaseRect" Grid.Row="2" Grid.Column="1" Fill="{TemplateBinding Foreground}" />
                                                    <TickBar x:Name="LeftTickBar" Grid.RowSpan="3" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="0,0,4,0" HorizontalAlignment="Right" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Visibility="Collapsed" />
                                                    <TickBar x:Name="VerticalInlineTickBar" Grid.RowSpan="3" Grid.Column="1" Width="{ThemeResource SliderTrackThemeHeight}" Fill="{ThemeResource SystemControlBackgroundAltHighBrush}" Visibility="Collapsed" />
                                                    <TickBar x:Name="RightTickBar" Grid.RowSpan="3" Grid.Column="2" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="4,0,0,0" HorizontalAlignment="Left" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Visibility="Collapsed" />
                                                    <Thumb x:Name="VerticalThumb" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Width="8" Height="24" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SystemControlForegroundAccentBrush}" DataContext="{TemplateBinding Value}" Style="{StaticResource SliderThumbStyle}" />
                                                </Grid>
                                            </Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>


                        <!-- Style for Volume Flyout used in Media Transport Controls -->

<Style x:Key="FlyoutStyle" TargetType="FlyoutPresenter">
                            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumBrush}" />
                            <Setter Property="Padding" Value="0" />
                        </Style>


                    </Grid.Resources>

                    <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
                        <Grid x:Name="ControlPanelGrid" VerticalAlignment="Bottom" Background="Transparent" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <TranslateTransform />
                            </Grid.RenderTransform>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Border x:Name="ErrorBorder" Grid.ColumnSpan="3" Width="320" Height="96" HorizontalAlignment="Center" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" Visibility="Collapsed">
                                <TextBlock x:Name="ErrorTextBlock" Margin="12" Style="{StaticResource MediaTextBlockStyle}" TextWrapping="WrapWholeWords" />
                            </Border>
                            <Border x:Name="MediaTransportControls_Timeline_Border" Grid.Row="1" Grid.Column="1" Background="Transparent">
                                <Grid x:Name="MediaTransportControls_Timeline_Grid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Slider x:Name="ProgressSlider" Height="33" MinWidth="80" Margin="12,0" VerticalAlignment="Center" IsThumbToolTipEnabled="False" Style="{StaticResource MediaSliderStyle}" />
                                    <ProgressBar x:Name="BufferingProgressBar" Height="4" Margin="0,2,0,0" VerticalAlignment="Top" IsHitTestVisible="False" IsIndeterminate="True" Visibility="Collapsed" />
                                    <Grid x:Name="TimeTextGrid" Grid.Row="1" Height="15" Margin="12,0">
                                        <TextBlock x:Name="TimeElapsedElement" Margin="0" HorizontalAlignment="Left" Style="{StaticResource MediaTextBlockStyle}" Text="00:00" />
                                        <TextBlock x:Name="TimeRemainingElement" HorizontalAlignment="Right" Style="{StaticResource MediaTextBlockStyle}" Text="00:00" />
                                    </Grid>
                                </Grid>
                            </Border>
                            <Border x:Name="LeftSidePlayBorder" Grid.Row="1" Grid.Column="0" Visibility="Collapsed">
                                <AppBarButton x:Name="PlayPauseButtonOnLeft" Margin="0" VerticalAlignment="Center" Style="{StaticResource AppBarButtonStyle}">
                                    <AppBarButton.Icon>
                                        <SymbolIcon x:Name="PlayPauseSymbolLeft" Symbol="Play" />
                                    </AppBarButton.Icon>
                                </AppBarButton>
                            </Border>
                            <Border x:Name="MediaTransportControls_Command_Border" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center">
                                <CommandBar x:Name="MediaControlsCommandBar" Margin="0,0,0,24" Style="{StaticResource CommandBarStyle}">
                                    <CommandBar.PrimaryCommands>
                                        <AppBarButton x:Name="StopButton" Icon="Stop" MediaTransportControlsHelper.DropoutOrder="1" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed" />
                                        <AppBarButton x:Name="RewindButton" MediaTransportControlsHelper.DropoutOrder="2" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="CastButton" MediaTransportControlsHelper.DropoutOrder="7" Style="{StaticResource AppBarButtonStyle}">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="ZoomButton" MediaTransportControlsHelper.DropoutOrder="6" Style="{StaticResource AppBarButtonStyle}">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="AudioTracksSelectionButton" Icon="Character" MediaTransportControlsHelper.DropoutOrder="5" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed" />
                                        <AppBarButton x:Name="PlayPauseButton" MediaTransportControlsHelper.DropoutOrder="11" Style="{StaticResource AppBarButtonStyle}">
                                            <AppBarButton.Icon>
                                                <SymbolIcon x:Name="PlayPauseSymbol" Symbol="Play" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="CCSelectionButton" MediaTransportControlsHelper.DropoutOrder="9" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="VolumeMuteButton" MediaTransportControlsHelper.DropoutOrder="10" Style="{StaticResource AppBarButtonStyle}">
                                            <AppBarButton.Flyout>
                                                <Flyout x:Name="VolumeFlyout" FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
                                                    <StackPanel Orientation="Horizontal">
                                                        <AppBarButton x:Name="AudioMuteButton" Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource AppBarButtonStyle}">
                                                            <AppBarButton.Icon>
                                                                <SymbolIcon x:Name="AudioMuteSymbol" Symbol="Volume" />
                                                            </AppBarButton.Icon>
                                                        </AppBarButton>
                                                        <Slider x:Name="VolumeSlider" Width="{ThemeResource MTCHorizontalVolumeSliderWidth}" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsThumbToolTipEnabled="False" Value="50" />
                                                        <TextBlock x:Name="VolumeValue" Width="24" Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource MediaTextBlockStyle}" Text="{Binding ElementName=VolumeSlider, Path=Value}" />
                                                    </StackPanel>
                                                </Flyout>
                                            </AppBarButton.Flyout>
                                            <AppBarButton.Icon>
                                                <SymbolIcon x:Name="VolumeMuteSymbol" Symbol="Volume" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="FullWindowButton" MediaTransportControlsHelper.DropoutOrder="8" Style="{StaticResource AppBarButtonStyle}">
                                            <AppBarButton.Icon>
                                                <SymbolIcon x:Name="FullWindowSymbol" Symbol="FullScreen" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="FastForwardButton" MediaTransportControlsHelper.DropoutOrder="3" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                        <AppBarButton x:Name="PlaybackRateButton" MediaTransportControlsHelper.DropoutOrder="4" Style="{StaticResource AppBarButtonStyle}" Visibility="Collapsed">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="" />
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                    </CommandBar.PrimaryCommands>
                                </CommandBar>
                            </Border>
                        </Grid>
                    </Border>

                    <VisualStateManager.VisualStateGroups>

                        <!-- ControlPanel Visibility states -->
                        <VisualStateGroup x:Name="ControlPanelVisibilityStates">
                            <VisualState x:Name="ControlPanelFadeIn">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ControlPanel_ControlPanelVisibilityStates_Border" Storyboard.TargetProperty="Opacity">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ControlPanelFadeOut">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ControlPanel_ControlPanelVisibilityStates_Border" Storyboard.TargetProperty="Opacity">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlPanel_ControlPanelVisibilityStates_Border" Storyboard.TargetProperty="IsHitTestVisible">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- ControlPanel Visibility states -->

                        <!-- Media state visual states -->
                        <VisualStateGroup x:Name="MediaStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Buffering">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BufferingProgressBar" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Loading">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BufferingProgressBar" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetName="ProgressSlider" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="MediaControlsCommandBar" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Error">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ErrorBorder" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard />
                            </VisualState>
                        </VisualStateGroup>
                        <!-- Media state visual states -->

                        <!-- Audio Selection Button visibility states -->
                        <VisualStateGroup x:Name="AudioSelectionAvailablityStates">
                            <VisualState x:Name="AudioSelectionAvailable">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AudioTracksSelectionButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="AudioSelectionUnavailable" />
                        </VisualStateGroup>
                        <!-- Video volume visibility states -->

                        <!-- Closed Captioning Selection Button visibility states -->
                        <VisualStateGroup x:Name="CCSelectionAvailablityStates">
                            <VisualState x:Name="CCSelectionAvailable">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CCSelectionButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="CCSelectionUnavailable" />
                        </VisualStateGroup>
                        <!-- Closed Captioning visibility states -->

                        <!-- Focus states -->
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                        <!-- Focus states -->
                        <VisualStateGroup x:Name="MediaTransportControlMode">
                            <VisualState x:Name="NormalMode" />
                            <VisualState x:Name="CompactMode">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftSidePlayBorder" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TimeTextGrid" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaTransportControls_Command_Border" Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaTransportControls_Command_Border" Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaControlsCommandBar" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>

                        <!-- PlayPause states -->
                        <VisualStateGroup x:Name="PlayPauseStates">
                            <VisualState x:Name="PlayState" />
                            <VisualState x:Name="PauseState">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseSymbolLeft" Storyboard.TargetProperty="Symbol">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Pause" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseSymbol" Storyboard.TargetProperty="Symbol">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Pause" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- VolumeMute states -->
                        <VisualStateGroup x:Name="VolumeMuteStates">
                            <VisualState x:Name="VolumeState" />
                            <VisualState x:Name="MuteState">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AudioMuteSymbol" Storyboard.TargetProperty="Symbol">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Mute" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VolumeMuteSymbol" Storyboard.TargetProperty="Symbol">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Mute" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- FullWindow states -->
                        <VisualStateGroup x:Name="FullWindowStates">
                            <VisualState x:Name="NonFullWindowState" />
                            <VisualState x:Name="FullWindowState">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullWindowSymbol" Storyboard.TargetProperty="Symbol">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="BackToWindow" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It looks good now.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s