A modo de introducción
Me gustaría añadir botones de selección para mis elementos de menú
Quiero hacer algo como esto
Un menu con Radio Buttons
El control Menú permite activar un "Check" en cada opción de menú, pero no se puede hacer funcionar como un RadioButton y que además funciones como se espera que funcione un grupo de RadioButtons ( aunque estén formando parte de un menú)
He buscado por internet y he encontrado varias soluciones, y la que más me ha gustado es la que he copiado y pegado y que muestro a continuación.
- How do You Add Radio Buttons To Menu Items?
- http://stackoverflow.com/questions/14979753/how-do-you-add-radio-buttons-to-menu-items
He copiado tanto que hasta he copiado la imagen que muestra cómo funciona el control.:-)
Código Xaml
<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>
Para usarlo nada mas sencillo:
<Menu> <MenuItem Header="File" ItemContainerStyle="{StaticResource ItemcontainerStyle}"> <MenuItem IsCheckable="True" Header="Example Menu Item"/> <MenuItem IsCheckable="True" Header="Example Menu Item"/> </MenuItem> </Menu>
![[HTML5 Desarrollado usando CSS3]](http://www.w3.org/html/logo/badge/html5-badge-h-css3.png "[HTML5 Desarrollado con CSS3 / usando CSS3 ] CSS3: se utilizan las últimas caracterísiticas de estilo mejorando el diseño de las aplicaciones. También se incluyen tecnologías como Web Open Font Format (WOFF) para controlar las tipografías utilizadas en la web."){kind=icon}