Update PersonPicture themeresources (#4953)

* init * update background * Update stroke thickness * Update test * Update master file for PersonPicture
microsoft · May 6, 2021 · ea823c0 · ea823c0
1 parent ca46c90
commit ea823c0
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 28 deletions.
diff --git a/dev/PersonPicture/APITests/PersonPictureTests.cs b/dev/PersonPicture/APITests/PersonPictureTests.cs
@@ -190,5 +190,18 @@ public void VerifyVSMStatesForPhotosAndInitials()
                 Verify.AreEqual(initialsTextBlock.Text, "\xE716");
             });
         }
+
+        [TestMethod]
+        public void VerifyPersonPictureVisualTree()
+        {
+            PersonPicture personPicture = null;
+            RunOnUIThread.Execute(() =>
+            {
+                personPicture = new PersonPicture { Initials="LC", Width=100, Height=100 };
+            });
+            TestUtilities.SetAsVisualTreeRoot(personPicture);
+
+            VisualTreeTestHelper.VerifyVisualTree(root: personPicture, verificationFileNamePrefix: "PersonPicture");
+        }
     }
 }
diff --git a/dev/PersonPicture/PersonPicture.xaml b/dev/PersonPicture/PersonPicture.xaml
@@ -8,10 +8,10 @@
 
     <Style x:Key="DefaultPersonPictureStyle" TargetType="local:PersonPicture">
         <Setter Property="Foreground" Value="{ThemeResource PersonPictureForegroundThemeBrush}" />
-        <Setter Property="Width" Value="100" />
-        <Setter Property="Height" Value="100" />
+        <Setter Property="Width" Value="96" />
+        <Setter Property="Height" Value="96" />
         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="SemiLight" />
+        <Setter Property="FontWeight" Value="SemiBold" />
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
         <Setter Property="Template">
@@ -67,15 +67,15 @@
 
                         <Ellipse
                             Fill="{ThemeResource PersonPictureEllipseFillThemeBrush}"
-                            Stroke="{ThemeResource SystemColorButtonTextColor}"
+                            Stroke="{ThemeResource PersonPictureEllipseFillStrokeBrush}"
                             StrokeThickness="{ThemeResource PersonPictureEllipseStrokeThickness}"
                             Width="{TemplateBinding Width}"
                             Height="{TemplateBinding Height}" />
 
                         <TextBlock
                             x:Name="InitialsTextBlock"
                             AutomationProperties.AccessibilityView="Raw"
-                            FontSize="36"
+                            FontSize="40"
                             FontFamily="{TemplateBinding FontFamily}"
                             Foreground="{TemplateBinding Foreground}"
                             FontWeight="{TemplateBinding FontWeight}"

diff --git a/dev/PersonPicture/PersonPicture_themeresources.xaml b/dev/PersonPicture/PersonPicture_themeresources.xaml
@@ -6,35 +6,38 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{StaticResource SystemAltHighColor}"/>
+            <StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="TextFillColorPrimaryBrush" />
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{StaticResource SystemBaseHighColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{StaticResource SystemChromeDisabledHighColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{StaticResource SystemListMediumColor}"/>
-            <SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{StaticResource SystemBaseMediumColor}"/>
+            <StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="ControlAltFillColorQuarternary" />
+            <StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
             <x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">0.8</x:Double>
             <x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
-            <x:Double x:Key="PersonPictureEllipseStrokeThickness">0</x:Double>
+            <x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>
             <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">2</x:Double>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
-            <SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{StaticResource SystemAltHighColor}"/>
+            <StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="TextFillColorPrimaryBrush" />
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{StaticResource SystemBaseHighColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{StaticResource SystemChromeDisabledHighColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{StaticResource SystemListMediumColor}"/>
-            <SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{StaticResource SystemBaseMediumColor}"/>
+            <StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="ControlAltFillColorQuarternary" />
+            <StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
             <x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">0.8</x:Double>
             <x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
-            <x:Double x:Key="PersonPictureEllipseStrokeThickness">0</x:Double>
+            <x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>
             <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">2</x:Double>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
-            <SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
+            <StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
             <SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
-            <SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+            <StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="SystemColorHighlightTextColorBrush" />
+            <StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
             <x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">1.0</x:Double>
             <x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
             <x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>

diff --git a/test/MUXControlsTestApp/ThemeResourcesTests.cs b/test/MUXControlsTestApp/ThemeResourcesTests.cs
@@ -31,7 +31,6 @@
 #endif
 
 using RatingControl = Microsoft.UI.Xaml.Controls.RatingControl;
-using PersonPicture = Microsoft.UI.Xaml.Controls.PersonPicture;
 
 namespace Windows.UI.Xaml.Tests.MUXControls.ApiTests
 {
@@ -50,7 +49,6 @@ public static void Setup(TestContext context) { }
         public void VerifyOverrides()
         {
             RatingControl ratingControl = null;
-            PersonPicture personPicture = null;
             Slider slider = null;
             Grid root = null;
 
@@ -60,13 +58,7 @@ public void VerifyOverrides()
                 // 1) Override WinUI defined brush in App.Resources.
                 appResources["RatingControlCaptionForeground"] = new SolidColorBrush(Colors.Orange);
 
-                // 2) Override system brush used by WinUI ThemeResource.
-
-                ((ResourceDictionary)appResources.ThemeDictionaries["Light"])["SystemAltHighColor"] = Colors.Green;
-                ((ResourceDictionary)appResources.ThemeDictionaries["Default"])["SystemAltHighColor"] = Colors.Green;
-                ((ResourceDictionary)appResources.ThemeDictionaries["HighContrast"])["SystemColorButtonTextColor"] = Colors.Green;
-
-                // 3) Override brush name used by a system control
+                // 2) Override brush name used by a system control
                 appResources["SliderTrackValueFill"] = new SolidColorBrush(Colors.Purple);
 
                 root = new Grid {
@@ -77,7 +69,6 @@ public void VerifyOverrides()
                 panel.Children.Add(slider = new Slider());
 
                 panel.Children.Add(ratingControl = new RatingControl() { Value = 2 });
-                panel.Children.Add(personPicture = new PersonPicture());
 
                 root.Children.Add(panel);
                 // Add an element over top to prevent stray mouse input from interfering.
@@ -99,11 +90,7 @@ public void VerifyOverrides()
                 Verify.AreEqual(Colors.Orange, ((SolidColorBrush)ratingControl.Foreground).Color,
                     "Verify RatingControlCaptionForeground override in Application.Resources gets picked up by WinUI control");
 
-                // 2) Verify that overriding a system color used by a WinUI control works.
-                Verify.AreEqual(Colors.Green, ((SolidColorBrush)personPicture.Foreground).Color,
-                    "Verify PersonPictureForegroundThemeBrush (which uses SystemAltHighColor) overridden in Application.Resources gets picked up by WinUI control");
-
-                // 3) Verify that overriding a system brush used by a system control works.
+                // 2) Verify that overriding a system brush used by a system control works.
                 if (PlatformConfiguration.IsOsVersionGreaterThan(OSVersion.Redstone1))
                 {
                     // Below code is comment because of bug 19180323 and we expect the code to be enabled again after test case is moved to nuget testapp

diff --git a/test/MUXControlsTestApp/verification/PersonPicture-7.xml b/test/MUXControlsTestApp/verification/PersonPicture-7.xml
@@ -0,0 +1,111 @@
+[Microsoft.UI.Xaml.Controls.PersonPicture]
+    Padding=0,0,0,0
+    Foreground=#E4000000
+    BorderThickness=0,0,0,0
+    BorderBrush=[NULL]
+    Background=[NULL]
+    CornerRadius=0,0,0,0
+    Width=100
+    Margin=0,0,0,0
+    Height=100
+    FocusVisualSecondaryThickness=1,1,1,1
+    FocusVisualSecondaryBrush=#B3FFFFFF
+    FocusVisualPrimaryThickness=2,2,2,2
+    FocusVisualPrimaryBrush=#E4000000
+    Visibility=Visible
+    RenderSize=100,100
+  [Windows.UI.Xaml.Controls.Grid]
+      Padding=0,0,0,0
+      CornerRadius=0,0,0,0
+      BorderThickness=0,0,0,0
+      BorderBrush=[NULL]
+      Background=[NULL]
+      Name=RootGrid
+      Margin=0,0,0,0
+      FocusVisualSecondaryThickness=1,1,1,1
+      FocusVisualSecondaryBrush=#B3FFFFFF
+      FocusVisualPrimaryThickness=2,2,2,2
+      FocusVisualPrimaryBrush=#E4000000
+      Visibility=Visible
+      RenderSize=100,100
+    [Windows.UI.Xaml.Shapes.Ellipse]
+        StrokeThickness=1
+        Width=100
+        Margin=0,0,0,0
+        Height=100
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Visible
+        RenderSize=100,100
+    [Windows.UI.Xaml.Controls.TextBlock]
+        Padding=0,0,0,0
+        Foreground=#E4000000
+        Name=InitialsTextBlock
+        Margin=0,0,0,0
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Visible
+        RenderSize=46,30
+    [Windows.UI.Xaml.Controls.Grid]
+        Padding=0,0,0,0
+        CornerRadius=0,0,0,0
+        BorderThickness=0,0,0,0
+        BorderBrush=[NULL]
+        Background=[NULL]
+        Name=BadgeGrid
+        Margin=0,0,0,0
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Collapsed
+        RenderSize=0,0
+      [Windows.UI.Xaml.Shapes.Ellipse]
+          StrokeThickness=2
+          Width=50
+          Name=BadgingBackgroundEllipse
+          Margin=0,0,0,0
+          Height=50
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Shapes.Ellipse]
+          StrokeThickness=1
+          Width=50
+          Name=BadgingEllipse
+          Margin=0,0,0,0
+          Height=50
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Controls.TextBlock]
+          Padding=0,0,0,0
+          Foreground=#FF000000
+          Name=BadgeNumberTextBlock
+          Margin=0,0,0,0
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Controls.FontIcon]
+          Foreground=#FF000000
+          Name=BadgeGlyphIcon
+          Margin=0,0,0,0
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
diff --git a/test/MUXControlsTestApp/verification/PersonPicture.xml b/test/MUXControlsTestApp/verification/PersonPicture.xml
@@ -0,0 +1,110 @@
+[Microsoft.UI.Xaml.Controls.PersonPicture]
+    Padding=0,0,0,0
+    Foreground=#E4000000
+    BorderThickness=0,0,0,0
+    BorderBrush=[NULL]
+    Background=[NULL]
+    Width=100
+    Margin=0,0,0,0
+    Height=100
+    FocusVisualSecondaryThickness=1,1,1,1
+    FocusVisualSecondaryBrush=#B3FFFFFF
+    FocusVisualPrimaryThickness=2,2,2,2
+    FocusVisualPrimaryBrush=#E4000000
+    Visibility=Visible
+    RenderSize=100,100
+  [Windows.UI.Xaml.Controls.Grid]
+      Padding=0,0,0,0
+      CornerRadius=0,0,0,0
+      BorderThickness=0,0,0,0
+      BorderBrush=[NULL]
+      Background=[NULL]
+      Name=RootGrid
+      Margin=0,0,0,0
+      FocusVisualSecondaryThickness=1,1,1,1
+      FocusVisualSecondaryBrush=#B3FFFFFF
+      FocusVisualPrimaryThickness=2,2,2,2
+      FocusVisualPrimaryBrush=#E4000000
+      Visibility=Visible
+      RenderSize=100,100
+    [Windows.UI.Xaml.Shapes.Ellipse]
+        StrokeThickness=1
+        Width=100
+        Margin=0,0,0,0
+        Height=100
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Visible
+        RenderSize=100,100
+    [Windows.UI.Xaml.Controls.TextBlock]
+        Padding=0,0,0,0
+        Foreground=#E4000000
+        Name=InitialsTextBlock
+        Margin=0,0,0,0
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Visible
+        RenderSize=46,30
+    [Windows.UI.Xaml.Controls.Grid]
+        Padding=0,0,0,0
+        CornerRadius=0,0,0,0
+        BorderThickness=0,0,0,0
+        BorderBrush=[NULL]
+        Background=[NULL]
+        Name=BadgeGrid
+        Margin=0,0,0,0
+        FocusVisualSecondaryThickness=1,1,1,1
+        FocusVisualSecondaryBrush=#B3FFFFFF
+        FocusVisualPrimaryThickness=2,2,2,2
+        FocusVisualPrimaryBrush=#E4000000
+        Visibility=Collapsed
+        RenderSize=0,0
+      [Windows.UI.Xaml.Shapes.Ellipse]
+          StrokeThickness=2
+          Width=50
+          Name=BadgingBackgroundEllipse
+          Margin=0,0,0,0
+          Height=50
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Shapes.Ellipse]
+          StrokeThickness=1
+          Width=50
+          Name=BadgingEllipse
+          Margin=0,0,0,0
+          Height=50
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Controls.TextBlock]
+          Padding=0,0,0,0
+          Foreground=#FF000000
+          Name=BadgeNumberTextBlock
+          Margin=0,0,0,0
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0
+      [Windows.UI.Xaml.Controls.FontIcon]
+          Foreground=#FF000000
+          Name=BadgeGlyphIcon
+          Margin=0,0,0,0
+          FocusVisualSecondaryThickness=1,1,1,1
+          FocusVisualSecondaryBrush=#B3FFFFFF
+          FocusVisualPrimaryThickness=2,2,2,2
+          FocusVisualPrimaryBrush=#E4000000
+          Visibility=Visible
+          RenderSize=0,0