fix: Use SymbolThemeFontFamily instead of hard-coded Segoe MDL2 Assets

unoplatform · Sep 1, 2021 · 9dae693 · 9dae693
1 parent 63e9cde
commit 9dae693
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 23 deletions.
diff --git a/src/Uno.UI.FluentTheme/Resources/.editorconfig b/src/Uno.UI.FluentTheme/Resources/.editorconfig
@@ -0,0 +1,9 @@
+# Overrides our root .editorconfig to match https://github.com/microsoft/microsoft-ui-xaml/blob/fd22d7ff96871f58fec5d9b284eba02fe762c60e/.editorconfig#L120-L126
+
+[**.{xaml,xml}]
+indent_style = space
+indent_size = 4
+charset = utf-8-bom
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = crlf
diff --git a/src/Uno.UI.FluentTheme/Resources/Priority02/MenuFlyout_themeresources.xaml b/src/Uno.UI.FluentTheme/Resources/Priority02/MenuFlyout_themeresources.xaml
@@ -639,21 +639,21 @@
                             Grid.Column="0"
                             HorizontalAlignment="Left"
                             Margin="0">
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8C1;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE8C1;" />
                         </Button>
                         <Button x:Name="LanguageSwitcherSettingsPenAndInkSettingsButton"
                             Background="{ThemeResource MenuFlyoutItemBackground}"
                             Grid.Column="1"
                             HorizontalAlignment="Center"
                             Margin="0">
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE713;" />
                         </Button>
                         <Button x:Name="LanguageSwitcherSettingsHelpButton"
                             Background="{ThemeResource MenuFlyoutItemBackground}"
                             Grid.Column="2"
                             HorizontalAlignment="Right"
                             Margin="0">
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE9CE;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE9CE;" />
                         </Button>
                     </Grid>
                  </ControlTemplate>

diff --git a/src/Uno.UI.FluentTheme/Resources/Priority06/RevealBrush_themeresources.xaml b/src/Uno.UI.FluentTheme/Resources/Priority06/RevealBrush_themeresources.xaml
@@ -2615,7 +2615,7 @@
                 <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
-              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" AutomationProperties.AccessibilityView="Raw" />
+              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" AutomationProperties.AccessibilityView="Raw" />
             </Grid>
           </Grid>
         </ControlTemplate>
@@ -2844,7 +2844,7 @@
             <Button x:Name="PrimaryButton" Grid.Column="0" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Command="{TemplateBinding Command}" CommandParameter="{TemplateBinding CommandParameter}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" IsTabStop="False" AutomationProperties.AccessibilityView="Raw" />
             <Button x:Name="SecondaryButton" Grid.Column="2" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,9,0" IsTabStop="False" AutomationProperties.AccessibilityView="Raw">
               <Button.Content>
-                <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" AutomationProperties.AccessibilityView="Raw" />
+                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" AutomationProperties.AccessibilityView="Raw" />
               </Button.Content>
             </Button>
           </Grid>

diff --git a/src/Uno.UI.FluentTheme/Resources/PriorityDefault/DropDownButton.xaml b/src/Uno.UI.FluentTheme/Resources/PriorityDefault/DropDownButton.xaml
@@ -107,7 +107,7 @@
                             <TextBlock
                                 x:Name="ChevronTextBlock"
                                 Grid.Column="1"
-                                FontFamily="Segoe MDL2 Assets"
+                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                 FontSize="12"
                                 Text="&#xE70D;"
                                 VerticalAlignment="Center"

diff --git a/src/Uno.UI.FluentTheme/Resources/PriorityDefault/RatingControl.xaml b/src/Uno.UI.FluentTheme/Resources/PriorityDefault/RatingControl.xaml
@@ -9,7 +9,7 @@
         <!-- 9794813: retire these two properties as customisation points once all resource keys available -->
         <Setter Property="Foreground" Value="{ThemeResource RatingControlCaptionForeground}"/>
         <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
-        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
         <Setter Property="ItemInfo" Value="{ThemeResource MUX_RatingControlDefaultFontInfo}"/>
         <!-- IsFocusEngagementEnabled means the control has to be "engaged" with 
              using the A button before it actually receives key input from gamepad. -->

diff --git a/src/Uno.UI.FluentTheme/Resources/PriorityDefault/RatingControl_themeresources.xaml b/src/Uno.UI.FluentTheme/Resources/PriorityDefault/RatingControl_themeresources.xaml
@@ -49,7 +49,7 @@
             FontSize="32"
             Text="&#xE734;"
             AutomationProperties.AccessibilityView="Raw"
-            FontFamily="Segoe MDL2 Assets"/>
+            FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
     </DataTemplate>
 
     <DataTemplate x:Key="ForegroundGlyphDefaultTemplate">
@@ -58,7 +58,7 @@
             FontSize="32"
             Text="&#xE735;"
             AutomationProperties.AccessibilityView="Raw"
-            FontFamily="Segoe MDL2 Assets"/>
+            FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
     </DataTemplate>
 
     <DataTemplate x:Key="BackgroundImageDefaultTemplate">

diff --git a/src/Uno.UI.FluentTheme/Resources/PriorityDefault/SplitButton.xaml b/src/Uno.UI.FluentTheme/Resources/PriorityDefault/SplitButton.xaml
@@ -195,7 +195,7 @@
             <Button x:Name="PrimaryButton" Grid.Column="0" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Command="{TemplateBinding Command}" CommandParameter="{TemplateBinding CommandParameter}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" IsTabStop="False" AutomationProperties.AccessibilityView="Raw" />
             <Button x:Name="SecondaryButton" Grid.Column="2" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,9,0" IsTabStop="False" AutomationProperties.AccessibilityView="Raw">
               <Button.Content>
-                <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
+                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
               </Button.Content>
             </Button>
           </Grid>

diff --git a/src/Uno.UI.FluentTheme/themeresources.xaml b/src/Uno.UI.FluentTheme/themeresources.xaml
@@ -5320,13 +5320,13 @@
               <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
             <Button x:Name="LanguageSwitcherSettingsLanguageSettingsButton" Background="{ThemeResource MenuFlyoutItemBackground}" Grid.Column="0" HorizontalAlignment="Left" Margin="0">
-              <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8C1;" />
+              <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE8C1;" />
             </Button>
             <Button x:Name="LanguageSwitcherSettingsPenAndInkSettingsButton" Background="{ThemeResource MenuFlyoutItemBackground}" Grid.Column="1" HorizontalAlignment="Center" Margin="0">
-              <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;" />
+              <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE713;" />
             </Button>
             <Button x:Name="LanguageSwitcherSettingsHelpButton" Background="{ThemeResource MenuFlyoutItemBackground}" Grid.Column="2" HorizontalAlignment="Right" Margin="0">
-              <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE9CE;" />
+              <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE9CE;" />
             </Button>
           </Grid>
         </ControlTemplate>
@@ -8493,7 +8493,7 @@
                 <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
-              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" AutomationProperties.AccessibilityView="Raw" />
+              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" AutomationProperties.AccessibilityView="Raw" />
             </Grid>
           </Grid>
         </ControlTemplate>
@@ -8722,7 +8722,7 @@
             <Button x:Name="PrimaryButton" Grid.Column="0" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Command="{TemplateBinding Command}" CommandParameter="{TemplateBinding CommandParameter}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" IsTabStop="False" AutomationProperties.AccessibilityView="Raw" />
             <Button x:Name="SecondaryButton" Grid.Column="2" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,9,0" IsTabStop="False" AutomationProperties.AccessibilityView="Raw">
               <Button.Content>
-                <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" AutomationProperties.AccessibilityView="Raw" />
+                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" AutomationProperties.AccessibilityView="Raw" />
               </Button.Content>
             </Button>
           </Grid>
@@ -14896,7 +14896,7 @@
               </Grid.ColumnDefinitions>
               <!-- Uno workaround: template-bind ContentTemplateSelector because it's not automatically propagated from the ContentControl -->
               <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
-              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
+              <TextBlock x:Name="ChevronTextBlock" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" Margin="6,0,0,0" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
             </Grid>
           </Grid>
         </ControlTemplate>
@@ -19388,7 +19388,7 @@
     <!-- 9794813: retire these two properties as customisation points once all resource keys available -->
     <Setter Property="Foreground" Value="{ThemeResource RatingControlCaptionForeground}" />
     <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
+    <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
     <Setter Property="ItemInfo" Value="{ThemeResource MUX_RatingControlDefaultFontInfo}" />
     <!-- IsFocusEngagementEnabled means the control has to be "engaged" with 
              using the A button before it actually receives key input from gamepad. -->
@@ -19459,11 +19459,11 @@
   </Style>
   <DataTemplate x:Key="BackgroundGlyphDefaultTemplate">
     <!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
-    <TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="32" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="Segoe MDL2 Assets" />
+    <TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="32" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
   </DataTemplate>
   <DataTemplate x:Key="ForegroundGlyphDefaultTemplate">
     <!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
-    <TextBlock Margin="-8,-8,0,0" FontSize="32" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="Segoe MDL2 Assets" />
+    <TextBlock Margin="-8,-8,0,0" FontSize="32" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
   </DataTemplate>
   <DataTemplate x:Key="BackgroundImageDefaultTemplate">
     <Image Margin="-8,-8,0,0" AutomationProperties.AccessibilityView="Raw" />
@@ -20521,7 +20521,7 @@
             <Button x:Name="PrimaryButton" Grid.Column="0" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Command="{TemplateBinding Command}" CommandParameter="{TemplateBinding CommandParameter}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" IsTabStop="False" AutomationProperties.AccessibilityView="Raw" />
             <Button x:Name="SecondaryButton" Grid.Column="2" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,9,0" IsTabStop="False" AutomationProperties.AccessibilityView="Raw">
               <Button.Content>
-                <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
+                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12" Text="&#xE70D;" VerticalAlignment="Center" HorizontalAlignment="Right" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
               </Button.Content>
             </Button>
           </Grid>

diff --git a/src/Uno.UI.RuntimeTests/MUX/Microsoft_UI_Xaml_Controls/SplitButton/SplitButtonTests.cs b/src/Uno.UI.RuntimeTests/MUX/Microsoft_UI_Xaml_Controls/SplitButton/SplitButtonTests.cs
@@ -24,6 +24,9 @@
 
 using SplitButton = Microsoft.UI.Xaml.Controls.SplitButton;
 using ToggleSplitButton = Microsoft.UI.Xaml.Controls.ToggleSplitButton;
+using Uno.UI.RuntimeTests.Helpers;
+using Windows.UI.Xaml.Media;
+using Private.Infrastructure;
 
 namespace Windows.UI.Xaml.Tests.MUXControls.ApiTests
 {
@@ -82,6 +85,25 @@ public void VerifyIsCheckedProperty()
 				Verify.IsTrue(isChecked, "ToggleSplitButton is not checked");
 			});
 		}
+
+		[TestMethod]
+		[Description("Verifies that the TextBlock representing the Chevron glyph uses the correct font")]
+		public void VerifyFontFamilyForChevron()
+		{
+			SplitButton splitButton = null;
+			using (StyleHelper.UseFluentStyles())
+			{
+				RunOnUIThread.Execute(() =>
+				{
+					splitButton = new SplitButton();
+					TestServices.WindowHelper.WindowContent = splitButton;
+
+					var secondayButton = splitButton.GetTemplateChild("SecondaryButton");
+					var font = ((secondayButton as Button).Content as TextBlock).FontFamily;
+					Verify.AreEqual((FontFamily)Application.Current.Resources["SymbolThemeFontFamily"], font);
+				});
+			}
+		}
 	}
 
 	// CanExecuteChanged is never used -- that's ok, disable the compiler warning.

diff --git a/...I.RuntimeTests/MUX/Microsoft_UI_Xaml_Controls/ToggleSplitButton/ToggleSplitButtonTests.cs b/...I.RuntimeTests/MUX/Microsoft_UI_Xaml_Controls/ToggleSplitButton/ToggleSplitButtonTests.cs
@@ -0,0 +1,33 @@
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Uno.UI.RuntimeTests.Helpers;
+using MUXControlsTestApp.Utilities;
+using Private.Infrastructure;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+using Common;
+
+namespace Windows.UI.Xaml.Tests.MUXControls.ApiTests
+{
+	[TestClass]
+	public class ToggleSplitButtonTests
+	{
+		[TestMethod]
+		[Description("Verifies that the TextBlock representing the Chevron glyph uses the correct font")]
+		public void VerifyFontFamilyForChevron()
+		{
+			Microsoft.UI.Xaml.Controls.ToggleSplitButton toggleSplitButton = null;
+			using (StyleHelper.UseFluentStyles())
+			{
+				RunOnUIThread.Execute(() =>
+				{
+					toggleSplitButton = new Microsoft.UI.Xaml.Controls.ToggleSplitButton();
+					TestServices.WindowHelper.WindowContent = toggleSplitButton;
+
+					var secondayButton = toggleSplitButton.GetTemplateChild("SecondaryButton");
+					var font = ((secondayButton as Button).Content as TextBlock).FontFamily;
+					Verify.AreEqual((FontFamily)Application.Current.Resources["SymbolThemeFontFamily"], font);
+				});
+			}
+		}
+	}
+}