feat: add MenuItem ToggleType support.

This commit is contained in:
Zhang Dian 2024-04-21 17:27:53 +08:00
parent 5036a53b7c
commit 3dff0ccad5
3 changed files with 59 additions and 6 deletions

View File

@ -25,14 +25,30 @@
<MenuItem Header="Submenu Level 2" />
</MenuItem>
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox">
<MenuItem Header="Menu Item with _Icon">
<MenuItem.Icon>
<TextBlock>😊</TextBlock>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
</MenuItem>
<MenuItem Header="_Second">
<MenuItem Header="Second _Menu Item" />
<MenuItem IsChecked="True" Header="Second Menu toggle item" ToggleType="CheckBox" />
<Separator />
<MenuItem GroupName="A" Header="Radio 1 - group" ToggleType="Radio" />
<MenuItem IsChecked="True" GroupName="A" Header="Radio 2 - group" ToggleType="Radio" />
<MenuItem GroupName="A" Header="Radio 3 - group" ToggleType="Radio">
<MenuItem Header="Radio 4 - group" ToggleType="Radio" GroupName="A" />
<MenuItem Header="Radio 5 - group" ToggleType="Radio" GroupName="A" />
</MenuItem>
<Separator />
<MenuItem Header="Radio 1" ToggleType="Radio" />
<MenuItem IsChecked="True" Header="Radio 2" ToggleType="Radio" />
<MenuItem Header="Radio 3" ToggleType="Radio">
<MenuItem Header="Radio 4" ToggleType="Radio" />
<MenuItem Header="Radio 5" ToggleType="Radio" />
</MenuItem>
</MenuItem>
<MenuItem Header="Parent">
<MenuItem Header="Child 1" />
@ -86,7 +102,7 @@
<MenuItem Header="Submenu _1" />
<MenuItem Header="Submenu _2" />
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox">
<MenuItem Header="Menu Item with _Icon">
<MenuItem.Icon>
<CheckBox
Padding="0"
@ -95,6 +111,7 @@
IsHitTestVisible="False" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
<MenuItem Header="Menu Item that won't close on click" StaysOpenOnClick="True" />
</ContextMenu>
</Border.ContextMenu>
@ -113,7 +130,7 @@
<MenuItem Header="Submenu _1" />
<MenuItem Header="Submenu _2" />
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox">
<MenuItem Header="Menu Item with _Icon">
<MenuItem.Icon>
<CheckBox
Padding="0"
@ -122,6 +139,7 @@
IsHitTestVisible="False" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
</MenuFlyout>
</Border.ContextFlyout>
<TextBlock Text="Right Click to show Context Flyout" />

View File

@ -120,14 +120,26 @@
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="ToggleIcon" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIcon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGT" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemChevron" />
</Grid.ColumnDefinitions>
<ContentControl
Name="PART_ToggleIconPresenter"
Grid.Column="0"
Width="16"
Height="16"
Margin="{DynamicResource MenuItemIconMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
IsVisible="False" />
<Viewbox
Name="PART_IconPresenter"
Grid.Column="1"
Width="16"
Height="16"
Margin="{DynamicResource MenuItemIconMargin}"
@ -143,14 +155,14 @@
<ContentPresenter
Name="PART_HeaderPresenter"
Grid.Column="1"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
RecognizesAccessKey="True" />
<TextBlock
x:Name="PART_InputGestureText"
Grid.Column="2"
Grid.Column="3"
Margin="{DynamicResource MenuItemInputGestureTextMargin}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
@ -159,7 +171,7 @@
Converter={StaticResource KeyGestureConverter}}" />
<PathIcon
Name="PART_ExpandIcon"
Grid.Column="3"
Grid.Column="4"
Width="8"
Height="8"
Margin="{DynamicResource MenuItemExpandIconMargin}"
@ -244,6 +256,27 @@
</ControlTemplate>
</Setter>
</Style>
<Style Selector="^:checked:toggle /template/ ContentControl#PART_ToggleIconPresenter">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Content">
<Template>
<PathIcon
Foreground="{Binding $parent[MenuItem].Foreground}"
Data="{StaticResource MenuCheckGlyph}" />
</Template>
</Setter>
</Style>
<Style Selector="^:checked:radio /template/ ContentControl#PART_ToggleIconPresenter">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Content">
<Template>
<Ellipse Fill="{Binding $parent[MenuItem].Foreground}"
Margin="4" Width="8" Height="8" />
</Template>
</Setter>
</Style>
</ControlTheme>
<ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">

View File

@ -2,6 +2,8 @@
<StreamGeometry x:Key="MenuScrollViewerUpButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</StreamGeometry>
<StreamGeometry x:Key="MenuScrollViewerDownButtonGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</StreamGeometry>
<StreamGeometry x:Key="MenuItemExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</StreamGeometry>
<StreamGeometry x:Key="MenuCheckGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</StreamGeometry>
<!-- MenuFlyout -->
<Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
<Thickness x:Key="MenuFlyoutPadding">8</Thickness>