MediaTransportControls styles and templates
TOC
Collapse the table of content
Expand the table of content

MediaTransportControls styles and templates

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

This topic describes the default style and template for the MediaTransportControls control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.

Note   These styles and resources are based on the Windows Software Development Kit (SDK) for Windows 10, Version 1511 (Windows SDK version 10.0.10586.0). Styles and resources from other versions of the SDK might have different values. For design purposes, generic.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic folder from a Windows SDK installation.
 

Visual states

These are the VisualStates defined in the control's default style.

VisualState nameVisualStateGroup name
ControlPanelFadeInControlPanelVisibilityStates
ControlPanelFadeOutControlPanelVisibilityStates
NormalMediaStates
BufferingMediaStates
LoadingMediaStates
ErrorMediaStates
DisabledMediaStates
AudioSelectionAvailableAudioSelectionAvailablityStates
AudioSelectionUnavailableAudioSelectionAvailablityStates
CCSelectionAvailableCCSelectionAvailablityStates
CCSelectionUnavailableCCSelectionAvailablityStates
FocusedFocusStates
UnfocusedFocusStates
PointerFocusedFocusStates
NormalModeMediaTransportControlMode
CompactModeMediaTransportControlMode
PlayStatePlayPauseStates
PauseStatePlayPauseStates
VolumeStateVolumeMuteStates
MuteStateVolumeMuteStates
NonFullWindowStateFullWindowStates
FullWindowStateFullWindowStates

 

This table lists the visual states for the control's position slider.

VisualState nameVisualStateGroup name
NormalCommonStates
PointerOverCommonStates
PressedCommonStates
DisabledCommonStates

 

For more info about focus states and how to customize focus visuals, see Control.UseSystemFocusVisuals.

Theme resources

These resources are used in the control's default style. For more info about theme resources and the brushes used in the default style, see XAML theme resources.


<x:Double x:Key='MTCControlPanelHeight'>42</x:Double>
<x:Double x:Key='MTCHorizontalVolumeSliderWidth'>180</x:Double>
<x:Double x:Key='MTCMediaFontSize'>12</x:Double>
<x:Double x:Key='MTCMediaButtonHeight'>48</x:Double>
<x:Double x:Key='MTCMediaButtonWidth'>48</x:Double>
<x:Double x:Key='MTCPositionSliderMinimumWidth'>96</x:Double>
<x:Double x:Key='MTCSideMargins'>16</x:Double>
<x:Double x:Key='MTCTimeButtonHeight'>21</x:Double>
<x:Double x:Key='MTCTimeButtonWidth'>62</x:Double>
<x:Double x:Key='MTCVerticalVolumeHostVerticalOffset'>-112</x:Double>
<x:Double x:Key='MTCVerticalVolumeHostWidth'>42</x:Double>
<x:Double x:Key='MTCVerticalVolumeSliderMaxHeight'>289</x:Double>
<x:Double x:Key='MTCVerticalVolumeSliderMinHeight'>96</x:Double>
<x:Double x:Key='MTCVerticalVolumeSliderTopGap'>8</x:Double>
<x:Double x:Key='MTCVerticalVolumeSliderTopPadding'>16</x:Double>

Default style


<!-- Default style for MediaTransportControls -->
<Style TargetType="MediaTransportControls">
<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="MediaTransportControls">
      <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}' />
          </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 TargetType="Thumb" x:Key="SliderThumbStyle">
                        <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'
                              Stroke='{TemplateBinding Background}'
                              StrokeThickness='2'
                              Fill='{TemplateBinding Foreground}'/>
                            </ControlTemplate>
                          </Setter.Value>
                        </Setter>
                      </Style>
                      <Style TargetType='ProgressBar' x:Key='MediaSliderProgressBarStyle'>
                        <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>
                    <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>
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                x:DeferLoadStrategy="Lazy"
                                Visibility="Collapsed"
                                Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                Margin="{ThemeResource SliderHeaderThemeMargin}"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" />
                    <Grid x:Name="SliderContainer" Background="Transparent" Grid.Row="1" 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"
                                Fill="{TemplateBinding Background}"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Grid.Row="1"
                                Grid.ColumnSpan="3" />
                        <ProgressBar x:Name='DownloadProgressIndicator'
                                  Style='{StaticResource MediaSliderProgressBarStyle}'
                                  Grid.Row='1'
                                  Grid.ColumnSpan='3'
                                  HorizontalAlignment='Stretch'
                                  VerticalAlignment='Center'/>
                        <Rectangle x:Name="HorizontalDecreaseRect"
                                Fill="{TemplateBinding Foreground}"
                                Grid.Row="1" />
                        <TickBar x:Name="TopTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                VerticalAlignment="Bottom"
                                Margin="0,0,0,4"
                                Grid.ColumnSpan="3" />
                        <TickBar x:Name="HorizontalInlineTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlBackgroundAltHighBrush}"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Grid.Row="1"
                                Grid.ColumnSpan="3" />
                        <TickBar x:Name="BottomTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                VerticalAlignment="Top"
                                Margin="0,4,0,0"
                                Grid.Row="2"
                                Grid.ColumnSpan="3" />
                        <Thumb x:Name="HorizontalThumb"
                                Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                Style="{StaticResource SliderThumbStyle}"
                                DataContext="{TemplateBinding Value}"
                                Height="24"
                                Width="24"
                                Grid.Row="0"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                AutomationProperties.AccessibilityView="Raw" />
                      </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"
                                Fill="{TemplateBinding Background}"
                                Width="{ThemeResource SliderTrackThemeHeight}"
                                Grid.Column="1"
                                Grid.RowSpan="3" />
                        <Rectangle x:Name="VerticalDecreaseRect"
                                Fill="{TemplateBinding Foreground}"
                                Grid.Column="1"
                                Grid.Row="2" />
                        <TickBar x:Name="LeftTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                HorizontalAlignment="Right"
                                Margin="0,0,4,0"
                                Grid.RowSpan="3" />
                        <TickBar x:Name="VerticalInlineTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlBackgroundAltHighBrush}"
                                Width="{ThemeResource SliderTrackThemeHeight}"
                                Grid.Column="1"
                                Grid.RowSpan="3" />
                        <TickBar x:Name="RightTickBar"
                                Visibility="Collapsed"
                                Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                HorizontalAlignment="Left"
                                Margin="4,0,0,0"
                                Grid.Column="2"
                                Grid.RowSpan="3" />
                        <Thumb x:Name="VerticalThumb"
                                Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                Style="{StaticResource SliderThumbStyle}"
                                DataContext="{TemplateBinding Value}"
                                Width="8"
                                Height="24"
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                AutomationProperties.AccessibilityView="Raw"/>
                      </Grid>
                    </Grid>
                  </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>

        <VisualStateManager.VisualStateGroups>

          <!-- ControlPanel Visibility states -->
          <VisualStateGroup x:Name='ControlPanelVisibilityStates'>
            <VisualState x:Name='ControlPanelFadeIn'>
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty='Opacity' Storyboard.TargetName='ControlPanel_ControlPanelVisibilityStates_Border'>
                  <EasingDoubleKeyFrame KeyTime='0' Value='0' />
                  <EasingDoubleKeyFrame KeyTime='0:0:0.3' Value='1' />
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name='ControlPanelFadeOut'>
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty='Opacity' Storyboard.TargetName='ControlPanel_ControlPanelVisibilityStates_Border'>
                  <EasingDoubleKeyFrame KeyTime='0' Value='1' />
                  <EasingDoubleKeyFrame KeyTime='0:0:0.7' Value='0' />
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty='IsHitTestVisible' Storyboard.TargetName='ControlPanel_ControlPanelVisibilityStates_Border'>
                  <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.TargetProperty='Visibility' Storyboard.TargetName='BufferingProgressBar'>
                  <DiscreteObjectKeyFrame KeyTime='0'>
                    <DiscreteObjectKeyFrame.Value>
                      <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                  </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name='Loading'>
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty='Visibility' Storyboard.TargetName='BufferingProgressBar'>
                  <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.TargetProperty='Visibility' Storyboard.TargetName='ErrorBorder'>
                  <DiscreteObjectKeyFrame KeyTime='0'>
                    <DiscreteObjectKeyFrame.Value>
                      <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                  </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name='Disabled'>
              <Storyboard>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
          <!-- Media state visual states -->

          <!-- Audio Selection Button visibility states -->
          <VisualStateGroup x:Name='AudioSelectionAvailablityStates'>
            <VisualState x:Name='AudioSelectionAvailable'>
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty='Visibility' Storyboard.TargetName='AudioTracksSelectionButton'>
                  <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.TargetProperty='Visibility' Storyboard.TargetName='CCSelectionButton'>
                  <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>

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


Related topics

Styling controls
Control templates

 

 

Show:
© 2018 Microsoft