如何将单选按钮添加到菜单项?

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>

【讨论】:

我曾经编写过您所拥有的代码,但它正在制作一个单选按钮,而不是在菜单项文本的右侧有一个带有圆圈的方形框。能否请您提供一些代码,使相同的单选按钮在正方形中有一个圆圈,如我的图片所示?

以上是关于如何将单选按钮添加到菜单项?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 xampp 将单选按钮值提交到数据库

将单选按钮从一个 PHP 表单添加到另一个 PHP 表单

Android Studio:将单选按钮字符串添加到数据库

将单选按钮关联到各个组

Anylogic:如何将单选按钮链接到 double 类型的变量?

将单选按钮数据发送到下一个活动