Skip to content

Commit

Permalink
chore: add Material style for RadioMenuFlyoutItem (#1509)
Browse files Browse the repository at this point in the history 
* chore: add Material style for RadioMenuFlyoutItem

* chore: handle uwp
  • Loading branch information
@kazo0
kazo0 authored Dec 16, 2024
1 parent 5b60fd4 commit 22df529
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 171 deletions.
335 changes: 167 additions & 168 deletions src/library/Uno.Material/Styles/Controls/v2/Flyout.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:not_win="http://uno.ui/not_win"
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="not_win ios android">

<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>
Expand All @@ -19,6 +20,157 @@
<x:Double x:Key="MaterialFlyoutMenuSeparatorHeight">1</x:Double>
<GridLength x:Key="MaterialFlyoutMenuItemRightMargin">38</GridLength>

<ControlTemplate x:Key="ToggleMenuFlyoutItemTemplate"
TargetType="ToggleMenuFlyoutItem">
<Grid x:Name="LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfaceHoverBrush}" />
</VisualState.Setters>

<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfacePressedBrush}" />
</VisualState.Setters>

<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="TextBlock.Opacity" Value="{StaticResource DisabledOpacity}" />
<Setter Target="IconRoot.Opacity" Value="{StaticResource DisabledOpacity}" />
<Setter Target="CheckGlyph.Opacity" Value="{StaticResource DisabledOpacity}" />
<Setter Target="KeyboardAcceleratorTextBlock.Opacity" Value="{StaticResource DisabledOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked" />

<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckGlyph.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="UncheckedWithIcon">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="CheckedWithIcon">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
<Setter Target="CheckGlyph.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background" Value="{ThemeResource OnSurfaceFocusedBrush}" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextBlock.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid x:Name="AnimationRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{StaticResource MaterialFlyoutMenuItemRightMargin}" />
<ColumnDefinition Width="Auto"
MinWidth="16" />
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>

<Path x:Name="CheckGlyph"
Width="{StaticResource MaterialFlyoutMenuToggleCheckGlyphWidth}"
Height="{StaticResource MaterialFlyoutMenuToggleCheckGlyphHeight}"
VerticalAlignment="Center"
Margin="12,0"
Data="{StaticResource MaterialFlyoutCheckGlyphPathStyle}"
Fill="{ThemeResource OnSurfaceVariantBrush}"
Opacity="0"
Stretch="Uniform" />

<Viewbox x:Name="IconRoot"
Grid.Column="1"
Width="{StaticResource MaterialFlyoutMenuItemIconWidth}"
Height="{StaticResource MaterialFlyoutMenuItemIconHeight}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Visibility="Collapsed">
<ContentPresenter x:Name="IconContent"
Content="{TemplateBinding Icon}"
Foreground="{ThemeResource OnSurfaceVariantBrush}" />
</Viewbox>

<TextBlock x:Name="TextBlock"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource MaterialLabelLarge}"
Text="{TemplateBinding Text}" />

<!-- Mobile devices do not support keyboard shortcuts -->
<Grid Grid.Column="3"
android:Visibility="Collapsed"
ios:Visibility="Collapsed">
<TextBlock x:Name="KeyboardAcceleratorTextBlock"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource OnSurfaceVariantBrush}"
Style="{StaticResource MaterialLabelLarge}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
TextAlignment="Right"
Visibility="{Binding KeyboardAcceleratorTextOverride, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
</Grid>
</Grid>

<!-- Overlay -->
<Border x:Name="CommonStatesOverlay"
Background="Transparent" />
</Grid>
</ControlTemplate>

<!-- Material FlyoutPresenter Style -->
<Style x:Key="MaterialFlyoutPresenterStyle"
TargetType="FlyoutPresenter">
Expand Down Expand Up @@ -288,175 +440,18 @@
Value="{StaticResource MaterialFlyoutMenuItemHeight}" />
<Setter Property="Padding"
Value="0" />
<Setter Property="Template"
Value="{StaticResource ToggleMenuFlyoutItemTemplate}" />
</Style>

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleMenuFlyoutItem">

<Grid x:Name="LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background"
Value="{ThemeResource OnSurfaceHoverBrush}" />
</VisualState.Setters>

<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background"
Value="{ThemeResource OnSurfacePressedBrush}" />
</VisualState.Setters>

<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="AnimationRoot" />
</Storyboard>
</VisualState>

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="TextBlock.Opacity"
Value="{StaticResource DisabledOpacity}" />
<Setter Target="IconRoot.Opacity"
Value="{StaticResource DisabledOpacity}" />
<Setter Target="CheckGlyph.Opacity"
Value="{StaticResource DisabledOpacity}" />
<Setter Target="KeyboardAcceleratorTextBlock.Opacity"
Value="{StaticResource DisabledOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked" />

<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckGlyph.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="UncheckedWithIcon">
<VisualState.Setters>
<Setter Target="TextBlock.Margin"
Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility"
Value="Visible" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="CheckedWithIcon">
<VisualState.Setters>
<Setter Target="TextBlock.Margin"
Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility"
Value="Visible" />
<Setter Target="CheckGlyph.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Target="CommonStatesOverlay.Background"
Value="{ThemeResource OnSurfaceFocusedBrush}" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextBlock.Visibility"
Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid x:Name="AnimationRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{StaticResource MaterialFlyoutMenuItemRightMargin}" />
<ColumnDefinition Width="Auto"
MinWidth="16" />
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>

<Path x:Name="CheckGlyph"
Width="{StaticResource MaterialFlyoutMenuToggleCheckGlyphWidth}"
Height="{StaticResource MaterialFlyoutMenuToggleCheckGlyphHeight}"
VerticalAlignment="Center"
Margin="12,0"
Data="{StaticResource MaterialFlyoutCheckGlyphPathStyle}"
Fill="{ThemeResource OnSurfaceVariantBrush}"
Opacity="0"
Stretch="Uniform" />

<Viewbox x:Name="IconRoot"
Grid.Column="1"
Width="{StaticResource MaterialFlyoutMenuItemIconWidth}"
Height="{StaticResource MaterialFlyoutMenuItemIconHeight}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Visibility="Collapsed">
<ContentPresenter x:Name="IconContent"
Content="{TemplateBinding Icon}"
Foreground="{ThemeResource OnSurfaceVariantBrush}" />
</Viewbox>

<TextBlock x:Name="TextBlock"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource MaterialLabelLarge}"
Text="{TemplateBinding Text}" />

<!-- Mobile devices do not support keyboard shortcuts -->
<Grid Grid.Column="3"
android:Visibility="Collapsed"
ios:Visibility="Collapsed">
<TextBlock x:Name="KeyboardAcceleratorTextBlock"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource OnSurfaceVariantBrush}"
Style="{StaticResource MaterialLabelLarge}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
TextAlignment="Right"
Visibility="{Binding KeyboardAcceleratorTextOverride, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
</Grid>
</Grid>

<!-- Overlay -->
<Border x:Name="CommonStatesOverlay"
Background="Transparent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Material RadioMenuFlyoutItem Style -->
<Style x:Key="MaterialRadioMenuFlyoutItemStyle"
TargetType="muxc:RadioMenuFlyoutItem">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
<Setter Property="Height" Value="{StaticResource MaterialFlyoutMenuItemHeight}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template" Value="{StaticResource ToggleMenuFlyoutItemTemplate}" />
</Style>

<!-- Material MenuFlyoutSubItem Style -->
Expand Down Expand Up @@ -638,6 +633,10 @@
TargetType="ToggleMenuFlyoutItem"
BasedOn="{StaticResource MaterialToggleMenuFlyoutItemStyle}" />

<Style x:Key="MaterialDefaultRadioMenuFlyoutItemStyle"
TargetType="muxc:RadioMenuFlyoutItem"
BasedOn="{StaticResource MaterialRadioMenuFlyoutItemStyle}" />

<Style x:Key="MaterialDefaultMenuFlyoutSubItemStyle"
TargetType="MenuFlyoutSubItem"
BasedOn="{StaticResource MaterialMenuFlyoutSubItemStyle}" />
Expand Down
1 change: 1 addition & 0 deletions src/library/Uno.Material/Styles/Controls/v2/_Resources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<Style BasedOn="{StaticResource MaterialDefaultProgressBarStyle}" TargetType="muxc:ProgressBar" />
<Style BasedOn="{StaticResource MaterialDefaultProgressRingStyle}" TargetType="muxc:ProgressRing" />
<Style BasedOn="{StaticResource MaterialDefaultRadioButtonStyle}" TargetType="RadioButton" />
<Style BasedOn="{StaticResource MaterialDefaultRadioMenuFlyoutItemStyle}" TargetType="muxc:RadioMenuFlyoutItem" />
<Style BasedOn="{StaticResource MaterialDefaultRatingControlStyle}" TargetType="RatingControl" />
<Style BasedOn="{StaticResource MaterialDefaultRippleStyle}" TargetType="um:Ripple" />
<Style BasedOn="{StaticResource MaterialDefaultSliderStyle}" TargetType="Slider" />
Expand Down
Loading

0 comments on commit 22df529

Please sign in to comment.