Wpf – MenuItem con radio button

Descripción general

Pequeño apunte que indica como simular un menú con botones radio y que se comporte (mas o menos) como se espera que se comporte ese menú

[TOC] Tabla de Contenidos


↑↑↑

Descripción del problema

He escrito un programa que ordena imágenes, y necesitaba un menú con botones radio para seleccionar el tipo de ordenación (ascendente, descendente, por nombre, por fecha, etc.)

El Resultado final es el siguiente

Falta el texto Alt de la imagen

En WPF no existe esa posibilidad por lo que hay que recurrir a la composición de controles, después de dar vueltas, he dado con una solución que resuelve mi problema pero que quizás no es la mas eficiente porque, entre otras cosas, ajusta el aspecto visual usándola propiedad "Margin", pero que le vamos a hacer, … funciona y a mí me vale :-)


↑↑↑

Opciones del Menú

Cada una de las opciones de menú se define de la siguiente manera

<MenuItem>
   <MenuItem.Template>
       <ControlTemplate>
           <RadioButton  x:Name="MenuOrdenarPorAscendente" 
                         Content="Ascendente" 
                         Style="{StaticResource GroupStyleOrdenarAscendente}"
                         Checked="RadioButtonAscendente_Checked"  />
       </ControlTemplate>
  </MenuItem.Template>
</MenuItem>

Y observa que:


↑↑↑

Estilo asociado

El estilo asociado a esta opción de menú (en realidad al RadioButton) es el siguiente:

<MenuItem.Resources>
   <Style x:Key="GroupStyleOrdenarAscendente" TargetType="{x:Type RadioButton}">
       <Setter Property="Height" Value="17" />
       <Setter Property="Width" Value="150" />
       <Setter Property="Margin" Value="12,0,0,0" />
       <Setter Property="HorizontalAlignment" Value="Center" />
       <Setter Property="VerticalAlignment" Value="Center" />
       <Setter Property="GroupName" Value="OptionGroupAscendente" />
       <Setter Property="IsHitTestVisible" Value="true" />
   </Style>
</MenuItem.Resources>

Y observa que:


↑↑↑

Controlador de eventos del RadioButton

Por último, un ejemplo del controlador de eventos del RadioButton

   Private Sub RadioButtonOrdenacionPor_Checked(sender As Object, e As RoutedEventArgs)
        Dim li As RadioButton = CType(sender, RadioButton)
        If li Is Nothing Then Exit Sub
        Debug.WriteLine(String.Format("Pulsado menu [{0}] - [{1}]",
                                      li.Content.ToString(),
                                      li.Name))
    End Sub

Y eso es todo.


↑↑↑

Apendice

Código Xaml, completo de la opción del menú mostrado en la imagen

<!-- Linea cero MENU -->
<DockPanel Grid.Row="0"  x:Name="dockPanelMenu" 
         Height="23" Width="Auto"  
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Top" 
         DockPanel.Dock="Top" 
         LastChildFill="False" Background="Red">

    <Menu x:Name="MenuGeneral"
          Height="23" Width="Auto"   
          DockPanel.Dock="Top">

        <Menu.Background>
            <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                <GradientStop Color="#FF79F1D6" Offset="0.565"/>
                <GradientStop Color="#FFCAF3D2" Offset="0.001"/>
            </LinearGradientBrush>
        </Menu.Background>

        <MenuItem Header="Miniaturas" x:Name="MenuVentanaMiniatruras" >
            <MenuItem.Resources>
                <Style x:Key="GroupStyleMiniaturas" TargetType="{x:Type RadioButton}">
                    <Setter Property="Margin" Value="12,0,0,0" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="GroupName" Value="OptionGroupMiniaturas" />
                    <Setter Property="IsHitTestVisible" Value="true" />
                    <Setter Property="Height" Value="17" />
                    <Setter Property="Width" Value="150" />
                </Style>
            </MenuItem.Resources>

            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton x:Name="Tamaño01" 
                                     Content="Tamaño 1 (084 x 084)" 
                                     Style="{StaticResource GroupStyleMiniaturas}" 
                                     Checked="RadioButtonMiniaturas_Checked"  
                                     IsChecked="True"/>
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="Tamaño02" 
                                      Content="Tamaño 2 (126 x 126)" 
                                      Style="{StaticResource GroupStyleMiniaturas}" 
                                      Checked="RadioButtonMiniaturas_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="Tamaño03" 
                                      Content="Tamaño 3 (168 x 168)" 
                                      Style="{StaticResource GroupStyleMiniaturas}" 
                                      Checked="RadioButtonMiniaturas_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="Tamaño04" 
                                      Content="Tamaño 4 (250 x 250)" 
                                      Style="{StaticResource GroupStyleMiniaturas}"  
                                      Checked="RadioButtonMiniaturas_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="Tamaño05" 
                                      Content="Tamaño 5 (384 x 384)" 
                                      Style="{StaticResource GroupStyleMiniaturas}"  
                                      Checked="RadioButtonMiniaturas_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="Tamaño06" 
                                      Content="Tamaño 6 (512 x 512)" 
                                      Style="{StaticResource GroupStyleMiniaturas}"                                               
                                      Checked="RadioButtonMiniaturas_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
                    
        </MenuItem>



        <MenuItem Header="Ordenar por" x:Name="MenuOrdenarPor">
            <MenuItem.Resources>
                <Style x:Key="GroupStyleOrdenarAscendente" TargetType="{x:Type RadioButton}">
                    <Setter Property="Height" Value="17" />
                    <Setter Property="Width" Value="150" />
                    <Setter Property="Margin" Value="12,0,0,0" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                    <Setter Property="GroupName" Value="OptionGroupAscendente" />
                    <Setter Property="IsHitTestVisible" Value="true" />
                </Style>
                        
                <Style x:Key="GroupStyleOrdenacionPor" TargetType="{x:Type RadioButton}">
                    <Setter Property="Margin" Value="12,0,0,0" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="GroupName" Value="OptionGroupOrdenacionPor" />
                    <Setter Property="IsHitTestVisible" Value="true" />
                    <Setter Property="Height" Value="17" />
                    <Setter Property="Width" Value="150" />
                </Style>

            </MenuItem.Resources>

            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorAscendente" 
                                      Content="Ascendente" 
                                      Style="{StaticResource GroupStyleOrdenarAscendente}"                                               
                                      Checked="RadioButtonAscendente_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorDescendente" 
                                      Content="Descendente" 
                                      Style="{StaticResource GroupStyleOrdenarAscendente}"                                               
                                      Checked="RadioButtonAscendente_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>

            <Separator />
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorNombreArchivo" 
                                      Content="Nombre de archivo" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorExtension" 
                                      Content="Extensión" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorFechaHoraToma" 
                                      Content="Fecha hora de toma" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorModeloDeCamara" 
                                      Content="Modelo de la cámara"
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorFabricanteDeCamara" 
                                      Content="Fabricante de la cámara"
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorFabricanteModeloDeCamara" 
                                      Content="Fabricante Modelo de cámara" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorObjetivo" 
                                      Content="Objetivo"   
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorVelocidadISO" 
                                      Content="Velocidad ISO" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorVelocidadObturador" 
                                      Content="Velocidad obturador"
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorValorApertura" 
                                      Content="Valor apertura"
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
            <MenuItem >
                <MenuItem.Template>
                    <ControlTemplate>
                        <RadioButton  x:Name="MenuOrdenarPorDistanciaFocal" 
                                      Content="Distancia focal" 
                                      Style="{StaticResource GroupStyleOrdenacionPor}"                                               
                                      Checked="RadioButtonOrdenacionPor_Checked"  />
                    </ControlTemplate>
                </MenuItem.Template>
            </MenuItem>
        </MenuItem>

    </Menu>
</DockPanel>

↑↑↑

A.2.Enlaces

[Para saber mas]
[Grupo de documentos]
[Documento Index]
[Documento Start]
[Imprimir el Documento]
© 1997 - - La Güeb de Joaquín
Joaquín Medina Serrano
Ésta página es española

Codificación
Fecha de creación
Última actualización
[HTML5 Desarrollado usando CSS3]