如何将单选按钮添加到菜单项?
Posted
技术标签:
【中文标题】如何将单选按钮添加到菜单项?【英文标题】:How do You Add Radio Buttons To Menu Items? 【发布时间】:2013-02-05 10:45:48 【问题描述】:我想在我的菜单项中添加单选按钮。
我已经看到一些人们将单选按钮作为菜单项的答案。但我希望我的菜单项具有正确的单选按钮,可以在 Winforms
中轻松完成。
为确保我得到的答案与其他人不同,下面是菜单项单选按钮的外观图片:
顺便说一下,我使用的是 C#,WPF。
【问题讨论】:
你见过这个吗? ***.com/questions/6253145/… @Neil Mitchell:如果您需要支持其他主题,例如 Luna、Aero、Classic 等,可能需要为每个主题样式创建。每个主题都需要为每个主题携带一个样式。这适合你吗?我的意思是,最好专注于功能和单选按钮,至少为他制作一个通用的样式。然后,如果您需要能够使其适合您的风格。如果我或其他人会给你一个单一样式和单选按钮的解决方案,它会来找你吗? @AnatoliyNikolaev 这个问题只与样式有关 - 编写功能非常简单。我想要的是一种利用主题中已有内容的方法,而不是编写新的样式元素。可能是 WPF 没有为单选菜单按钮定义样式,或者我只是无法正确获取样式。当然,底层操作系统(不是 WPF)确实定义了单选菜单样式。 【参考方案1】:已编辑的模板
<Window.Resources>
<Style x:Key="x:Type MenuItem" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type MenuItem">
<Border x:Name="templateRoot" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="TemplateBinding Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="Center" Width="16"/>
<RadioButton Margin="3" IsChecked="TemplateBinding IsChecked" VerticalAlignment="Center" x:Name="Glyphpanel" Visibility="Collapsed"/>
<ContentPresenter ContentTemplate="TemplateBinding HeaderTemplate" Content="TemplateBinding Header" Grid.Column="1" ContentStringFormat="TemplateBinding HeaderStringFormat" ContentSource="Header" Margin="TemplateBinding Padding" RecognizesAccessKey="True" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="Binding IsSubmenuOpen, RelativeSource=RelativeSource TemplatedParent" PopupAnimation="DynamicResource x:Static SystemParameters.MenuPopupAnimationKey" Placement="Bottom">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="DynamicResource ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly=x:Type FrameworkElement">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="Binding Background, ElementName=SubMenuBorder" Height="Binding ActualHeight, ElementName=SubMenuBorder" Width="Binding ActualWidth, ElementName=SubMenuBorder"/>
</Canvas>
<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<Trigger Property="Icon" Value="x:Null">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Collapsed"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="Binding VerticalOffset, ElementName=SubMenuScrollViewer"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="Binding HorizontalOffset, ElementName=SubMenuScrollViewer"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ItemcontainerStyle" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type MenuItem">
<Border x:Name="templateRoot" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="TemplateBinding Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
<RadioButton x:Name="Glyph" IsChecked="TemplateBinding IsChecked" GroupName="a" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="TemplateBinding HeaderTemplate" Content="TemplateBinding Header" Grid.Column="2" ContentStringFormat="TemplateBinding HeaderStringFormat" ContentSource="Header" HorizontalAlignment="Left" Margin="TemplateBinding Padding" RecognizesAccessKey="True" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="Center"/>
<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="TemplateBinding Padding" Opacity="0.7" Text="TemplateBinding InputGestureText" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="x:Null">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger SourceName="Glyph" Property="IsChecked" Value="False">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Hidden"/>
<Setter Property="Visibility" TargetName="Glyph" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True"/>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
MainWindow.xaml:
<Menu>
<MenuItem Header="File" ItemContainerStyle="StaticResource ItemcontainerStyle">
<MenuItem IsCheckable="True" Header="Example Menu Item"/>
<MenuItem IsCheckable="True" Header="Example Menu Item"/>
</MenuItem>
</Menu>
App.xaml
<Application x:Class="MenuItemTemplate.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!--Luna-->
<ResourceDictionary Source="/PresentationFramework.Luna, Version=3.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35,
ProcessorArchitecture=MSIL;component/themes/luna.normalcolor.xaml" />
<!--Aero-->
<!--<ResourceDictionary Source="/PresentationFramework.Aero, Version=3.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35,
ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml"/>-->
<!--Classic-->
<!--<ResourceDictionary Source="/PresentationFramework.Classic, Version=3.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35,
ProcessorArchitecture=MSIL;component/themes/classic.xaml" />-->
</Application.Resources>
输出
【讨论】:
感谢您的信息。 点击菜单几次后,需要点击两次才能选择未选中的菜单项。【参考方案2】:您可以通过更改控件的模板属性来更改控件的外观:
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<RadioButton>Radio</RadioButton>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
编辑:使用 RadioButton 作为 MenuItem-Icon,以获得图片中显示的外观:
<MenuItem Header="Hallo">
<MenuItem.Icon>
<RadioButton/>
</MenuItem.Icon>
</MenuItem>
【讨论】:
我曾经编写过您所拥有的代码,但它正在制作一个单选按钮,而不是在菜单项文本的右侧有一个带有圆圈的方形框。能否请您提供一些代码,使相同的单选按钮在正方形中有一个圆圈,如我的图片所示?以上是关于如何将单选按钮添加到菜单项?的主要内容,如果未能解决你的问题,请参考以下文章