Wpf - Como incluir imágenes en un menú usando recursos incrustados

Este Pequeño apunte que muestra como añadir una imagen en un menú usando <Window.Resources>. El ejemplo que se expone a continuación muestra el menú Editar (cortar, copiar, pegar) con imágenes, y muestra la manera de incluirlas usando recursos incrustados en el código xaml.

Antes de empezar dos observaciones

• Las imágenes están en una carpeta del proyecto que se llama [ImagenesMenu]
• Cada imagen tiene asignadas las siguientes propiedades:
  • Acción de compilación: Resources
  • Copiar en el directorio de salida: No copiar

↑↑↑

Primera Opcion

El primer código xaml indica como incluir imágenes en un menú llamando directamente a las imágenes

<Window.Resources>        
        <Style x:Key="EstilosDelMenu" TargetType="Menu">
            <Setter Property="Background" Value="Coral" />
            <Setter Property="Foreground" Value="Navy" />
            <Setter Property="FontFamily" Value="Comic Sans MS" />
        </Style>
    </Window.Resources>

    <Grid>
        
        <DockPanel  Name="dockPanelMenu" 
                    Height="31" Width="Auto"  
                    HorizontalAlignment="Stretch" 
                    VerticalAlignment="Top" 
                    DockPanel.Dock="Top" 
                    LastChildFill="False">

            <Menu Name="MenuGeneral"
                  Height="23" Width="Auto"   
                  DockPanel.Dock="Top"
                  Style="{StaticResource EstilosDelMenu}">


                <MenuItem Header="_Editar" Name="MenuEditar">

                    <MenuItem Header="_Cortar" Name="MenuEditarCortar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/CutHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="C_opiar" Name="MenuEditarCopiar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/CopyHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="_Pegar"  Name="MenuEditarPegar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/PasteHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>

            </Menu>

        </DockPanel>

    </Grid>
</Window>

↑↑↑

Usando recursos

Este segundo modelo indica cómo usar los recursos para obtener el mismo resultado

<Window.Resources>
        
        <Style x:Key="EstilosDelMenu" TargetType="Menu">
            <Setter Property="Background" Value="Coral" />
            <Setter Property="Foreground" Value="Navy" />
            <Setter Property="FontFamily" Value="Comic Sans MS" />
        </Style>

        <BitmapImage x:Key="MenuEditarCortarImagen" CreateOptions="IgnoreImageCache" 
                     CacheOption="OnLoad" UriSource="ImagenesMenu\CutHs.png" />
        <BitmapImage x:Key="MenuEditarCopiarImagen" CreateOptions="IgnoreImageCache" 
                     CacheOption="OnLoad" UriSource="ImagenesMenu\CopyHs.png" />
        <BitmapImage x:Key="MenuEditarPegarImagen" CreateOptions="IgnoreImageCache" 
                     CacheOption="OnLoad" UriSource="ImagenesMenu\PasteHs.png  " />
    </Window.Resources>

    <Grid>        

        <DockPanel  Name="dockPanelMenu" 
                    Height="31" Width="Auto"  
                    HorizontalAlignment="Stretch" 
                    VerticalAlignment="Top" 
                    DockPanel.Dock="Top" 
                    LastChildFill="False">

            <Menu Name="MenuGeneral"
                  Height="23" Width="Auto"   
                  DockPanel.Dock="Top"
                  Style="{StaticResource EstilosDelMenu}">


                <MenuItem Header="_Editar" Name="MenuEditar">
                    <MenuItem Header="_Cortar" Name="MenuEditarCortar">
                        <MenuItem.Icon>
                             <Image Source="{DynamicResource MenuEditarCortarImagen} " />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="C_opiar" Name="MenuEditarCopiar">
                        <MenuItem.Icon>
                             <Image Source="{DynamicResource MenuEditarCopiarImagen} " />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="_Pegar"  Name="MenuEditarPegar">
                        <MenuItem.Icon>
                            <Image Source="{DynamicResource MenuEditarPegarImagen} " />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>

            </Menu>


        </DockPanel>

    </Grid>
</Window>

El resultado

↑↑↑

A.2.Enlaces

[Para saber mas]

Wpf - Incluir un Menú en un formulario

Creating Menus (with Drop-Down Sub-Menus) using Images in WPF

[Grupo de documentos]

[Documento Index]

[Documento Start]

[Imprimir el Documento]