Update AppBarButton flyout glyph (#5170)

* Update AppBarButton flyout glyph. * Moved into theme dictionaries
microsoft · Jun 22, 2021 · 779c980 · 779c980
1 parent 574e5ed
commit 779c980
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/dev/CommonStyles/AppBarButton_themeresources.xaml b/dev/CommonStyles/AppBarButton_themeresources.xaml
@@ -34,6 +34,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundSubMenuOpened" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
+            <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
             <StaticResource x:Key="AppBarButtonBackground" ResourceKey="SystemControlTransparentBrush" />
@@ -62,6 +63,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundSubMenuOpened" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
+            <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <StaticResource x:Key="AppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
@@ -90,6 +92,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundSubMenuOpened" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
+            <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -174,6 +177,9 @@
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarButtonTextLabelOnRightMargin}" />
                                         </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubItemChevron" Storyboard.TargetProperty="Margin">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="-7,20,12,0" />
+                                        </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="LabelCollapsed">
@@ -413,12 +419,13 @@
                                 AutomationProperties.AccessibilityView="Raw" />
                             <FontIcon x:Name="SubItemChevron"
                                 Grid.Column="2"
-                                Glyph="&#xE0E3;"
+                                Glyph="{ThemeResource AppBarButtonFlyoutGlyph}"
                                 FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                FontSize="12"
+                                FontSize="8"
                                 AutomationProperties.AccessibilityView="Raw"
                                 Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
-                                Margin="12,0,12,0"
+                                VerticalAlignment="Top"
+                                Margin="-23,20,12,0"
                                 MirroredWhenRightToLeft="True"
                                 Visibility="Collapsed"/>
 

diff --git a/dev/CommonStyles/TestUI/CommandBarPage.xaml b/dev/CommonStyles/TestUI/CommandBarPage.xaml
@@ -71,27 +71,31 @@
                 <AppBarButton Icon="Remove" Label="Remove"/>
                 <AppBarSeparator/>
                 <AppBarButton Icon="Save" Label="Save"/>
-                <AppBarToggleButton Icon="Add" Label="Toggle"/>
+                <AppBarToggleButton Icon="Keyboard" Label="Toggle"/>
                 <contract7Present:AppBarElementContainer>
                     <controls:SplitButton>
-                        <Grid Margin="0,1,0,0">
+                        <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition Width="Auto"/>
                             </Grid.ColumnDefinitions>
-                            <SymbolIcon Symbol="Keyboard" Margin="0,0,8,0"/>
+                            <Viewbox Height="16" Margin="0,0,8,0">
+                                <SymbolIcon Symbol="Keyboard"/>
+                            </Viewbox>
                             <TextBlock Grid.Column="1" Text="Split"/>
                         </Grid>
                     </controls:SplitButton>
                 </contract7Present:AppBarElementContainer>
                 <contract7Present:AppBarElementContainer>
                     <controls:ToggleSplitButton>
-                        <Grid Margin="0,1,0,0">
+                        <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition Width="Auto"/>
                             </Grid.ColumnDefinitions>
-                            <SymbolIcon Symbol="Shuffle" Margin="0,0,8,0"/>
+                            <Viewbox Height="16" Margin="0,0,8,0">
+                                <SymbolIcon Symbol="Shuffle"/>
+                            </Viewbox>
                             <TextBlock Grid.Column="1" Text="Toggle"/>
                         </Grid>
                     </controls:ToggleSplitButton>
@@ -167,10 +171,10 @@
                         <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
                     </AppBarButton.Resources>
                     <AppBarButton.Flyout>
-                        <contract7Present:CommandBarFlyout Placement="Right">
-                            <AppBarButton  Icon="Play" />
-                            <AppBarButton  Icon="People" />
-                        </contract7Present:CommandBarFlyout>
+                        <controls:CommandBarFlyout Placement="Right">
+                            <AppBarButton Icon="Play" />
+                            <AppBarButton Icon="People" />
+                        </controls:CommandBarFlyout>
                     </AppBarButton.Flyout>
                 </AppBarButton>
                 <AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
@@ -184,6 +188,29 @@
                     <AppBarToggleButton Icon="Add" Label="Toggle"/>
                 </CommandBar.SecondaryCommands>
             </CommandBar>
+
+            <TextBlock Text="AppBarButton with flyout with visibility override and glyph override"/>
+            <CommandBar HorizontalAlignment="Left" DefaultLabelPosition="Right">
+                <CommandBar.Resources>
+                    <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE972;</x:String>
+                </CommandBar.Resources>
+                <AppBarButton Icon="Add" Label="Add">
+                    <AppBarButton.Resources>
+                        <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
+                    </AppBarButton.Resources>
+                    <AppBarButton.Flyout>
+                        <MenuFlyout Placement="Bottom">
+                            <MenuFlyoutItem Text="Item 1"/>
+                            <MenuFlyoutItem Text="Item 2"/>
+                            <MenuFlyoutItem Text="Item 3"/>
+                        </MenuFlyout>
+                    </AppBarButton.Flyout>
+                </AppBarButton>
+                <AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
+                <AppBarSeparator/>
+                <AppBarButton Icon="Save" Label="Save"/>
+                <AppBarToggleButton Icon="Add" Label="Toggle"/>
+            </CommandBar>
         </StackPanel>
 
     </Grid>

diff --git a/dev/SplitButton/SplitButton_themeresources.xaml b/dev/SplitButton/SplitButton_themeresources.xaml
@@ -126,7 +126,7 @@
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="FocusVisualMargin" Value="-3" />
         <Setter Property="IsTabStop" Value="True"/>
-        <Setter Property="Padding" Value="12,7,4,9"/>
+        <Setter Property="Padding" Value="12,8,4,8"/>
         <Setter Property="Height" Value="{ThemeResource AppBarThemeCompactHeight}" />
         <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
         <Setter Property="Template">
@@ -382,9 +382,9 @@
                                 <TextBlock
                                     FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                     FontSize="8"
-                                    Text="&#xE96E;"
+                                    Text="&#xE972;"
                                     VerticalAlignment="Center"
-                                    Padding="2,2,2,0"
+                                    Padding="2,1,2,0"
                                     HorizontalAlignment="Left"
                                     IsTextScaleFactorEnabled="False"
                                     AutomationProperties.AccessibilityView="Raw"/>