WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 22df529

Browse files
kazo0kazo0
authored
chore: add Material style for RadioMenuFlyoutItem (#1509)
* chore: add Material style for RadioMenuFlyoutItem * chore: handle uwp
1 parent 5b60fd4 commit 22df529

File tree

3 files changed

+206
-171
lines changed

3 files changed

+206
-171
lines changed

‎src/library/Uno.Material/Styles/Controls/v2/Flyout.xaml‎

Lines changed: 167 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
66
xmlns:not_win="http://uno.ui/not_win"
77
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
89
mc:Ignorable="not_win ios android">
910

1011
<x:String x:Key="MaterialFlyoutCheckGlyphPathStyle">M30.561941,0L31.997,1.393004 10.467954,23.597999 0,15.350999 1.2379759,13.780992 10.287961,20.909952z</x:String>
@@ -19,6 +20,157 @@
1920
<x:Double x:Key="MaterialFlyoutMenuSeparatorHeight">1</x:Double>
2021
<GridLength x:Key="MaterialFlyoutMenuItemRightMargin">38</GridLength>
2122

23+
<ControlTemplate x:Key="ToggleMenuFlyoutItemTemplate"
24+
TargetType="ToggleMenuFlyoutItem">
25+
<Grid x:Name="LayoutRoot"
26+
Padding="{TemplateBinding Padding}"
27+
Background="{TemplateBinding Background}"
28+
BorderBrush="{TemplateBinding BorderBrush}"
29+
BorderThickness="{TemplateBinding BorderThickness}"
30+
CornerRadius="{TemplateBinding CornerRadius}">
31+
32+
<VisualStateManager.VisualStateGroups>
33+
<VisualStateGroup x:Name="CommonStates">
34+
<VisualState x:Name="Normal">
35+
<Storyboard>
36+
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
37+
</Storyboard>
38+
</VisualState>
39+
40+
<VisualState x:Name="PointerOver">
41+
<VisualState.Setters>
42+
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfaceHoverBrush}" />
43+
</VisualState.Setters>
44+
45+
<Storyboard>
46+
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
47+
</Storyboard>
48+
</VisualState>
49+
50+
<VisualState x:Name="Pressed">
51+
<VisualState.Setters>
52+
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfacePressedBrush}" />
53+
</VisualState.Setters>
54+
55+
<Storyboard>
56+
<PointerDownThemeAnimation Storyboard.TargetName="AnimationRoot" />
57+
</Storyboard>
58+
</VisualState>
59+
60+
<VisualState x:Name="Disabled">
61+
<VisualState.Setters>
62+
<Setter Target="TextBlock.Opacity" Value="{StaticResource DisabledOpacity}" />
63+
<Setter Target="IconRoot.Opacity" Value="{StaticResource DisabledOpacity}" />
64+
<Setter Target="CheckGlyph.Opacity" Value="{StaticResource DisabledOpacity}" />
65+
<Setter Target="KeyboardAcceleratorTextBlock.Opacity" Value="{StaticResource DisabledOpacity}" />
66+
</VisualState.Setters>
67+
</VisualState>
68+
</VisualStateGroup>
69+
70+
<VisualStateGroup x:Name="CheckStates">
71+
<VisualState x:Name="Unchecked" />
72+
73+
<VisualState x:Name="Checked">
74+
<VisualState.Setters>
75+
<Setter Target="CheckGlyph.Opacity" Value="1" />
76+
</VisualState.Setters>
77+
</VisualState>
78+
79+
<VisualState x:Name="UncheckedWithIcon">
80+
<VisualState.Setters>
81+
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
82+
<Setter Target="IconRoot.Visibility" Value="Visible" />
83+
</VisualState.Setters>
84+
</VisualState>
85+
86+
<VisualState x:Name="CheckedWithIcon">
87+
<VisualState.Setters>
88+
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
89+
<Setter Target="IconRoot.Visibility" Value="Visible" />
90+
<Setter Target="CheckGlyph.Opacity" Value="1" />
91+
</VisualState.Setters>
92+
</VisualState>
93+
</VisualStateGroup>
94+
<VisualStateGroup x:Name="FocusStates">
95+
<VisualState x:Name="Focused">
96+
<VisualState.Setters>
97+
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfaceFocusedBrush}" />
98+
</VisualState.Setters>
99+
</VisualState>
100+
101+
<VisualState x:Name="PointerFocused" />
102+
</VisualStateGroup>
103+
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
104+
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
105+
<VisualState x:Name="KeyboardAcceleratorTextVisible">
106+
<VisualState.Setters>
107+
<Setter Target="KeyboardAcceleratorTextBlock.Visibility" Value="Visible" />
108+
</VisualState.Setters>
109+
</VisualState>
110+
</VisualStateGroup>
111+
</VisualStateManager.VisualStateGroups>
112+
113+
<Grid x:Name="AnimationRoot">
114+
<Grid.ColumnDefinitions>
115+
<ColumnDefinition Width="Auto" />
116+
<ColumnDefinition Width="*" />
117+
<ColumnDefinition Width="{StaticResource MaterialFlyoutMenuItemRightMargin}" />
118+
<ColumnDefinition Width="Auto"
119+
MinWidth="16" />
120+
<ColumnDefinition Width="12" />
121+
</Grid.ColumnDefinitions>
122+
123+
<Path x:Name="CheckGlyph"
124+
Width="{StaticResource MaterialFlyoutMenuToggleCheckGlyphWidth}"
125+
Height="{StaticResource MaterialFlyoutMenuToggleCheckGlyphHeight}"
126+
VerticalAlignment="Center"
127+
Margin="12,0"
128+
Data="{StaticResource MaterialFlyoutCheckGlyphPathStyle}"
129+
Fill="{ThemeResource OnSurfaceVariantBrush}"
130+
Opacity="0"
131+
Stretch="Uniform" />
132+
133+
<Viewbox x:Name="IconRoot"
134+
Grid.Column="1"
135+
Width="{StaticResource MaterialFlyoutMenuItemIconWidth}"
136+
Height="{StaticResource MaterialFlyoutMenuItemIconHeight}"
137+
HorizontalAlignment="Left"
138+
VerticalAlignment="Center"
139+
Visibility="Collapsed">
140+
<ContentPresenter x:Name="IconContent"
141+
Content="{TemplateBinding Icon}"
142+
Foreground="{ThemeResource OnSurfaceVariantBrush}" />
143+
</Viewbox>
144+
145+
<TextBlock x:Name="TextBlock"
146+
Grid.Column="1"
147+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
148+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
149+
Foreground="{TemplateBinding Foreground}"
150+
Style="{StaticResource MaterialLabelLarge}"
151+
Text="{TemplateBinding Text}" />
152+
153+
<!-- Mobile devices do not support keyboard shortcuts -->
154+
<Grid Grid.Column="3"
155+
android:Visibility="Collapsed"
156+
ios:Visibility="Collapsed">
157+
<TextBlock x:Name="KeyboardAcceleratorTextBlock"
158+
VerticalAlignment="Center"
159+
AutomationProperties.AccessibilityView="Raw"
160+
Foreground="{ThemeResource OnSurfaceVariantBrush}"
161+
Style="{StaticResource MaterialLabelLarge}"
162+
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
163+
TextAlignment="Right"
164+
Visibility="{Binding KeyboardAcceleratorTextOverride, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
165+
</Grid>
166+
</Grid>
167+
168+
<!-- Overlay -->
169+
<Border x:Name="CommonStatesOverlay"
170+
Background="Transparent" />
171+
</Grid>
172+
</ControlTemplate>
173+
22174
<!-- Material FlyoutPresenter Style -->
23175
<Style x:Key="MaterialFlyoutPresenterStyle"
24176
TargetType="FlyoutPresenter">
@@ -288,175 +440,18 @@
288440
Value="{StaticResource MaterialFlyoutMenuItemHeight}" />
289441
<Setter Property="Padding"
290442
Value="0" />
443+
<Setter Property="Template"
444+
Value="{StaticResource ToggleMenuFlyoutItemTemplate}" />
445+
</Style>
291446

292-
<Setter Property="Template">
293-
<Setter.Value>
294-
<ControlTemplate TargetType="ToggleMenuFlyoutItem">
295-
296-
<Grid x:Name="LayoutRoot"
297-
Padding="{TemplateBinding Padding}"
298-
Background="{TemplateBinding Background}"
299-
BorderBrush="{TemplateBinding BorderBrush}"
300-
BorderThickness="{TemplateBinding BorderThickness}"
301-
CornerRadius="{TemplateBinding CornerRadius}">
302-
303-
<VisualStateManager.VisualStateGroups>
304-
<VisualStateGroup x:Name="CommonStates">
305-
<VisualState x:Name="Normal">
306-
<Storyboard>
307-
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
308-
</Storyboard>
309-
</VisualState>
310-
311-
<VisualState x:Name="PointerOver">
312-
<VisualState.Setters>
313-
<Setter Target="CommonStatesOverlay.Background"
314-
Value="{ThemeResource OnSurfaceHoverBrush}" />
315-
</VisualState.Setters>
316-
317-
<Storyboard>
318-
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
319-
</Storyboard>
320-
</VisualState>
321-
322-
<VisualState x:Name="Pressed">
323-
<VisualState.Setters>
324-
<Setter Target="CommonStatesOverlay.Background"
325-
Value="{ThemeResource OnSurfacePressedBrush}" />
326-
</VisualState.Setters>
327-
328-
<Storyboard>
329-
<PointerDownThemeAnimation Storyboard.TargetName="AnimationRoot" />
330-
</Storyboard>
331-
</VisualState>
332-
333-
<VisualState x:Name="Disabled">
334-
<VisualState.Setters>
335-
<Setter Target="TextBlock.Opacity"
336-
Value="{StaticResource DisabledOpacity}" />
337-
<Setter Target="IconRoot.Opacity"
338-
Value="{StaticResource DisabledOpacity}" />
339-
<Setter Target="CheckGlyph.Opacity"
340-
Value="{StaticResource DisabledOpacity}" />
341-
<Setter Target="KeyboardAcceleratorTextBlock.Opacity"
342-
Value="{StaticResource DisabledOpacity}" />
343-
</VisualState.Setters>
344-
</VisualState>
345-
</VisualStateGroup>
346-
347-
<VisualStateGroup x:Name="CheckStates">
348-
<VisualState x:Name="Unchecked" />
349-
350-
<VisualState x:Name="Checked">
351-
<VisualState.Setters>
352-
<Setter Target="CheckGlyph.Opacity"
353-
Value="1" />
354-
</VisualState.Setters>
355-
</VisualState>
356-
357-
<VisualState x:Name="UncheckedWithIcon">
358-
<VisualState.Setters>
359-
<Setter Target="TextBlock.Margin"
360-
Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
361-
<Setter Target="IconRoot.Visibility"
362-
Value="Visible" />
363-
</VisualState.Setters>
364-
</VisualState>
365-
366-
<VisualState x:Name="CheckedWithIcon">
367-
<VisualState.Setters>
368-
<Setter Target="TextBlock.Margin"
369-
Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
370-
<Setter Target="IconRoot.Visibility"
371-
Value="Visible" />
372-
<Setter Target="CheckGlyph.Opacity"
373-
Value="1" />
374-
</VisualState.Setters>
375-
</VisualState>
376-
</VisualStateGroup>
377-
<VisualStateGroup x:Name="FocusStates">
378-
<VisualState x:Name="Focused">
379-
<VisualState.Setters>
380-
<Setter Target="CommonStatesOverlay.Background"
381-
Value="{ThemeResource OnSurfaceFocusedBrush}" />
382-
</VisualState.Setters>
383-
</VisualState>
384-
385-
<VisualState x:Name="PointerFocused" />
386-
</VisualStateGroup>
387-
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
388-
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
389-
<VisualState x:Name="KeyboardAcceleratorTextVisible">
390-
<VisualState.Setters>
391-
<Setter Target="KeyboardAcceleratorTextBlock.Visibility"
392-
Value="Visible" />
393-
</VisualState.Setters>
394-
</VisualState>
395-
</VisualStateGroup>
396-
</VisualStateManager.VisualStateGroups>
397-
398-
<Grid x:Name="AnimationRoot">
399-
<Grid.ColumnDefinitions>
400-
<ColumnDefinition Width="Auto" />
401-
<ColumnDefinition Width="*" />
402-
<ColumnDefinition Width="{StaticResource MaterialFlyoutMenuItemRightMargin}" />
403-
<ColumnDefinition Width="Auto"
404-
MinWidth="16" />
405-
<ColumnDefinition Width="12" />
406-
</Grid.ColumnDefinitions>
407-
408-
<Path x:Name="CheckGlyph"
409-
Width="{StaticResource MaterialFlyoutMenuToggleCheckGlyphWidth}"
410-
Height="{StaticResource MaterialFlyoutMenuToggleCheckGlyphHeight}"
411-
VerticalAlignment="Center"
412-
Margin="12,0"
413-
Data="{StaticResource MaterialFlyoutCheckGlyphPathStyle}"
414-
Fill="{ThemeResource OnSurfaceVariantBrush}"
415-
Opacity="0"
416-
Stretch="Uniform" />
417-
418-
<Viewbox x:Name="IconRoot"
419-
Grid.Column="1"
420-
Width="{StaticResource MaterialFlyoutMenuItemIconWidth}"
421-
Height="{StaticResource MaterialFlyoutMenuItemIconHeight}"
422-
HorizontalAlignment="Left"
423-
VerticalAlignment="Center"
424-
Visibility="Collapsed">
425-
<ContentPresenter x:Name="IconContent"
426-
Content="{TemplateBinding Icon}"
427-
Foreground="{ThemeResource OnSurfaceVariantBrush}" />
428-
</Viewbox>
429-
430-
<TextBlock x:Name="TextBlock"
431-
Grid.Column="1"
432-
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
433-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
434-
Foreground="{TemplateBinding Foreground}"
435-
Style="{StaticResource MaterialLabelLarge}"
436-
Text="{TemplateBinding Text}" />
437-
438-
<!-- Mobile devices do not support keyboard shortcuts -->
439-
<Grid Grid.Column="3"
440-
android:Visibility="Collapsed"
441-
ios:Visibility="Collapsed">
442-
<TextBlock x:Name="KeyboardAcceleratorTextBlock"
443-
VerticalAlignment="Center"
444-
AutomationProperties.AccessibilityView="Raw"
445-
Foreground="{ThemeResource OnSurfaceVariantBrush}"
446-
Style="{StaticResource MaterialLabelLarge}"
447-
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
448-
TextAlignment="Right"
449-
Visibility="{Binding KeyboardAcceleratorTextOverride, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
450-
</Grid>
451-
</Grid>
452-
453-
<!-- Overlay -->
454-
<Border x:Name="CommonStatesOverlay"
455-
Background="Transparent" />
456-
</Grid>
457-
</ControlTemplate>
458-
</Setter.Value>
459-
</Setter>
447+
<!-- Material RadioMenuFlyoutItem Style -->
448+
<Style x:Key="MaterialRadioMenuFlyoutItemStyle"
449+
TargetType="muxc:RadioMenuFlyoutItem">
450+
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
451+
<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
452+
<Setter Property="Height" Value="{StaticResource MaterialFlyoutMenuItemHeight}" />
453+
<Setter Property="Padding" Value="0" />
454+
<Setter Property="Template" Value="{StaticResource ToggleMenuFlyoutItemTemplate}" />
460455
</Style>
461456

462457
<!-- Material MenuFlyoutSubItem Style -->
@@ -638,6 +633,10 @@
638633
TargetType="ToggleMenuFlyoutItem"
639634
BasedOn="{StaticResource MaterialToggleMenuFlyoutItemStyle}" />
640635

636+
<Style x:Key="MaterialDefaultRadioMenuFlyoutItemStyle"
637+
TargetType="muxc:RadioMenuFlyoutItem"
638+
BasedOn="{StaticResource MaterialRadioMenuFlyoutItemStyle}" />
639+
641640
<Style x:Key="MaterialDefaultMenuFlyoutSubItemStyle"
642641
TargetType="MenuFlyoutSubItem"
643642
BasedOn="{StaticResource MaterialMenuFlyoutSubItemStyle}" />

‎src/library/Uno.Material/Styles/Controls/v2/_Resources.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<Style BasedOn="{StaticResource MaterialDefaultProgressBarStyle}" TargetType="muxc:ProgressBar" />
3636
<Style BasedOn="{StaticResource MaterialDefaultProgressRingStyle}" TargetType="muxc:ProgressRing" />
3737
<Style BasedOn="{StaticResource MaterialDefaultRadioButtonStyle}" TargetType="RadioButton" />
38+
<Style BasedOn="{StaticResource MaterialDefaultRadioMenuFlyoutItemStyle}" TargetType="muxc:RadioMenuFlyoutItem" />
3839
<Style BasedOn="{StaticResource MaterialDefaultRatingControlStyle}" TargetType="RatingControl" />
3940
<Style BasedOn="{StaticResource MaterialDefaultRippleStyle}" TargetType="um:Ripple" />
4041
<Style BasedOn="{StaticResource MaterialDefaultSliderStyle}" TargetType="Slider" />

0 commit comments

Comments
 (0)