From 1f4391a166eb3cab35fc54b5c7bcd3f4b854236a Mon Sep 17 00:00:00 2001
From: Luke Longley <18177025+llongley@users.noreply.github.com>
Date: Wed, 3 Nov 2021 12:10:18 -0700
Subject: [PATCH] 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.
---
.../APITests/CommonStylesTests.cs | 63 +++++++++++++++++++
.../AppBarButton_themeresources.xaml | 7 ++-
2 files changed, 68 insertions(+), 2 deletions(-)
diff --git a/dev/CommonStyles/APITests/CommonStylesTests.cs b/dev/CommonStyles/APITests/CommonStylesTests.cs
index 9ac2f6d56d..d0b9caa6d6 100644
--- 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(
+ @"
+
+ Collapsed
+
+ 12
+
+
+
+ ");
+
+ 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 $@"
<{controlName} />
";
}
+
+ 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
index 0bdc2f1a1d..2319773f36 100644
--- a/dev/CommonStyles/AppBarButton_themeresources.xaml
+++ b/dev/CommonStyles/AppBarButton_themeresources.xaml
@@ -35,6 +35,7 @@
Visible
+ 8
@@ -64,6 +65,7 @@
Visible
+ 8
@@ -93,6 +95,7 @@
Visible
+ 8
@@ -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"