Skip to content

Commit eb2b5ab

Browse files
MartinZikmundMartinZikmund
authored
Merge pull request #21181 from unoplatform/dev/mazi/rating-control-update
feat: Update `RatingControl` to winui3/release/1.7.3
2 parents 9c3a1cb + 8fd820c commit eb2b5ab

File tree

6 files changed

+438
-114
lines changed

6 files changed

+438
-114
lines changed

‎src/Uno.UI.FluentTheme.v2/Resources/Version2/PriorityDefault/RatingControl.xaml‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
2-
<!-- MUX Reference RatingControl.xaml, tag winui3/release/1.5.3, commit commit 2a60e27c591846556fa9ec4d8f305afdf0f96dc1 -->
2+
<!-- MUX Reference RatingControl.xaml, tag winui3/release/1.7.3, commit commit 65718e2813a90f -->
33
<ResourceDictionary xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="using:Microsoft.UI.Xaml.Controls" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
44
<Style TargetType="controls:RatingControl">
5-
<Setter Property="Height" Value="32" />
5+
<Setter Property="MinHeight" Value="32" />
66
<!-- 9794813: retire these two properties as customisation points once all resource keys available -->
77
<Setter Property="Foreground" Value="{ThemeResource RatingControlCaptionForeground}" />
88
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
99
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
1010
<Setter Property="ItemInfo" Value="{ThemeResource MUX_RatingControlDefaultFontInfo}" />
11+
<!-- I've picked values so that these LOOK like the redlines, but these
12+
values are not actually from the redlines because the redlines don't
13+
consistently pick "distance from glyph"/"distance from edge of textbox"
14+
so it's not possible to actually just have a consistent sizing model
15+
here based on the redlines. -->
16+
<Setter Property="FocusVisualMargin" Value="-8,-7,-8,0" />
17+
<Setter Property="IsFocusEngagementEnabled" Value="True" />
1118
<Setter Property="Template">
1219
<Setter.Value>
1320
<ControlTemplate TargetType="controls:RatingControl">
14-
<Grid x:Name="LayoutRoot">
21+
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}">
1522
<VisualStateManager.VisualStateGroups>
1623
<VisualStateGroup x:Name="CommonStates">
1724
<VisualState x:Name="Disabled">
@@ -46,24 +53,31 @@
4653
</VisualState>
4754
</VisualStateGroup>
4855
</VisualStateManager.VisualStateGroups>
49-
<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="-20,-20,-20,-20">
50-
<StackPanel x:Name="RatingBackgroundStackPanel" Orientation="Horizontal" Background="Transparent" Margin="20,20,0,20" />
51-
<TextBlock x:Name="Caption" Height="32" Margin="4,9,20,0" TextLineBounds="TrimToBaseline" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource RatingControlCaptionForeground}" VerticalAlignment="Center" IsHitTestVisible="False" AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="RatingCaption" Text="{TemplateBinding Caption}" />
56+
<StackPanel x:Name="CaptionStackPanel" Orientation="Horizontal" Grid.Row="0" Margin="-20,-20,-20,-20">
57+
<StackPanel x:Name="RatingBackgroundStackPanel" Orientation="Horizontal" Background="Transparent" Margin="20,20,0,20">
58+
<StackPanel.RenderTransform>
59+
<TranslateTransform x:Name="RatingBackgroundStackPanelTranslateTransform" />
60+
</StackPanel.RenderTransform>
61+
</StackPanel>
62+
<TextBlock x:Name="Caption" Margin="4,0,20,0" TextLineBounds="Tight" FontSize="12" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" IsHitTestVisible="False" AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="RatingCaption" Text="{TemplateBinding Caption}" />
5263
<!-- 4 = 8 item spacing +4 of magic redline spacing -8 to compensate for scale of the last RatingItem -->
5364
<!-- NB: The redlines say 8px, but it's really 12 px because:
5465
Designer note: The value between the last glyph and first text character is 12px.
5566
(There's 4px of whitespace accounted for in the text area in the redline) -->
56-
<!-- TODO MSFT: 9925444 Fix vertical alignment in all text scenarios -->
5767
</StackPanel>
5868
<ContentPresenter x:Name="ForegroundContentPresenter" IsHitTestVisible="False" Grid.Row="0">
5969
<!-- Margin is on the StackPanel because ContentPresenter clips differently such that moving the reverse margin up won't work -->
6070
<StackPanel Orientation="Horizontal" Margin="-40,-40,-40,-40">
61-
<StackPanel x:Name="RatingForegroundStackPanel" Orientation="Horizontal" IsHitTestVisible="False" Margin="40,40,40,40" />
71+
<StackPanel x:Name="RatingForegroundStackPanel" Orientation="Horizontal" IsHitTestVisible="False" Margin="40,40,40,40">
72+
<StackPanel.RenderTransform>
73+
<TranslateTransform x:Name="RatingForegroundStackPanelTranslateTransform" />
74+
</StackPanel.RenderTransform>
75+
</StackPanel>
6276
</StackPanel>
6377
</ContentPresenter>
6478
</Grid>
6579
</ControlTemplate>
6680
</Setter.Value>
6781
</Setter>
6882
</Style>
69-
</ResourceDictionary>
83+
</ResourceDictionary>

‎src/Uno.UI.FluentTheme.v2/Resources/Version2/PriorityDefault/RatingControl_themeresources.xaml‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
2-
<!-- MUX Reference RatingControl.xaml, tag winui3/release/1.5.3, commit commit 2a60e27c591846556fa9ec4d8f305afdf0f96dc1 -->
2+
<!-- MUX Reference RatingControl_themeresources.xaml, tag winui3/release/1.7.3, commit commit 65718e2813a90f -->
33
<ResourceDictionary xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="using:Microsoft.UI.Xaml.Controls" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
44
<ResourceDictionary.ThemeDictionaries>
55
<ResourceDictionary x:Key="Default">
@@ -36,18 +36,22 @@
3636
<controls:RatingItemFontInfo x:Key="MUX_RatingControlDefaultFontInfo" Glyph="&#xE735;" UnsetGlyph="&#xE734;" />
3737
</ResourceDictionary>
3838
</ResourceDictionary.ThemeDictionaries>
39+
<!-- 32 = 2 * [default fontsize] - because of double size rendering, remove when MSFT #10030063 is done -->
40+
<x:Double x:Key="RatingControlFontSizeForRendering">32</x:Double>
41+
<x:Double x:Key="RatingControlItemSpacing">8</x:Double>
42+
<x:Double x:Key="RatingControlCaptionTopMargin">-12.5</x:Double>
3943
<DataTemplate x:Key="BackgroundGlyphDefaultTemplate">
4044
<!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
41-
<TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="32" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
45+
<TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="{StaticResource RatingControlFontSizeForRendering}" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
4246
</DataTemplate>
4347
<DataTemplate x:Key="ForegroundGlyphDefaultTemplate">
4448
<!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
45-
<TextBlock Margin="-8,-8,0,0" FontSize="32" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
49+
<TextBlock Margin="-8,-8,0,0" FontSize="{StaticResource RatingControlFontSizeForRendering}" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
4650
</DataTemplate>
4751
<DataTemplate x:Key="BackgroundImageDefaultTemplate">
4852
<Image Margin="-8,-8,0,0" AutomationProperties.AccessibilityView="Raw" />
4953
</DataTemplate>
5054
<DataTemplate x:Key="ForegroundImageDefaultTemplate">
5155
<Image Margin="-8,-8,0,0" AutomationProperties.AccessibilityView="Raw" />
5256
</DataTemplate>
53-
</ResourceDictionary>
57+
</ResourceDictionary>

‎src/Uno.UI.FluentTheme.v2/themeresources_v2.xaml‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20727,16 +20727,23 @@
2072720727
</Setter>
2072820728
</Style>
2072920729
<Style TargetType="controls:RatingControl">
20730-
<Setter Property="Height" Value="32" />
20730+
<Setter Property="MinHeight" Value="32" />
2073120731
<!-- 9794813: retire these two properties as customisation points once all resource keys available -->
2073220732
<Setter Property="Foreground" Value="{ThemeResource RatingControlCaptionForeground}" />
2073320733
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
2073420734
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
2073520735
<Setter Property="ItemInfo" Value="{ThemeResource MUX_RatingControlDefaultFontInfo}" />
20736+
<!-- I've picked values so that these LOOK like the redlines, but these
20737+
values are not actually from the redlines because the redlines don't
20738+
consistently pick "distance from glyph"/"distance from edge of textbox"
20739+
so it's not possible to actually just have a consistent sizing model
20740+
here based on the redlines. -->
20741+
<Setter Property="FocusVisualMargin" Value="-8,-7,-8,0" />
20742+
<Setter Property="IsFocusEngagementEnabled" Value="True" />
2073620743
<Setter Property="Template">
2073720744
<Setter.Value>
2073820745
<ControlTemplate TargetType="controls:RatingControl">
20739-
<Grid x:Name="LayoutRoot">
20746+
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}">
2074020747
<VisualStateManager.VisualStateGroups>
2074120748
<VisualStateGroup x:Name="CommonStates">
2074220749
<VisualState x:Name="Disabled">
@@ -20771,33 +20778,43 @@
2077120778
</VisualState>
2077220779
</VisualStateGroup>
2077320780
</VisualStateManager.VisualStateGroups>
20774-
<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="-20,-20,-20,-20">
20775-
<StackPanel x:Name="RatingBackgroundStackPanel" Orientation="Horizontal" Background="Transparent" Margin="20,20,0,20" />
20776-
<TextBlock x:Name="Caption" Height="32" Margin="4,9,20,0" TextLineBounds="TrimToBaseline" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource RatingControlCaptionForeground}" VerticalAlignment="Center" IsHitTestVisible="False" AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="RatingCaption" Text="{TemplateBinding Caption}" />
20781+
<StackPanel x:Name="CaptionStackPanel" Orientation="Horizontal" Grid.Row="0" Margin="-20,-20,-20,-20">
20782+
<StackPanel x:Name="RatingBackgroundStackPanel" Orientation="Horizontal" Background="Transparent" Margin="20,20,0,20">
20783+
<StackPanel.RenderTransform>
20784+
<TranslateTransform x:Name="RatingBackgroundStackPanelTranslateTransform" />
20785+
</StackPanel.RenderTransform>
20786+
</StackPanel>
20787+
<TextBlock x:Name="Caption" Margin="4,0,20,0" TextLineBounds="Tight" FontSize="12" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" IsHitTestVisible="False" AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="RatingCaption" Text="{TemplateBinding Caption}" />
2077720788
<!-- 4 = 8 item spacing +4 of magic redline spacing -8 to compensate for scale of the last RatingItem -->
2077820789
<!-- NB: The redlines say 8px, but it's really 12 px because:
2077920790
Designer note: The value between the last glyph and first text character is 12px.
2078020791
(There's 4px of whitespace accounted for in the text area in the redline) -->
20781-
<!-- TODO MSFT: 9925444 Fix vertical alignment in all text scenarios -->
2078220792
</StackPanel>
2078320793
<ContentPresenter x:Name="ForegroundContentPresenter" IsHitTestVisible="False" Grid.Row="0">
2078420794
<!-- Margin is on the StackPanel because ContentPresenter clips differently such that moving the reverse margin up won't work -->
2078520795
<StackPanel Orientation="Horizontal" Margin="-40,-40,-40,-40">
20786-
<StackPanel x:Name="RatingForegroundStackPanel" Orientation="Horizontal" IsHitTestVisible="False" Margin="40,40,40,40" />
20796+
<StackPanel x:Name="RatingForegroundStackPanel" Orientation="Horizontal" IsHitTestVisible="False" Margin="40,40,40,40">
20797+
<StackPanel.RenderTransform>
20798+
<TranslateTransform x:Name="RatingForegroundStackPanelTranslateTransform" />
20799+
</StackPanel.RenderTransform>
20800+
</StackPanel>
2078720801
</StackPanel>
2078820802
</ContentPresenter>
2078920803
</Grid>
2079020804
</ControlTemplate>
2079120805
</Setter.Value>
2079220806
</Setter>
2079320807
</Style>
20808+
<x:Double x:Key="RatingControlFontSizeForRendering">32</x:Double>
20809+
<x:Double x:Key="RatingControlItemSpacing">8</x:Double>
20810+
<x:Double x:Key="RatingControlCaptionTopMargin">-12.5</x:Double>
2079420811
<DataTemplate x:Key="BackgroundGlyphDefaultTemplate">
2079520812
<!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
20796-
<TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="32" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
20813+
<TextBlock Foreground="{ThemeResource RatingControlUnselectedForeground}" Margin="-8,-8,0,0" FontSize="{StaticResource RatingControlFontSizeForRendering}" Text="&#xE734;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
2079720814
</DataTemplate>
2079820815
<DataTemplate x:Key="ForegroundGlyphDefaultTemplate">
2079920816
<!-- -8, -8 are to compensate for the default scale down, plus factoring in margins -->
20800-
<TextBlock Margin="-8,-8,0,0" FontSize="32" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
20817+
<TextBlock Margin="-8,-8,0,0" FontSize="{StaticResource RatingControlFontSizeForRendering}" Text="&#xE735;" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
2080120818
</DataTemplate>
2080220819
<DataTemplate x:Key="BackgroundImageDefaultTemplate">
2080320820
<Image Margin="-8,-8,0,0" AutomationProperties.AccessibilityView="Raw" />

‎src/Uno.UI.RuntimeTests/MUX/Microsoft_UI_Xaml_Controls/RatingControl/RatingControlTests.cs‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
using RatingItemFontInfo = Microsoft.UI.Xaml.Controls.RatingItemFontInfo;
2929
using RatingItemImageInfo = Microsoft.UI.Xaml.Controls.RatingItemImageInfo;
3030
using Private.Infrastructure;
31+
using System.Threading;
3132

3233
namespace Microsoft.UI.Xaml.Tests.MUXControls.ApiTests
3334
{
@@ -133,5 +134,182 @@ public void VerifyValuesCoercion()
133134
Verify.AreEqual(ratingControl.Value, 1.0, "Should coerce set Value above MaxRating back to MaxRating");
134135
});
135136
}
137+
138+
[TestMethod]
139+
[TestProperty("IsolationLevel", "Method")] // This test alters the application resources, so it's isolated from other tests.
140+
public async Task VerifySizeIsChangeableFromResource()
141+
{
142+
UnoManualResetEvent loadedEvent = new(false);
143+
UnoManualResetEvent unloadedEvent = new(false);
144+
double originalWidth = 0;
145+
double previousWidth = 0;
146+
147+
// Store original resource values for cleanup
148+
object originalFontSize = null;
149+
object originalItemSpacing = null;
150+
151+
RunOnUIThread.Execute(() =>
152+
{
153+
// Store original values
154+
originalFontSize = Application.Current.Resources["RatingControlFontSizeForRendering"];
155+
originalItemSpacing = Application.Current.Resources["RatingControlItemSpacing"];
156+
});
157+
158+
try
159+
{
160+
RunOnUIThread.Execute(() =>
161+
{
162+
var ratingControl = new RatingControl();
163+
164+
ratingControl.Loaded += (sender, e) =>
165+
{
166+
originalWidth = ratingControl.ActualWidth;
167+
previousWidth = originalWidth;
168+
loadedEvent.Set();
169+
};
170+
171+
ratingControl.Unloaded += (sender, e) => unloadedEvent.Set();
172+
173+
Content = ratingControl;
174+
});
175+
176+
await loadedEvent.WaitOne();
177+
await TestServices.WindowHelper.WaitForIdle();
178+
179+
RunOnUIThread.Execute(() =>
180+
{
181+
Content = null;
182+
});
183+
184+
await unloadedEvent.WaitOne();
185+
await TestServices.WindowHelper.WaitForIdle();
186+
187+
RunOnUIThread.Execute(() =>
188+
{
189+
Application.Current.Resources["RatingControlFontSizeForRendering"] = 20.0;
190+
191+
var ratingControl = new RatingControl();
192+
193+
ratingControl.Loaded += (sender, e) =>
194+
{
195+
Verify.IsLessThan(ratingControl.ActualWidth, previousWidth);
196+
previousWidth = ratingControl.ActualWidth;
197+
loadedEvent.Set();
198+
};
199+
200+
ratingControl.Unloaded += (sender, e) => unloadedEvent.Set();
201+
202+
Content = ratingControl;
203+
});
204+
205+
await loadedEvent.WaitOne();
206+
await TestServices.WindowHelper.WaitForIdle();
207+
208+
RunOnUIThread.Execute(() =>
209+
{
210+
Content = null;
211+
});
212+
213+
await unloadedEvent.WaitOne();
214+
await TestServices.WindowHelper.WaitForIdle();
215+
216+
RunOnUIThread.Execute(() =>
217+
{
218+
Application.Current.Resources["RatingControlItemSpacing"] = 20.0;
219+
220+
var ratingControl = new RatingControl();
221+
222+
ratingControl.Loaded += (sender, e) =>
223+
{
224+
Verify.IsGreaterThan(ratingControl.ActualWidth, previousWidth);
225+
previousWidth = ratingControl.ActualWidth;
226+
loadedEvent.Set();
227+
};
228+
229+
ratingControl.Unloaded += (sender, e) => unloadedEvent.Set();
230+
231+
Content = ratingControl;
232+
});
233+
234+
await loadedEvent.WaitOne();
235+
await TestServices.WindowHelper.WaitForIdle();
236+
237+
RunOnUIThread.Execute(() =>
238+
{
239+
Content = null;
240+
});
241+
242+
await unloadedEvent.WaitOne();
243+
await TestServices.WindowHelper.WaitForIdle();
244+
245+
RunOnUIThread.Execute(() =>
246+
{
247+
Application.Current.Resources["RatingControlFontSizeForRendering"] = 48.0;
248+
Application.Current.Resources.Remove("RatingControlItemSpacing");
249+
250+
var ratingControl = new RatingControl();
251+
252+
ratingControl.Loaded += (sender, e) =>
253+
{
254+
Verify.IsGreaterThan(ratingControl.ActualWidth, originalWidth);
255+
Verify.IsGreaterThan(ratingControl.ActualWidth, previousWidth);
256+
previousWidth = ratingControl.ActualWidth;
257+
loadedEvent.Set();
258+
};
259+
260+
ratingControl.Unloaded += (sender, e) => unloadedEvent.Set();
261+
262+
Content = ratingControl;
263+
});
264+
265+
await loadedEvent.WaitOne();
266+
await TestServices.WindowHelper.WaitForIdle();
267+
268+
RunOnUIThread.Execute(() =>
269+
{
270+
Content = null;
271+
});
272+
273+
await unloadedEvent.WaitOne();
274+
await TestServices.WindowHelper.WaitForIdle();
275+
276+
RunOnUIThread.Execute(() =>
277+
{
278+
Application.Current.Resources["RatingControlItemSpacing"] = 2.0;
279+
280+
var ratingControl = new RatingControl();
281+
282+
ratingControl.Loaded += (sender, e) =>
283+
{
284+
Verify.IsLessThan(ratingControl.ActualWidth, previousWidth);
285+
loadedEvent.Set();
286+
};
287+
288+
ratingControl.Unloaded += (sender, e) => unloadedEvent.Set();
289+
290+
Content = ratingControl;
291+
});
292+
293+
await loadedEvent.WaitOne();
294+
await TestServices.WindowHelper.WaitForIdle();
295+
296+
RunOnUIThread.Execute(() =>
297+
{
298+
Content = null;
299+
});
300+
301+
await unloadedEvent.WaitOne();
302+
await TestServices.WindowHelper.WaitForIdle();
303+
}
304+
finally
305+
{
306+
// Restore original resource values
307+
RunOnUIThread.Execute(() =>
308+
{
309+
Application.Current.Resources["RatingControlFontSizeForRendering"] = originalFontSize;
310+
Application.Current.Resources["RatingControlItemSpacing"] = originalItemSpacing;
311+
});
312+
}
313+
}
136314
}
137315
}

0 commit comments

Comments
 (0)