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
• Opciones del Menú
• Estilo asociado
• Controlador de eventos del RadioButton
• Apendice

↑↑↑

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

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:

• Se define el nombre para él [RadioButton], NO para él [MenuItem].
• Que Hay un estilo asociado que contiene los parámetros de la representación grafica del [RadioButton].
• Que hay un evento [Checked] asociado que indica que se hace cuando se pulsa esta opción de menú

↑↑↑

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:

• El estilo tiene un nombre [GroupStyleOrdenarAscendente] y un control objetivo [{x:Type RadioButton}]
• Las propiedades establecidas tienen valores que me interesan para que el texto se ajuste como a mí me interesa, por ejemplo, la altura [Height=17], porque así quedan separados de una forma que a mí me parece adecuada
• El mismo razonamiento se puede aplicar a [Width] pero en este caso para el espacio a la derecha del texto, entre el texto y el borde derecho del menú
• El caso de [Margin] es especial, ese valor esta dado para que el texto este detrás de esa línea vertical finita que aparece entre el botón y el texto, es decir, esta ajustado a "pedal"
• Sobre [HorizontalAlignment] y [VerticalAlignment] no hay nada que comentar
• Como ya sabrás, para agrupar varios RadioButtons hay que emplear la propiedad [GroupName]. Esta afirmación implica que hay que definir una propiedad [GroupName] por cada bloque de RadioButtons. Si te fijas en la imagen del principio, veras que hay dos grupos de RadioButtons diferentes, es decir he tenido que definir dos propiedades [GroupName] diferentes, y como resulta que esta propiedad esta dentro de un estilo, eso quiere decir que hay que definir tantos estilos diferentes como bloques de RadioButtons tengamos.
• Una Observación. Supongo que esto se podrá hacer de alguna otra forma, pero no he tenido tiempo de investigar demasiado.
• Por último la propiedad [IsHitTestVisible] tiene que tener el valor True, porque si no este asunto no funciona. ¿Por qué? Pues no lo sé, he leído la documentación y no me he acarado nada de nada, pero la realidad es que si le cambias el valor el RadioButton no funciona.

↑↑↑

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]