Skip to content

Commit ea823c0

Browse files
licanhualicanhua
authored
Update PersonPicture themeresources (#4953)
* init * update background * Update stroke thickness * Update test * Update master file for PersonPicture
1 parent ca46c90 commit ea823c0

6 files changed

Lines changed: 252 additions & 28 deletions

File tree

‎dev/PersonPicture/APITests/PersonPictureTests.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,5 +190,18 @@ public void VerifyVSMStatesForPhotosAndInitials()
190190
Verify.AreEqual(initialsTextBlock.Text, "\xE716");
191191
});
192192
}
193+
194+
[TestMethod]
195+
public void VerifyPersonPictureVisualTree()
196+
{
197+
PersonPicture personPicture = null;
198+
RunOnUIThread.Execute(() =>
199+
{
200+
personPicture = new PersonPicture { Initials="LC", Width=100, Height=100 };
201+
});
202+
TestUtilities.SetAsVisualTreeRoot(personPicture);
203+
204+
VisualTreeTestHelper.VerifyVisualTree(root: personPicture, verificationFileNamePrefix: "PersonPicture");
205+
}
193206
}
194207
}

‎dev/PersonPicture/PersonPicture.xaml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88

99
<Style x:Key="DefaultPersonPictureStyle" TargetType="local:PersonPicture">
1010
<Setter Property="Foreground" Value="{ThemeResource PersonPictureForegroundThemeBrush}" />
11-
<Setter Property="Width" Value="100" />
12-
<Setter Property="Height" Value="100" />
11+
<Setter Property="Width" Value="96" />
12+
<Setter Property="Height" Value="96" />
1313
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
14-
<Setter Property="FontWeight" Value="SemiLight" />
14+
<Setter Property="FontWeight" Value="SemiBold" />
1515
<Setter Property="IsTabStop" Value="False" />
1616
<Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
1717
<Setter Property="Template">
@@ -67,15 +67,15 @@
6767

6868
<Ellipse
6969
Fill="{ThemeResource PersonPictureEllipseFillThemeBrush}"
70-
Stroke="{ThemeResource SystemColorButtonTextColor}"
70+
Stroke="{ThemeResource PersonPictureEllipseFillStrokeBrush}"
7171
StrokeThickness="{ThemeResource PersonPictureEllipseStrokeThickness}"
7272
Width="{TemplateBinding Width}"
7373
Height="{TemplateBinding Height}" />
7474

7575
<TextBlock
7676
x:Name="InitialsTextBlock"
7777
AutomationProperties.AccessibilityView="Raw"
78-
FontSize="36"
78+
FontSize="40"
7979
FontFamily="{TemplateBinding FontFamily}"
8080
Foreground="{TemplateBinding Foreground}"
8181
FontWeight="{TemplateBinding FontWeight}"

‎dev/PersonPicture/PersonPicture_themeresources.xaml‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,38 @@
66

77
<ResourceDictionary.ThemeDictionaries>
88
<ResourceDictionary x:Key="Default">
9-
<SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{StaticResource SystemAltHighColor}"/>
9+
<StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="TextFillColorPrimaryBrush" />
1010
<SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{StaticResource SystemBaseHighColor}"/>
1111
<SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{StaticResource SystemChromeDisabledHighColor}"/>
1212
<SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{StaticResource SystemListMediumColor}"/>
13-
<SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{StaticResource SystemBaseMediumColor}"/>
13+
<StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="ControlAltFillColorQuarternary" />
14+
<StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
1415
<x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">0.8</x:Double>
1516
<x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
16-
<x:Double x:Key="PersonPictureEllipseStrokeThickness">0</x:Double>
17+
<x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>
1718
<x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">2</x:Double>
1819
</ResourceDictionary>
1920

2021
<ResourceDictionary x:Key="Light">
21-
<SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{StaticResource SystemAltHighColor}"/>
22+
<StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="TextFillColorPrimaryBrush" />
2223
<SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{StaticResource SystemBaseHighColor}"/>
2324
<SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{StaticResource SystemChromeDisabledHighColor}"/>
2425
<SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{StaticResource SystemListMediumColor}"/>
25-
<SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{StaticResource SystemBaseMediumColor}"/>
26+
<StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="ControlAltFillColorQuarternary" />
27+
<StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
2628
<x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">0.8</x:Double>
2729
<x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
28-
<x:Double x:Key="PersonPictureEllipseStrokeThickness">0</x:Double>
30+
<x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>
2931
<x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">2</x:Double>
3032
</ResourceDictionary>
3133

3234
<ResourceDictionary x:Key="HighContrast">
33-
<SolidColorBrush x:Key="PersonPictureForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
35+
<StaticResource x:Key="PersonPictureForegroundThemeBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
3436
<SolidColorBrush x:Key="PersonPictureEllipseBadgeForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
3537
<SolidColorBrush x:Key="PersonPictureEllipseBadgeFillThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
3638
<SolidColorBrush x:Key="PersonPictureEllipseBadgeStrokeThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
37-
<SolidColorBrush x:Key="PersonPictureEllipseFillThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
39+
<StaticResource x:Key="PersonPictureEllipseFillThemeBrush" ResourceKey="SystemColorHighlightTextColorBrush" />
40+
<StaticResource x:Key="PersonPictureEllipseFillStrokeBrush" ResourceKey="CardStrokeColorDefaultBrush" />
3841
<x:Double x:Key="PersonPictureEllipseBadgeStrokeOpacity">1.0</x:Double>
3942
<x:Double x:Key="PersonPictureEllipseBadgeImageSourceStrokeOpacity">1.0</x:Double>
4043
<x:Double x:Key="PersonPictureEllipseStrokeThickness">1</x:Double>

‎test/MUXControlsTestApp/ThemeResourcesTests.cs‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
#endif
3232

3333
using RatingControl = Microsoft.UI.Xaml.Controls.RatingControl;
34-
using PersonPicture = Microsoft.UI.Xaml.Controls.PersonPicture;
3534

3635
namespace Windows.UI.Xaml.Tests.MUXControls.ApiTests
3736
{
@@ -50,7 +49,6 @@ public static void Setup(TestContext context) { }
5049
public void VerifyOverrides()
5150
{
5251
RatingControl ratingControl = null;
53-
PersonPicture personPicture = null;
5452
Slider slider = null;
5553
Grid root = null;
5654

@@ -60,13 +58,7 @@ public void VerifyOverrides()
6058
// 1) Override WinUI defined brush in App.Resources.
6159
appResources["RatingControlCaptionForeground"] = new SolidColorBrush(Colors.Orange);
6260

63-
// 2) Override system brush used by WinUI ThemeResource.
64-
65-
((ResourceDictionary)appResources.ThemeDictionaries["Light"])["SystemAltHighColor"] = Colors.Green;
66-
((ResourceDictionary)appResources.ThemeDictionaries["Default"])["SystemAltHighColor"] = Colors.Green;
67-
((ResourceDictionary)appResources.ThemeDictionaries["HighContrast"])["SystemColorButtonTextColor"] = Colors.Green;
68-
69-
// 3) Override brush name used by a system control
61+
// 2) Override brush name used by a system control
7062
appResources["SliderTrackValueFill"] = new SolidColorBrush(Colors.Purple);
7163

7264
root = new Grid {
@@ -77,7 +69,6 @@ public void VerifyOverrides()
7769
panel.Children.Add(slider = new Slider());
7870

7971
panel.Children.Add(ratingControl = new RatingControl() { Value = 2 });
80-
panel.Children.Add(personPicture = new PersonPicture());
8172

8273
root.Children.Add(panel);
8374
// Add an element over top to prevent stray mouse input from interfering.
@@ -99,11 +90,7 @@ public void VerifyOverrides()
9990
Verify.AreEqual(Colors.Orange, ((SolidColorBrush)ratingControl.Foreground).Color,
10091
"Verify RatingControlCaptionForeground override in Application.Resources gets picked up by WinUI control");
10192

102-
// 2) Verify that overriding a system color used by a WinUI control works.
103-
Verify.AreEqual(Colors.Green, ((SolidColorBrush)personPicture.Foreground).Color,
104-
"Verify PersonPictureForegroundThemeBrush (which uses SystemAltHighColor) overridden in Application.Resources gets picked up by WinUI control");
105-
106-
// 3) Verify that overriding a system brush used by a system control works.
93+
// 2) Verify that overriding a system brush used by a system control works.
10794
if (PlatformConfiguration.IsOsVersionGreaterThan(OSVersion.Redstone1))
10895
{
10996
// 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

‎test/MUXControlsTestApp/verification/PersonPicture-7.xml‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
[Microsoft.UI.Xaml.Controls.PersonPicture]
2+
Padding=0,0,0,0
3+
Foreground=#E4000000
4+
BorderThickness=0,0,0,0
5+
BorderBrush=[NULL]
6+
Background=[NULL]
7+
CornerRadius=0,0,0,0
8+
Width=100
9+
Margin=0,0,0,0
10+
Height=100
11+
FocusVisualSecondaryThickness=1,1,1,1
12+
FocusVisualSecondaryBrush=#B3FFFFFF
13+
FocusVisualPrimaryThickness=2,2,2,2
14+
FocusVisualPrimaryBrush=#E4000000
15+
Visibility=Visible
16+
RenderSize=100,100
17+
[Windows.UI.Xaml.Controls.Grid]
18+
Padding=0,0,0,0
19+
CornerRadius=0,0,0,0
20+
BorderThickness=0,0,0,0
21+
BorderBrush=[NULL]
22+
Background=[NULL]
23+
Name=RootGrid
24+
Margin=0,0,0,0
25+
FocusVisualSecondaryThickness=1,1,1,1
26+
FocusVisualSecondaryBrush=#B3FFFFFF
27+
FocusVisualPrimaryThickness=2,2,2,2
28+
FocusVisualPrimaryBrush=#E4000000
29+
Visibility=Visible
30+
RenderSize=100,100
31+
[Windows.UI.Xaml.Shapes.Ellipse]
32+
StrokeThickness=1
33+
Width=100
34+
Margin=0,0,0,0
35+
Height=100
36+
FocusVisualSecondaryThickness=1,1,1,1
37+
FocusVisualSecondaryBrush=#B3FFFFFF
38+
FocusVisualPrimaryThickness=2,2,2,2
39+
FocusVisualPrimaryBrush=#E4000000
40+
Visibility=Visible
41+
RenderSize=100,100
42+
[Windows.UI.Xaml.Controls.TextBlock]
43+
Padding=0,0,0,0
44+
Foreground=#E4000000
45+
Name=InitialsTextBlock
46+
Margin=0,0,0,0
47+
FocusVisualSecondaryThickness=1,1,1,1
48+
FocusVisualSecondaryBrush=#B3FFFFFF
49+
FocusVisualPrimaryThickness=2,2,2,2
50+
FocusVisualPrimaryBrush=#E4000000
51+
Visibility=Visible
52+
RenderSize=46,30
53+
[Windows.UI.Xaml.Controls.Grid]
54+
Padding=0,0,0,0
55+
CornerRadius=0,0,0,0
56+
BorderThickness=0,0,0,0
57+
BorderBrush=[NULL]
58+
Background=[NULL]
59+
Name=BadgeGrid
60+
Margin=0,0,0,0
61+
FocusVisualSecondaryThickness=1,1,1,1
62+
FocusVisualSecondaryBrush=#B3FFFFFF
63+
FocusVisualPrimaryThickness=2,2,2,2
64+
FocusVisualPrimaryBrush=#E4000000
65+
Visibility=Collapsed
66+
RenderSize=0,0
67+
[Windows.UI.Xaml.Shapes.Ellipse]
68+
StrokeThickness=2
69+
Width=50
70+
Name=BadgingBackgroundEllipse
71+
Margin=0,0,0,0
72+
Height=50
73+
FocusVisualSecondaryThickness=1,1,1,1
74+
FocusVisualSecondaryBrush=#B3FFFFFF
75+
FocusVisualPrimaryThickness=2,2,2,2
76+
FocusVisualPrimaryBrush=#E4000000
77+
Visibility=Visible
78+
RenderSize=0,0
79+
[Windows.UI.Xaml.Shapes.Ellipse]
80+
StrokeThickness=1
81+
Width=50
82+
Name=BadgingEllipse
83+
Margin=0,0,0,0
84+
Height=50
85+
FocusVisualSecondaryThickness=1,1,1,1
86+
FocusVisualSecondaryBrush=#B3FFFFFF
87+
FocusVisualPrimaryThickness=2,2,2,2
88+
FocusVisualPrimaryBrush=#E4000000
89+
Visibility=Visible
90+
RenderSize=0,0
91+
[Windows.UI.Xaml.Controls.TextBlock]
92+
Padding=0,0,0,0
93+
Foreground=#FF000000
94+
Name=BadgeNumberTextBlock
95+
Margin=0,0,0,0
96+
FocusVisualSecondaryThickness=1,1,1,1
97+
FocusVisualSecondaryBrush=#B3FFFFFF
98+
FocusVisualPrimaryThickness=2,2,2,2
99+
FocusVisualPrimaryBrush=#E4000000
100+
Visibility=Visible
101+
RenderSize=0,0
102+
[Windows.UI.Xaml.Controls.FontIcon]
103+
Foreground=#FF000000
104+
Name=BadgeGlyphIcon
105+
Margin=0,0,0,0
106+
FocusVisualSecondaryThickness=1,1,1,1
107+
FocusVisualSecondaryBrush=#B3FFFFFF
108+
FocusVisualPrimaryThickness=2,2,2,2
109+
FocusVisualPrimaryBrush=#E4000000
110+
Visibility=Visible
111+
RenderSize=0,0

‎test/MUXControlsTestApp/verification/PersonPicture.xml‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
[Microsoft.UI.Xaml.Controls.PersonPicture]
2+
Padding=0,0,0,0
3+
Foreground=#E4000000
4+
BorderThickness=0,0,0,0
5+
BorderBrush=[NULL]
6+
Background=[NULL]
7+
Width=100
8+
Margin=0,0,0,0
9+
Height=100
10+
FocusVisualSecondaryThickness=1,1,1,1
11+
FocusVisualSecondaryBrush=#B3FFFFFF
12+
FocusVisualPrimaryThickness=2,2,2,2
13+
FocusVisualPrimaryBrush=#E4000000
14+
Visibility=Visible
15+
RenderSize=100,100
16+
[Windows.UI.Xaml.Controls.Grid]
17+
Padding=0,0,0,0
18+
CornerRadius=0,0,0,0
19+
BorderThickness=0,0,0,0
20+
BorderBrush=[NULL]
21+
Background=[NULL]
22+
Name=RootGrid
23+
Margin=0,0,0,0
24+
FocusVisualSecondaryThickness=1,1,1,1
25+
FocusVisualSecondaryBrush=#B3FFFFFF
26+
FocusVisualPrimaryThickness=2,2,2,2
27+
FocusVisualPrimaryBrush=#E4000000
28+
Visibility=Visible
29+
RenderSize=100,100
30+
[Windows.UI.Xaml.Shapes.Ellipse]
31+
StrokeThickness=1
32+
Width=100
33+
Margin=0,0,0,0
34+
Height=100
35+
FocusVisualSecondaryThickness=1,1,1,1
36+
FocusVisualSecondaryBrush=#B3FFFFFF
37+
FocusVisualPrimaryThickness=2,2,2,2
38+
FocusVisualPrimaryBrush=#E4000000
39+
Visibility=Visible
40+
RenderSize=100,100
41+
[Windows.UI.Xaml.Controls.TextBlock]
42+
Padding=0,0,0,0
43+
Foreground=#E4000000
44+
Name=InitialsTextBlock
45+
Margin=0,0,0,0
46+
FocusVisualSecondaryThickness=1,1,1,1
47+
FocusVisualSecondaryBrush=#B3FFFFFF
48+
FocusVisualPrimaryThickness=2,2,2,2
49+
FocusVisualPrimaryBrush=#E4000000
50+
Visibility=Visible
51+
RenderSize=46,30
52+
[Windows.UI.Xaml.Controls.Grid]
53+
Padding=0,0,0,0
54+
CornerRadius=0,0,0,0
55+
BorderThickness=0,0,0,0
56+
BorderBrush=[NULL]
57+
Background=[NULL]
58+
Name=BadgeGrid
59+
Margin=0,0,0,0
60+
FocusVisualSecondaryThickness=1,1,1,1
61+
FocusVisualSecondaryBrush=#B3FFFFFF
62+
FocusVisualPrimaryThickness=2,2,2,2
63+
FocusVisualPrimaryBrush=#E4000000
64+
Visibility=Collapsed
65+
RenderSize=0,0
66+
[Windows.UI.Xaml.Shapes.Ellipse]
67+
StrokeThickness=2
68+
Width=50
69+
Name=BadgingBackgroundEllipse
70+
Margin=0,0,0,0
71+
Height=50
72+
FocusVisualSecondaryThickness=1,1,1,1
73+
FocusVisualSecondaryBrush=#B3FFFFFF
74+
FocusVisualPrimaryThickness=2,2,2,2
75+
FocusVisualPrimaryBrush=#E4000000
76+
Visibility=Visible
77+
RenderSize=0,0
78+
[Windows.UI.Xaml.Shapes.Ellipse]
79+
StrokeThickness=1
80+
Width=50
81+
Name=BadgingEllipse
82+
Margin=0,0,0,0
83+
Height=50
84+
FocusVisualSecondaryThickness=1,1,1,1
85+
FocusVisualSecondaryBrush=#B3FFFFFF
86+
FocusVisualPrimaryThickness=2,2,2,2
87+
FocusVisualPrimaryBrush=#E4000000
88+
Visibility=Visible
89+
RenderSize=0,0
90+
[Windows.UI.Xaml.Controls.TextBlock]
91+
Padding=0,0,0,0
92+
Foreground=#FF000000
93+
Name=BadgeNumberTextBlock
94+
Margin=0,0,0,0
95+
FocusVisualSecondaryThickness=1,1,1,1
96+
FocusVisualSecondaryBrush=#B3FFFFFF
97+
FocusVisualPrimaryThickness=2,2,2,2
98+
FocusVisualPrimaryBrush=#E4000000
99+
Visibility=Visible
100+
RenderSize=0,0
101+
[Windows.UI.Xaml.Controls.FontIcon]
102+
Foreground=#FF000000
103+
Name=BadgeGlyphIcon
104+
Margin=0,0,0,0
105+
FocusVisualSecondaryThickness=1,1,1,1
106+
FocusVisualSecondaryBrush=#B3FFFFFF
107+
FocusVisualPrimaryThickness=2,2,2,2
108+
FocusVisualPrimaryBrush=#E4000000
109+
Visibility=Visible
110+
RenderSize=0,0

0 commit comments

Comments
 (0)