que - visual studio wpf

¿Cómo hago Custom MenuHeaders en WPF con aceleradores?

Question

Me gustaría hacer algunos MenuHeaders personalizados en WPF para poder tener (por ejemplo) un icono y texto en un elemento del menú.

Normalmente, si utiliza MenuItems, si completa el campo Encabezado con texto directo, puede agregar un acelerador con un guión bajo. por ejemplo, _File

Sin embargo, si quisiera poner UserControl, creo que esta función se romperá, ¿cómo haré algo similar a lo siguiente?

<Menu>
<MenuItem>
    <MenuItem.Header>
    <UserControl>
        <Image Source="..." />
        <Label Text="_Open" />
    </UserControl>
    </MenuItem.Header>
</MenuItem>
...

Answer 1

@ a7an: Ah, no he notado la propiedad Icon antes. Ese es un buen comienzo.

Sin embargo, específicamente quería agregar un ''botón'' extra a algunos artículos de menú para poder tener una característica ''Pin'' (vea la lista de documentos recientemente cargados en Office 2007 para la idea de función).

Como también debe haber un código, ¿tendré probablemente que subclasificar el control y agregar el código para el botón? (¡Sin miedo a meterme con la plantilla de MenuItem, ya tuve que hacerlo una vez y lo volvería a hacer si tuviera que hacerlo!;))

Answer 2

Creo que la propiedad Icon se adapta a tus necesidades.
Sin embargo, para responder a la pregunta original, es posible conservar la funcionalidad de Accelerator cuando compone el contenido de su elemento de menú. Si ha anidado contenido en un elemento de menú, debe definir la propiedad de texto de acceso de manera explícita, como en el primero a continuación. Cuando utilizas la forma en línea, esto se soluciona de forma automática.

 <Menu> 
   <MenuItem>
      <MenuItem.Header>
        <StackPanel Orientation="Horizontal">
          <Image Source="Images/Open.ico" />      
          <AccessText>_Open..</AccessText>
        </StackPanel>
      </MenuItem.Header>
    </MenuItem>
    <MenuItem Header="_Close" />
   </Menu>

Answer 3

El problema es que colocaste la imagen dentro del contenido del MenuHeader, lo que significa que perderás la tecla del acelerador. Si solo intentas tener una imagen en el encabezado del menú, haz lo siguiente.

<MenuItem Header="_Open">
  <MenuItem.Icon>
    <Image Source="images/Open.png"/>
  </MenuItem.Icon>
</MenuItem>

Si desea personalizar el aspecto y la sensación aún más, modifique la plantilla de control y el estilo del menú. Por experiencia, diseñar los menús y los elementos de menú es mucho más difícil que diseñar los otros controles WPF.

Answer 4

Primero, pensaría que la propiedad Icon solo puede contener una imagen. ¡Pero en realidad puede contener cualquier cosa! Descubrí esto por accidente cuando programé establecer la propiedad de la Imagen directamente a una cadena con la ruta a una imagen. El resultado fue que no mostró la imagen, ¡sino el texto real de la ruta! Luego descubrí que primero tenía que crear un elemento de imagen y establecerlo en la propiedad Icono. Esto me llevó a pensar que la propiedad de la imagen era cualquier contenedor de contenido que se encuentra en el área de iconos a la izquierda en el menú, y yo tenía razón. Traté de poner un botón allí, ¡y funcionó!

Esto muestra un botón con el texto "i" en el área del ícono del menú. Al hacer clic en el botón, se desencadena el evento Button_Click (el LanguageMenu_Click NO se activa al hacer clic en el botón).

<MenuItem Name="LanguageMenu" Header="_Language" Click="LanguageMenu_Click">
  <MenuItem.Icon>
    <Button Click="Button_Click">i</Button>
  </MenuItem.Icon>
</MenuItem>

Esto lleva a una alternativa para no tener que hacer una imagen para el icono, sino que usa texto con una fuente de símbolo para mostrar un simple "icono". El siguiente ejemplo usa la fuente Wingdings que contiene un símbolo floppydisk. Este símbolo en la fuente está mapeado al charachter < , que tiene un significado especial en XAML, por lo que debemos usar la versión codificada < en lugar. Esto funciona como un sueño! A continuación, se muestra un símbolo floppydisk como un ícono en el elemento del menú:

<MenuItem Name="mnuFileSave" Header="Save" Command="ApplicationCommands.Save">
  <MenuItem.Icon>
    <Label VerticalAlignment="Center" HorizontalAlignment="Center" 
           FontFamily="Wingdings">&lt;</Label>
  </MenuItem.Icon>                
</MenuItem>