Adding more lightweight styling to AppBarButton

There are two additional elements in AppBarButton's chevron glyph that people would like to be able to change through lightweight styling: the font size, and the foreground color. We actually already had a lightweight style for the foreground color, but mistakenly didn't use it in the Foreground property of the FontIcon. I fixed that and added a resource for font size, and added a test to verify that changes to these resources propagates properly.
microsoft · Nov 3, 2021 · 1f4391a · 1f4391a
1 parent d65c7c1
commit 1f4391a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/dev/CommonStyles/APITests/CommonStylesTests.cs b/dev/CommonStyles/APITests/CommonStylesTests.cs
@@ -434,12 +434,75 @@ public void VerifyVisualTreeForCommandBarOverflowMenu()
             VisualTreeTestHelper.VerifyVisualTree(root: overflowContent, verificationFileNamePrefix: "CommandBarOverflowMenu", filter: visualTreeDumperFilter);
         }
 
+        [TestMethod]
+        public void VerifyAppBarButtonLightweightStyling()
+        {
+            StackPanel root = null;
+            AppBarButton appBarButton = null;
+            ManualResetEvent appBarButtonLoadedEvent = new(false);
+
+            RunOnUIThread.Execute(() =>
+            {
+                root = (StackPanel)XamlReader.Load(
+                    @"<StackPanel xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
+                        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'> 
+                            <StackPanel.Resources>
+                                <Visibility x:Key='AppBarButtonHasFlyoutChevronVisibility'>Collapsed</Visibility>
+                                <x:String x:Key='AppBarButtonFlyoutGlyph'>&#xE972;</x:String>
+                                <x:Double x:Key='AppBarButtonFlyoutFontSize'>12</x:Double>
+                                <SolidColorBrush x:Key='AppBarButtonSubItemChevronForeground' Color='Red' />
+                            </StackPanel.Resources>
+                            <AppBarButton x:Name='TestAppBarButton'/>
+                      </StackPanel>");
+
+                appBarButton = (AppBarButton)root.FindName("TestAppBarButton");
+                appBarButton.Loaded += (sender, args) => { appBarButtonLoadedEvent.Set(); };
+                Content = root;
+                Content.UpdateLayout();
+            });
+
+            appBarButtonLoadedEvent.WaitOne();
+            IdleSynchronizer.Wait();
+
+            RunOnUIThread.Execute(() =>
+            {
+                FontIcon subItemChevron = (FontIcon)GetVisualChildByName(appBarButton, "SubItemChevron");
+
+                Verify.AreEqual((Visibility)root.Resources["AppBarButtonHasFlyoutChevronVisibility"], subItemChevron.Visibility);
+                Verify.AreEqual((string)root.Resources["AppBarButtonFlyoutGlyph"], subItemChevron.Glyph);
+                Verify.AreEqual((double)root.Resources["AppBarButtonFlyoutFontSize"], subItemChevron.FontSize);
+                Verify.AreEqual(((SolidColorBrush)root.Resources["AppBarButtonSubItemChevronForeground"]).Color, ((SolidColorBrush)subItemChevron.Foreground).Color);
+            });
+        }
+
         private string XamlStringForControl(string controlName)
         {
             return $@"<Grid Width='400' Height='400' xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'> 
                           <{controlName} />
                    </Grid>";
         }
+
+        private FrameworkElement GetVisualChildByName(DependencyObject root, string name)
+        {
+            if (root is FrameworkElement element && element.Name == name)
+            {
+                return element;
+            }
+
+            int childCount = VisualTreeHelper.GetChildrenCount(root);
+
+            for (int i = 0; i < childCount; i++)
+            {
+                FrameworkElement visualChild = GetVisualChildByName(VisualTreeHelper.GetChild(root, i), name);
+
+                if (visualChild != null)
+                {
+                    return visualChild;
+                }
+            }
+
+            return null;
+        }
     }
 
     class ControlVisualTreeTestFilter : VisualTreeDumper.DefaultFilter

diff --git a/dev/CommonStyles/AppBarButton_themeresources.xaml b/dev/CommonStyles/AppBarButton_themeresources.xaml
@@ -35,6 +35,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
             <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
+            <x:Double x:Key="AppBarButtonFlyoutFontSize">8</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
             <StaticResource x:Key="AppBarButtonBackground" ResourceKey="SystemControlTransparentBrush" />
@@ -64,6 +65,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
             <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
+            <x:Double x:Key="AppBarButtonFlyoutFontSize">8</x:Double>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <StaticResource x:Key="AppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
@@ -93,6 +95,7 @@
             <StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
             <x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
+            <x:Double x:Key="AppBarButtonFlyoutFontSize">8</x:Double>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -421,9 +424,9 @@
                                 Grid.Column="2"
                                 Glyph="{ThemeResource AppBarButtonFlyoutGlyph}"
                                 FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                FontSize="8"
+                                FontSize="{ThemeResource AppBarButtonFlyoutFontSize}"
                                 AutomationProperties.AccessibilityView="Raw"
-                                Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
+                                Foreground="{ThemeResource AppBarButtonSubItemChevronForeground}"
                                 VerticalAlignment="Top"
                                 Margin="-23,20,12,0"
                                 MirroredWhenRightToLeft="True"