From 9fcf4b19450b8f60155092a3645a3f30ba6d4d3c Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Wed, 5 May 2021 15:02:51 -0700
Subject: [PATCH 01/10] remove slider custom style

---
 dev/CommonStyles/MediaTransportControls_themeresources.xaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 6b9f30c46a..3537a2e3cc 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -8,7 +8,7 @@
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
-            <StaticResource x:Key="MediaTransportControlsPanelBackground" ResourceKey="ControlOnImageFillColorDefaultBrush" />
+            <StaticResource x:Key="MediaTransportControlsPanelBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFlyoutBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsThumbBorderBackground" ResourceKey="ControlStrongFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFillTimeElapsedText" ResourceKey="TextFillColorSecondaryBrush" />
@@ -24,7 +24,7 @@
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
-            <StaticResource x:Key="MediaTransportControlsPanelBackground" ResourceKey="ControlOnImageFillColorDefaultBrush" />
+            <StaticResource x:Key="MediaTransportControlsPanelBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFlyoutBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsThumbBorderBackground" ResourceKey="ControlStrongFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFillTimeElapsedText" ResourceKey="TextFillColorSecondaryBrush" />
@@ -756,7 +756,7 @@
                                             <RowDefinition />
                                             <RowDefinition Height="Auto" />
                                         </Grid.RowDefinitions>
-                                        <Slider x:Name="ProgressSlider" Style="{StaticResource MediaSliderStyle}" Margin="12,0" MinWidth="80" Height="33" VerticalAlignment="Center" IsThumbToolTipEnabled="False" />
+                                        <Slider x:Name="ProgressSlider" 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" VerticalAlignment="Bottom" />

From 051788b671186cd639aa59a6f0ff2289487dd983 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Fri, 7 May 2021 13:24:40 -0700
Subject: [PATCH 02/10] update layout

---
 .../AppBarButton_themeresources.xaml          |   2 +-
 .../CommandBar_themeresources.xaml            |   2 +-
 ...MediaTransportControls_themeresources.xaml | 307 +++---------------
 3 files changed, 41 insertions(+), 270 deletions(-)

diff --git a/dev/CommonStyles/AppBarButton_themeresources.xaml b/dev/CommonStyles/AppBarButton_themeresources.xaml
index b20c044d4b..9fffa4212e 100644
--- a/dev/CommonStyles/AppBarButton_themeresources.xaml
+++ b/dev/CommonStyles/AppBarButton_themeresources.xaml
@@ -341,7 +341,7 @@
 
                         </VisualStateManager.VisualStateGroups>
                         <Border x:Name="AppBarButtonInnerBorder"                                       
-                                Margin="{StaticResource AppBarButtonInnerBorderMargin}"
+                                Margin="{ThemeResource AppBarButtonInnerBorderMargin}"
                                 Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}"
diff --git a/dev/CommonStyles/CommandBar_themeresources.xaml b/dev/CommonStyles/CommandBar_themeresources.xaml
index 3e655601bb..a30a166fbc 100644
--- a/dev/CommonStyles/CommandBar_themeresources.xaml
+++ b/dev/CommonStyles/CommandBar_themeresources.xaml
@@ -833,7 +833,7 @@
                               XYFocusKeyboardNavigation="Enabled">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" MinWidth="{StaticResource AppBarMoreButtonColumnMinWidth}"/>
+                                <ColumnDefinition Width="Auto" MinWidth="{ThemeResource AppBarMoreButtonColumnMinWidth}"/>
                             </Grid.ColumnDefinitions>
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="ContentTransform" />
diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 3537a2e3cc..20a57360b4 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -13,6 +13,10 @@
             <StaticResource x:Key="MediaTransportControlsThumbBorderBackground" ResourceKey="ControlStrongFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFillTimeElapsedText" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="TextFillColorPrimaryBrush" />
+            <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
+            <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
@@ -21,6 +25,10 @@
             <StaticResource x:Key="MediaTransportControlsThumbBorderBackground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
             <StaticResource x:Key="MediaTransportControlsFillTimeElapsedText" ResourceKey="SystemControlPageTextBaseMediumBrush" />
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
+            <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
@@ -29,6 +37,10 @@
             <StaticResource x:Key="MediaTransportControlsThumbBorderBackground" ResourceKey="ControlStrongFillColorDefaultBrush" />
             <StaticResource x:Key="MediaTransportControlsFillTimeElapsedText" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="TextFillColorPrimaryBrush" />
+            <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
+            <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -38,28 +50,27 @@
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="FlowDirection" Value="LeftToRight" />
+        <Setter Property="Margin" Value="{ThemeResource MediaTransportControlsMargin}" />
         <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
         <Setter Property="IsTextScaleFactorEnabled" Value="False" />
+        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="MediaTransportControls">
                     <Grid x:Name="RootGrid" Background="Transparent">
                         <Grid.Resources>
-                            <!-- New AppBar button style 48x48 pixels in size -->
+                            <!-- New AppBar button style 40x40 pixels in size -->
                             <Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource DefaultAppBarButtonStyle}">
-                                <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
-                                <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
+                                <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
                                 <Setter Property="AllowFocusOnInteraction" Value="True" />
                             </Style>
-                            <!-- New AppBarToggle button style 48x48 pixels in size -->
+                            <!-- New AppBarToggle button style 40x40 pixels in size -->
                             <Style x:Key="AppBarToggleButtonStyle" TargetType="AppBarToggleButton" BasedOn="{StaticResource DefaultAppBarToggleButtonStyle}">
-                                <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
-                                <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
+                                <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
                                 <Setter Property="AllowFocusOnInteraction" Value="True" />
                             </Style>
                             <!-- New CommandBar Style -->
                             <Style x:Key="CommandBarStyle" TargetType="CommandBar" BasedOn="{StaticResource DefaultCommandBarStyle}">
-                                <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
                                 <Setter Property="Background" Value="Transparent" />
                                 <Setter Property="DefaultLabelPosition" Value="Collapsed"/>
                             </Style>
@@ -72,259 +83,6 @@
                                 <Setter Property="Style" Value="{ThemeResource CaptionTextBlockStyle }" />
                                 <Setter Property="IsTextScaleFactorEnabled" Value="False" />
                             </Style>
-                            <!-- Style for Position slider used in Media Transport Controls -->
-                            <Style x:Key="MediaSliderStyle" TargetType="Slider" BasedOn="{StaticResource DefaultSliderStyle}">
-                                <Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
-                                <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
-                                <Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
-                                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-                                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
-                                <Setter Property="ManipulationMode" Value="None" />
-                                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-                                <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
-                                <Setter Property="IsFocusEngagementEnabled" Value="True" />
-                                <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
-                                <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 SliderThumbBackground}" />
-                                                        <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="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="Disabled">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="PointerOver">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-                                                    <VisualStateGroup x:Name="FocusEngagementStates">
-                                                        <VisualState x:Name="FocusDisengaged" />
-                                                        <VisualState x:Name="FocusEngagedHorizontal">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="FocusEngagedVertical">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-                                                </VisualStateManager.VisualStateGroups>
-                                                <ContentPresenter x:Name="HeaderContentPresenter" x:DeferLoadStrategy="Lazy" Visibility="Collapsed" Foreground="{ThemeResource SliderHeaderForeground}" Margin="{ThemeResource SliderHeaderThemeMargin}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" TextWrapping="Wrap" />
-                                                <Grid x:Name="SliderContainer" Background="{ThemeResource SliderContainerBackground}" 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"
-                                                            contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                                                        <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"
-                                                            contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                                                        <TickBar x:Name="TopTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
-                                                        <TickBar x:Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderInlineTickBarFill}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
-                                                        <TickBar x:Name="BottomTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
-                                                        <Thumb x:Name="HorizontalThumb" Style="{StaticResource SliderThumbStyle}" Height="24" Width="24" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" FocusVisualMargin="-14,-6,-14,-6" AutomationProperties.AccessibilityView="Raw">
-                                                            <ToolTipService.ToolTip>
-                                                                <ToolTip x:Name="ThumbnailTooltip">
-                                                                    <ContentPresenter Content="{Binding}" />
-                                                                </ToolTip>
-                                                            </ToolTipService.ToolTip>
-                                                            <Thumb.DataContext>
-                                                                <Grid Height="112" Width="192">
-                                                                    <Image x:Name="ThumbnailImage" />
-                                                                    <Border Background="{ThemeResource MediaTransportControlsThumbBorderBackground}" VerticalAlignment="Bottom" HorizontalAlignment="Left">
-                                                                        <TextBlock x:Name="TimeElapsedPreview" Margin="6,1,6,3" Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False" Foreground="{ThemeResource MediaTransportControlsFillTimeElapsedText}" />
-                                                                    </Border>
-                                                                </Grid>
-                                                            </Thumb.DataContext>
-                                                        </Thumb>
-                                                    </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"
-                                                            contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                                                        <Rectangle
-                                                            x:Name="VerticalDecreaseRect"
-                                                            Fill="{TemplateBinding Foreground}"
-                                                            Grid.Column="1"
-                                                            Grid.Row="2"
-                                                            contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                                            contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                                                        <TickBar x:Name="LeftTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
-                                                        <TickBar x:Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderInlineTickBarFill}" Width="{ThemeResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
-                                                        <TickBar x:Name="RightTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" />
-                                                        <Thumb x:Name="VerticalThumb" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Width="24" Height="8" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" FocusVisualMargin="-6,-14,-6,-14" 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" BasedOn="{StaticResource DefaultFlyoutPresenterStyle}">
                                 <Setter Property="Background" Value="{ThemeResource MediaTransportControlsFlyoutBackground}" />
@@ -339,7 +97,7 @@
                                 <Setter Property="VerticalAlignment" Value="Top" />
                                 <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                                 <Setter Property="FontWeight" Value="Normal" />
-                                <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
+                                <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
                                 <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"  />
                                 <Setter Property="AllowFocusOnInteraction" Value="False" />
                                 <Setter Property="Template">
@@ -730,7 +488,14 @@
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
-                            <Grid x:Name="ControlPanelGrid" Background="{ThemeResource MediaTransportControlsPanelBackground}" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
+                            <Grid x:Name="ControlPanelGrid"
+                                  Background="{ThemeResource MediaTransportControlsPanelBackground}"
+                                  VerticalAlignment="Bottom"
+                                  RenderTransformOrigin="0.5,0.5"
+                                  BorderBrush="{ThemeResource MediaTransportControlsBorderBrush}"
+                                  BorderThickness="{ThemeResource MediaTransportControlsBorderThickness}"
+                                  contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                  contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}">
                                 <Grid.RenderTransform>
                                     <TranslateTransform x:Name="TranslateVertical" />
                                 </Grid.RenderTransform>
@@ -745,7 +510,7 @@
                                     <RowDefinition Height="Auto" />
                                 </Grid.RowDefinitions>
                                 <Border x:Name="ErrorBorder" Width="320" Height="96" Grid.ColumnSpan="3" HorizontalAlignment="Center" Background="{ThemeResource MediaTransportControlsPanelBackground}" Visibility="Collapsed">
-                                    <TextBlock x:Name="ErrorTextBlock" Style="{StaticResource MediaTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12" />
+                                    <TextBlock x:Name="ErrorTextBlock" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12" />
                                 </Border>
                                 <Border x:Name="MediaTransportControls_Timeline_Border" Grid.Column="1" Grid.Row="1">
                                     <Grid x:Name="MediaTransportControls_Timeline_Grid">
@@ -756,11 +521,11 @@
                                             <RowDefinition />
                                             <RowDefinition Height="Auto" />
                                         </Grid.RowDefinitions>
-                                        <Slider x:Name="ProgressSlider" Margin="12,0" MinWidth="80" Height="33" VerticalAlignment="Center" IsThumbToolTipEnabled="False" />
+                                        <Slider x:Name="ProgressSlider" Margin="8,0" MinWidth="80" Height="32" 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" VerticalAlignment="Bottom" />
-                                            <TextBlock x:Name="TimeRemainingElement" Style="{StaticResource MediaTextBlockStyle}" Text="00:00" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
+                                        <Grid x:Name="TimeTextGrid" Margin="8,0" Grid.Row="1" Height="16">
+                                            <TextBlock x:Name="TimeElapsedElement" Style="{StaticResource CaptionTextBlockStyle}" Margin="0" Text="00:00" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
+                                            <TextBlock x:Name="TimeRemainingElement" Style="{StaticResource CaptionTextBlockStyle}" Text="00:00" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
                                         </Grid>
                                     </Grid>
                                 </Border>
@@ -772,7 +537,13 @@
                                     </AppBarButton>
                                 </Border>
                                 <Border x:Name="MediaTransportControls_Command_Border" Grid.Column="1" Grid.Row="2">
-                                    <CommandBar x:Name="MediaControlsCommandBar" Margin="0,0" Style="{StaticResource CommandBarStyle}" IsDynamicOverflowEnabled="False">
+                                    <CommandBar x:Name="MediaControlsCommandBar" Margin="0" Style="{StaticResource CommandBarStyle}" IsDynamicOverflowEnabled="False">
+                                        <CommandBar.Resources>
+                                            <Thickness x:Key="AppBarButtonInnerBorderMargin">5</Thickness>
+                                            <Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,12</Thickness>
+                                            <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
+                                            <x:Double x:Key="AppBarMoreButtonColumnMinWidth">0</x:Double>
+                                        </CommandBar.Resources>
                                         <CommandBar.PrimaryCommands>
                                             <AppBarButton x:Name="VolumeMuteButton" Style="{StaticResource AppBarButtonStyle}" MediaTransportControlsHelper.DropoutOrder="19">
                                                 <AppBarButton.Flyout>

From 43ae24eacba6711458b1f78b98663909f3c6a217 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Mon, 10 May 2021 17:50:15 -0700
Subject: [PATCH 03/10] update MPE test page

---
 .../TestUI/MediaTransportControlsPage.xaml    | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml b/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
index 32c94f497d..c0d1e89544 100644
--- a/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
+++ b/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
@@ -8,9 +8,48 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:contract5Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,5)"
     mc:Ignorable="d">
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
-        <MediaPlayerElement Source="ms-appx:///Assets/ladybug.wmv" MaxWidth="400" MaxHeight="225" AutoPlay="True" AreTransportControlsEnabled="True" />
+
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto"/>
+            <ColumnDefinition Width="*"/>
+        </Grid.ColumnDefinitions>
+
+        <StackPanel Orientation="Vertical" contract5Present:Spacing="4" Background="{ThemeResource SystemControlBackgroundBaseLowBrush}" Padding="12">
+            <CheckBox x:Name="IsCompactCheckBox" AutomationProperties.Name="IsCompactCheckBox" IsChecked="False" Content="IsCompact" />
+            <CheckBox x:Name="IsSeekBarVisibleCheckBox" AutomationProperties.Name="IsSeekBarVisibleCheckBox" IsChecked="True" Content="IsSeekBarVisisble" />
+            <CheckBox x:Name="IsFastForwardButtonVisibleCheckBox" AutomationProperties.Name="IsFastForwardButtonVisibleCheckBox" IsChecked="False" Content="IsFastForwardButtonVisible" />
+            <CheckBox x:Name="IsFastRewindButtonVisibleCheckBox" AutomationProperties.Name="IsFastRewindButtonVisibleCheckBox" IsChecked="False" Content="IsFastRewindButtonVisible" />
+            <CheckBox x:Name="IsStopButtonVisibleCheckBox" AutomationProperties.Name="IsStopButtonVisibleCheckBox" IsChecked="False" Content="IsStopButtonVisible" />
+            <CheckBox x:Name="IsVolumeButtonVisibleCheckBox" AutomationProperties.Name="IsVolumeButtonVisibleCheckBox" IsChecked="True" Content="IsVolumeButtonVisible" />
+            <CheckBox x:Name="IsFullWindowButtonVisibleCheckBox" AutomationProperties.Name="IsFullWindowButtonVisibleCheckBox" IsChecked="True" Content="IsFullWindowButtonVisible" />
+            <CheckBox x:Name="IsPlaybackRateButtonVisibleCheckBox" AutomationProperties.Name="IsPlaybackRateButtonVisibleCheckBox" IsChecked="False" Content="IsPlaybackRateButtonVisible" />
+            <CheckBox x:Name="IsZoomButtonVisibleCheckBox" AutomationProperties.Name="IsZoomButtonVisibleCheckBox" IsChecked="True" Content="IsZoomButtonVisisble" />
+        </StackPanel>
+
+        <Grid Grid.Column="1">
+            <MediaPlayerElement
+                Source="ms-appx:///Assets/ladybug.wmv"
+                MaxWidth="1000"
+                MaxHeight="1000"
+                AutoPlay="False"
+                AreTransportControlsEnabled="True">
+                <MediaPlayerElement.TransportControls>
+                    <MediaTransportControls
+                        IsCompact="{x:Bind IsCompactCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsSeekBarVisible="{x:Bind IsSeekBarVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsFastForwardButtonVisible="{x:Bind IsFastForwardButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsFastRewindButtonVisible="{x:Bind IsFastRewindButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsStopButtonVisible="{x:Bind IsStopButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsVolumeButtonVisible="{x:Bind IsVolumeButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsFullWindowButtonVisible="{x:Bind IsFullWindowButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsPlaybackRateButtonVisible="{x:Bind IsPlaybackRateButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
+                        IsZoomButtonVisible="{x:Bind IsZoomButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}" />
+                </MediaPlayerElement.TransportControls>
+            </MediaPlayerElement>
+        </Grid>
     </Grid>
 </local:TestPage>

From d1a279adb9fa393b7237e735a5ca3feb4a1c95b1 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Mon, 10 May 2021 18:56:05 -0700
Subject: [PATCH 04/10] add height to compact mode

---
 dev/CommonStyles/MediaTransportControls_themeresources.xaml | 1 +
 dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml     | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 20a57360b4..53f7abb168 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -437,6 +437,7 @@
                                         <Setter Target="TimeTextGrid.Visibility" Value="Collapsed" />
                                         <Setter Target="MediaTransportControls_Command_Border.(Grid.Column)" Value="2" />
                                         <Setter Target="MediaTransportControls_Command_Border.(Grid.Row)" Value="1" />
+                                        <Setter Target="ControlPanelGrid.Height" Value="48" />
                                         <Setter Target="MediaControlsCommandBar.Margin" Value="0" />
                                         <Setter Target="PlayPauseButton.Visibility" Value="Collapsed" />
                                     </VisualState.Setters>
diff --git a/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml b/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
index c0d1e89544..edea1a4cfd 100644
--- a/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
+++ b/dev/CommonStyles/TestUI/MediaTransportControlsPage.xaml
@@ -33,8 +33,8 @@
         <Grid Grid.Column="1">
             <MediaPlayerElement
                 Source="ms-appx:///Assets/ladybug.wmv"
-                MaxWidth="1000"
-                MaxHeight="1000"
+                MaxWidth="750"
+                MaxHeight="750"
                 AutoPlay="False"
                 AreTransportControlsEnabled="True">
                 <MediaPlayerElement.TransportControls>

From 2fb0e4c997ead57885b8d2f77d9f8d7d1762ff6d Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Wed, 12 May 2021 16:48:30 -0700
Subject: [PATCH 05/10] tweak layout

---
 dev/CommonStyles/MediaTransportControls_themeresources.xaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 53f7abb168..4fd8d2666c 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -522,9 +522,9 @@
                                             <RowDefinition />
                                             <RowDefinition Height="Auto" />
                                         </Grid.RowDefinitions>
-                                        <Slider x:Name="ProgressSlider" Margin="8,0" MinWidth="80" Height="32" VerticalAlignment="Center" IsThumbToolTipEnabled="False" />
+                                        <Slider x:Name="ProgressSlider" Margin ="7,3,7,0" MinWidth="80" Height="32" 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="8,0" Grid.Row="1" Height="16">
+                                        <Grid x:Name="TimeTextGrid" Margin="7,0,7,2" Grid.Row="1" Height="16">
                                             <TextBlock x:Name="TimeElapsedElement" Style="{StaticResource CaptionTextBlockStyle}" Margin="0" Text="00:00" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
                                             <TextBlock x:Name="TimeRemainingElement" Style="{StaticResource CaptionTextBlockStyle}" Text="00:00" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
                                         </Grid>
@@ -538,7 +538,7 @@
                                     </AppBarButton>
                                 </Border>
                                 <Border x:Name="MediaTransportControls_Command_Border" Grid.Column="1" Grid.Row="2">
-                                    <CommandBar x:Name="MediaControlsCommandBar" Margin="0" Style="{StaticResource CommandBarStyle}" IsDynamicOverflowEnabled="False">
+                                    <CommandBar x:Name="MediaControlsCommandBar" Margin="0,3" Style="{StaticResource CommandBarStyle}" IsDynamicOverflowEnabled="False">
                                         <CommandBar.Resources>
                                             <Thickness x:Key="AppBarButtonInnerBorderMargin">5</Thickness>
                                             <Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,12</Thickness>

From 071e5645ddad0e9bd6a5f8f4a10d88bf0cade8f7 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Wed, 12 May 2021 17:18:45 -0700
Subject: [PATCH 06/10] tweak compact mode

---
 .../MediaTransportControls_themeresources.xaml            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 4fd8d2666c..5481bc03a0 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -440,7 +440,9 @@
                                         <Setter Target="ControlPanelGrid.Height" Value="48" />
                                         <Setter Target="MediaControlsCommandBar.Margin" Value="0" />
                                         <Setter Target="PlayPauseButton.Visibility" Value="Collapsed" />
-                                    </VisualState.Setters>
+                                        <Setter Target="ProgressSlider.Margin" Value="12,0,8,0" />
+                                        <Setter Target="ControlPanelGrid.Padding" Value="3" />
+                                    </VisualState.Setters> 
                                 </VisualState>
                             </VisualStateGroup>
                             <!-- PlayPause states -->
@@ -532,6 +534,10 @@
                                 </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.Resources>
+                                            <Thickness x:Key="AppBarButtonInnerBorderMargin">5</Thickness>
+                                            <Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,12</Thickness>
+                                        </AppBarButton.Resources>
                                         <AppBarButton.Icon>
                                             <SymbolIcon x:Name="PlayPauseSymbolLeft" Symbol="Play" />
                                         </AppBarButton.Icon>

From 06ea88fddc8a46bb80a633568461e13e42cd42ee Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Thu, 13 May 2021 10:21:58 -0700
Subject: [PATCH 07/10] update volume flyout layout

---
 ...MediaTransportControls_themeresources.xaml | 293 ++----------------
 1 file changed, 33 insertions(+), 260 deletions(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 5481bc03a0..9ec19397ba 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -16,7 +16,10 @@
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderHeight">32</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderWidth">190</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
@@ -28,7 +31,10 @@
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderHeight">32</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderWidth">190</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <Thickness x:Key="MediaTransportControlsTitleSafeBounds">48,0,48,27</Thickness>
@@ -40,7 +46,10 @@
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
+            <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderHeight">32</x:Double>
+            <x:Double x:Key="MediaTransportControlsSliderWidth">190</x:Double>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -61,11 +70,13 @@
                         <Grid.Resources>
                             <!-- New AppBar button style 40x40 pixels in size -->
                             <Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource DefaultAppBarButtonStyle}">
+                                <Setter Property="Height" Value="{ThemeResource MediaTransportControlsAppBarButtonHeight}" />
                                 <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
                                 <Setter Property="AllowFocusOnInteraction" Value="True" />
                             </Style>
                             <!-- New AppBarToggle button style 40x40 pixels in size -->
                             <Style x:Key="AppBarToggleButtonStyle" TargetType="AppBarToggleButton" BasedOn="{StaticResource DefaultAppBarToggleButtonStyle}">
+                                <Setter Property="Height" Value="{ThemeResource MediaTransportControlsAppBarButtonHeight}" />
                                 <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
                                 <Setter Property="AllowFocusOnInteraction" Value="True" />
                             </Style>
@@ -89,260 +100,6 @@
                                 <Setter Property="Padding" Value="0" />
                                 <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                             </Style>
-                            <Style x:Key="MediaControlAppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource DefaultAppBarButtonStyle}">
-                                <Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}" />
-                                <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
-                                <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}" />
-                                <Setter Property="HorizontalAlignment" Value="Left" />
-                                <Setter Property="VerticalAlignment" Value="Top" />
-                                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-                                <Setter Property="FontWeight" Value="Normal" />
-                                <Setter Property="Width" Value="{ThemeResource MediaTransportControlsAppBarButtonWidth}" />
-                                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"  />
-                                <Setter Property="AllowFocusOnInteraction" Value="False" />
-                                <Setter Property="Template">
-                                    <Setter.Value>
-                                        <ControlTemplate TargetType="AppBarButton">
-                                            <Grid x:Name="Root"
-                                                MinWidth="{TemplateBinding MinWidth}"
-                                                MaxWidth="{TemplateBinding MaxWidth}"
-                                                Background="{TemplateBinding Background}"
-                                                contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
-                                                Margin="1,0">
-                                                <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>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="LabelOnRight">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxMargin}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonTextLabelOnRightMargin}"/>
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="LabelCollapsed">
-                                                            <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
-                                                                </ObjectAnimationUsingKeyFrames>
-                                                            </Storyboard>
-                                                        </VisualState>
-                                                        <VisualState x:Name="Overflow">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="ContentRoot.MinHeight" Value="0"/>
-                                                                <Setter Target="ContentViewbox.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="TextLabel.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="OverflowTextLabel.Visibility" Value="Visible"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="OverflowWithToggleButtons">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="ContentRoot.MinHeight" Value="0"/>
-                                                                <Setter Target="ContentViewbox.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="TextLabel.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="OverflowTextLabel.Visibility" Value="Visible"/>
-                                                                <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="OverflowWithMenuIcons">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="ContentRoot.MinHeight" Value="0"/>
-                                                                <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left"/>
-                                                                <Setter Target="ContentViewbox.VerticalAlignment" Value="Center"/>
-                                                                <Setter Target="ContentViewbox.Width" Value="16"/>
-                                                                <Setter Target="ContentViewbox.Height" Value="16"/>
-                                                                <Setter Target="ContentViewbox.Margin" Value="12,0,12,0"/>
-                                                                <Setter Target="TextLabel.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="OverflowTextLabel.Visibility" Value="Visible"/>
-                                                                <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="OverflowWithToggleButtonsAndMenuIcons">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="ContentRoot.MinHeight" Value="0"/>
-                                                                <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left"/>
-                                                                <Setter Target="ContentViewbox.VerticalAlignment" Value="Center"/>
-                                                                <Setter Target="ContentViewbox.Width" Value="16"/>
-                                                                <Setter Target="ContentViewbox.Height" Value="16"/>
-                                                                <Setter Target="ContentViewbox.Margin" Value="38,0,12,0"/>
-                                                                <Setter Target="TextLabel.Visibility" Value="Collapsed"/>
-                                                                <Setter Target="OverflowTextLabel.Visibility" Value="Visible"/>
-                                                                <Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-                                                    <VisualStateGroup x:Name="CommonStates">
-                                                        <VisualState x:Name="Normal" />
-                                                        <VisualState x:Name="PointerOver">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}"/>
-                                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}"/>
-                                                                <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                                <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                                <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="Pressed">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}"/>
-                                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}"/>
-                                                                <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                                <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                                <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="Disabled">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}"/>
-                                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}"/>
-                                                                <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
-                                                                <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
-                                                                <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
-                                                                <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="OverflowNormal" />
-                                                        <VisualState x:Name="OverflowPointerOver">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}"/>
-                                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}"/>
-                                                                <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                                <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                                <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
-                                                                <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="OverflowPressed">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}"/>
-                                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}"/>
-                                                                <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                                <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                                <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
-                                                                <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-                                                    <VisualStateGroup x:Name="InputModeStates">
-                                                        <VisualState x:Name="InputModeDefault" />
-                                                        <VisualState x:Name="TouchInputMode">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                        <VisualState x:Name="GameControllerInputMode">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-                                                    <VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
-                                                        <VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
-                                                        <VisualState x:Name="KeyboardAcceleratorTextVisible">
-                                                            <VisualState.Setters>
-                                                                <Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
-                                                            </VisualState.Setters>
-                                                        </VisualState>
-                                                    </VisualStateGroup>
-
-                                                </VisualStateManager.VisualStateGroups>
-                                                <Grid x:Name="ContentRoot" Margin="-1,0">
-                                                    <Grid.ColumnDefinitions>
-                                                        <ColumnDefinition Width="*" />
-                                                        <ColumnDefinition Width="Auto" />
-                                                    </Grid.ColumnDefinitions>
-                                                    <Grid.RowDefinitions>
-                                                        <RowDefinition Height="Auto" />
-                                                        <RowDefinition Height="Auto" />
-                                                    </Grid.RowDefinitions>
-                                                    <Viewbox x:Name="ContentViewbox"
-                                                            Height="{ThemeResource AppBarButtonContentHeight}"
-                                                            Margin="12"
-                                                            HorizontalAlignment="Stretch"
-                                                            AutomationProperties.AccessibilityView="Raw" >
-                                                        <ContentPresenter x:Name="Content"
-                                                            Content="{TemplateBinding Icon}"
-                                                            Foreground="{TemplateBinding Foreground}"/>
-                                                    </Viewbox>
-                                                    <TextBlock x:Name="TextLabel"
-                                                            Grid.Row="1"
-                                                            Text="{TemplateBinding Label}"
-                                                            Foreground="{TemplateBinding Foreground}"
-                                                            FontSize="12"
-                                                            FontFamily="{TemplateBinding FontFamily}"
-                                                            TextAlignment="Center"
-                                                            TextWrapping="Wrap"
-                                                            Margin="{ThemeResource AppBarButtonTextLabelMargin}"
-                                                            AutomationProperties.AccessibilityView="Raw"
-                                                            Visibility="Collapsed"/>
-                                                    <TextBlock x:Name="OverflowTextLabel"
-                                                            Text="{TemplateBinding Label}"
-                                                            Foreground="{TemplateBinding Foreground}"
-                                                            FontSize="15"
-                                                            FontFamily="{TemplateBinding FontFamily}"
-                                                            TextAlignment="Left"
-                                                            TextTrimming="Clip"
-                                                            TextWrapping="NoWrap"
-                                                            HorizontalAlignment="Stretch"
-                                                            VerticalAlignment="Center"
-                                                            Margin="12,0,12,0"
-                                                            Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}"
-                                                            Visibility="Collapsed"
-                                                            AutomationProperties.AccessibilityView="Raw" />
-                                                    <TextBlock x:Name="KeyboardAcceleratorTextLabel"
-                                                            Grid.Column="1"
-                                                            Style="{ThemeResource CaptionTextBlockStyle}"
-                                                            Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
-                                                            MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
-                                                            Margin="24,0,12,0"
-                                                            Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
-                                                            HorizontalAlignment="Right"
-                                                            VerticalAlignment="Center"
-                                                            Visibility="Collapsed"
-                                                            AutomationProperties.AccessibilityView="Raw" />
-                                                    <Border
-                                                        x:Name="Border"
-                                                        BorderBrush="{TemplateBinding BorderBrush}"
-                                                        BorderThickness="{TemplateBinding BorderThickness}"
-                                                        contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
-                                                        Grid.RowSpan="2" Grid.ColumnSpan="2"
-                                                        Margin="1,0"/>
-                                                </Grid>
-                                            </Grid>
-                                        </ControlTemplate>
-                                    </Setter.Value>
-                                </Setter>
-                            </Style>
                         </Grid.Resources>
                         <VisualStateManager.VisualStateGroups>
                             <!-- ControlPanel Visibility states -->
@@ -524,7 +281,12 @@
                                             <RowDefinition />
                                             <RowDefinition Height="Auto" />
                                         </Grid.RowDefinitions>
-                                        <Slider x:Name="ProgressSlider" Margin ="7,3,7,0" MinWidth="80" Height="32" VerticalAlignment="Center" IsThumbToolTipEnabled="False" />
+                                        <Slider x:Name="ProgressSlider"
+                                                Margin ="7,3,7,0"
+                                                MinWidth="80"
+                                                Height="{ThemeResource MediaTransportControlsSliderHeight}"
+                                                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="7,0,7,2" Grid.Row="1" Height="16">
                                             <TextBlock x:Name="TimeElapsedElement" Style="{StaticResource CaptionTextBlockStyle}" Margin="0" Text="00:00" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
@@ -554,15 +316,26 @@
                                         <CommandBar.PrimaryCommands>
                                             <AppBarButton x:Name="VolumeMuteButton" Style="{StaticResource AppBarButtonStyle}" MediaTransportControlsHelper.DropoutOrder="19">
                                                 <AppBarButton.Flyout>
-                                                    <Flyout x:Name="VolumeFlyout" FlyoutPresenterStyle="{StaticResource FlyoutStyle}" contract8Present:ShouldConstrainToRootBounds="False">
-                                                        <StackPanel Orientation="Horizontal">
-                                                            <AppBarButton x:Name="AudioMuteButton" Style="{StaticResource MediaControlAppBarButtonStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12">
+                                                    <Flyout x:Name="VolumeFlyout" FlyoutPresenterStyle="{StaticResource FlyoutStyle}" contract8Present:ShouldConstrainToRootBounds="False" >
+                                                        <StackPanel Orientation="Horizontal" Padding="3,11">
+                                                            <AppBarButton x:Name="AudioMuteButton" Style="{StaticResource AppBarButtonStyle}" VerticalAlignment="Center" HorizontalAlignment="Center">
+                                                                <AppBarButton.Resources>
+                                                                    <Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,12</Thickness>
+                                                                    <Thickness x:Key="AppBarButtonInnerBorderMargin">5</Thickness>
+                                                                </AppBarButton.Resources>
                                                                 <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" />
+                                                            <Slider x:Name="VolumeSlider"
+                                                                    Value="50"
+                                                                    IsThumbToolTipEnabled="False"
+                                                                    
+                                                                    Width="{ThemeResource MediaTransportControlsSliderWidth}"
+                                                                    VerticalAlignment="Center"
+                                                                    HorizontalAlignment="Center"
+                                                                    Margin="12,0,8,0" />
+                                                            <TextBlock x:Name="VolumeValue" Style="{StaticResource MediaTextBlockStyle}" Text="{Binding ElementName=VolumeSlider,Path=Value}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Margin="16,0,8,0" />
                                                         </StackPanel>
                                                     </Flyout>
                                                 </AppBarButton.Flyout>

From 7fa279452f4f63e90e5512d7af4f6b40a3d33658 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Thu, 13 May 2021 11:25:26 -0700
Subject: [PATCH 08/10] visual tweaks

---
 .../MediaTransportControls_themeresources.xaml            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 9ec19397ba..b098e200b6 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -197,7 +197,7 @@
                                         <Setter Target="ControlPanelGrid.Height" Value="48" />
                                         <Setter Target="MediaControlsCommandBar.Margin" Value="0" />
                                         <Setter Target="PlayPauseButton.Visibility" Value="Collapsed" />
-                                        <Setter Target="ProgressSlider.Margin" Value="12,0,8,0" />
+                                        <Setter Target="ProgressSlider.Margin" Value="12,-1,8,1" />
                                         <Setter Target="ControlPanelGrid.Padding" Value="3" />
                                     </VisualState.Setters> 
                                 </VisualState>
@@ -282,7 +282,7 @@
                                             <RowDefinition Height="Auto" />
                                         </Grid.RowDefinitions>
                                         <Slider x:Name="ProgressSlider"
-                                                Margin ="7,3,7,0"
+                                                Margin ="7,2,7,1"
                                                 MinWidth="80"
                                                 Height="{ThemeResource MediaTransportControlsSliderHeight}"
                                                 VerticalAlignment="Center"
@@ -330,12 +330,12 @@
                                                             <Slider x:Name="VolumeSlider"
                                                                     Value="50"
                                                                     IsThumbToolTipEnabled="False"
-                                                                    
+                                                                    Height="{ThemeResource MediaTransportControlsSliderHeight}"
                                                                     Width="{ThemeResource MediaTransportControlsSliderWidth}"
                                                                     VerticalAlignment="Center"
                                                                     HorizontalAlignment="Center"
                                                                     Margin="12,0,8,0" />
-                                                            <TextBlock x:Name="VolumeValue" Style="{StaticResource MediaTextBlockStyle}" Text="{Binding ElementName=VolumeSlider,Path=Value}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Margin="16,0,8,0" />
+                                                            <TextBlock x:Name="VolumeValue" Style="{StaticResource MediaTextBlockStyle}" Text="{Binding ElementName=VolumeSlider,Path=Value}" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Right" Width="24" Margin="8,0,16,0" />
                                                         </StackPanel>
                                                     </Flyout>
                                                 </AppBarButton.Flyout>

From c532408c74a8f7111c64e6b661c7c5b9a7d95784 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Fri, 14 May 2021 11:38:23 -0700
Subject: [PATCH 09/10] add legacy styles in resources

---
 dev/CommonStyles/MediaTransportControls_themeresources.xaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index b098e200b6..71c2c081e0 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -100,6 +100,9 @@
                                 <Setter Property="Padding" Value="0" />
                                 <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                             </Style>
+                            
+                            <Style x:Key="MediaSliderStyle" TargetType="Slider" BasedOn="{StaticResource DefaultSliderStyle}" />
+                            <Style x:Key="MediaControlAppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource DefaultAppBarButtonStyle}" />
                         </Grid.Resources>
                         <VisualStateManager.VisualStateGroups>
                             <!-- ControlPanel Visibility states -->

From 5e8c602a5b50308502cb5fe29c3fbe8f27c68454 Mon Sep 17 00:00:00 2001
From: Karen Lai <biilai@microsoft.com>
Date: Mon, 17 May 2021 10:49:22 -0700
Subject: [PATCH 10/10] changes from comments

---
 .../MediaTransportControls_themeresources.xaml            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/dev/CommonStyles/MediaTransportControls_themeresources.xaml b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
index 71c2c081e0..d27fc763e3 100644
--- a/dev/CommonStyles/MediaTransportControls_themeresources.xaml
+++ b/dev/CommonStyles/MediaTransportControls_themeresources.xaml
@@ -15,6 +15,8 @@
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="TextFillColorPrimaryBrush" />
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderMargin">7,2,7,1</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderCompactMargin">12,-1,8,1</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
@@ -30,6 +32,8 @@
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="SystemControlForegroundBaseHighBrush" />
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderMargin">7,2,7,1</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderCompactMargin">12,-1,8,1</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
@@ -45,6 +49,8 @@
             <StaticResource x:Key="MediaTransportControlsFillMediaText" ResourceKey="TextFillColorPrimaryBrush" />
             <StaticResource x:Key="MediaTransportControlsBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MediaTransportControlsMargin">12</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderMargin">7,2,7,1</Thickness>
+            <Thickness x:Key="MediaTransportControlsProgressSliderCompactMargin">12,-1,8,1</Thickness>
             <x:Double x:Key="MediaTransportControlsBorderThickness">1</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonHeight">40</x:Double>
             <x:Double x:Key="MediaTransportControlsAppBarButtonWidth">40</x:Double>
@@ -200,7 +206,7 @@
                                         <Setter Target="ControlPanelGrid.Height" Value="48" />
                                         <Setter Target="MediaControlsCommandBar.Margin" Value="0" />
                                         <Setter Target="PlayPauseButton.Visibility" Value="Collapsed" />
-                                        <Setter Target="ProgressSlider.Margin" Value="12,-1,8,1" />
+                                        <Setter Target="ProgressSlider.Margin" Value="{ThemeResource MediaTransportControlsProgressSliderCompactMargin}" />
                                         <Setter Target="ControlPanelGrid.Padding" Value="3" />
                                     </VisualState.Setters> 
                                 </VisualState>