How to use icon in mahapps hamburger menu XAML

问题

How do I use Entypo icon in mahapps hamburger menu? I've tried many ways but nothing works. Below is my xaml code:

<controls:HamburgerMenu.ItemsSource>
   <controls:HamburgerMenuItemCollection>
      <controls:HamburgerMenuIconItem Icon="{iconPacks:PackIconEntypo Kind=Users}" Label="Accounts">
         <controls:HamburgerMenuIconItem.Tag>
             <views:AccountsView/>
         </controls:HamburgerMenuIconItem.Tag>
      </controls:HamburgerMenuIconItem>
   </controls:HamburgerMenuItemCollection>
</controls:HamburgerMenu.ItemsSource>

回答1:

You need to define a datatemplate :

<DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type controls:HamburgerMenuIconItem}">
   <Grid Height="64">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="64" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
   <Grid Grid.Column="0">
        <Viewbox ToolTip="{Binding Label}" Width="32" Height="32" >
            <Viewbox.Child>
                <ContentControl Content="{Binding Path=Icon}"></ContentControl>
             </Viewbox.Child>
        </Viewbox>
    </Grid>
    <TextBlock Grid.Column="1"
               VerticalAlignment="Center"
               FontSize="16"
               Foreground="White"
               Text="{Binding Label}" />
        </Grid>
</DataTemplate>

Then apply this datatemplate setting this property in your HamburgerMenu

ItemTemplate="{StaticResource MenuItemTemplate}"

Please mind that the widths and heights defined in the datatemplate can be modified to fit your menù size. You can define your own datatemplate, but you need to tell your application where how to display the Icon

回答2:

Here is a full example with DataTemplate & ItemSource:

<mah:HamburgerMenu
    ItemTemplate="{StaticResource MenuItemTemplate}"
    OptionsItemTemplate="{StaticResource MenuItemTemplate}">

    <!--  Content  -->
    <mah:HamburgerMenu.ContentTemplate>
        <DataTemplate DataType="{x:Type mah:HamburgerMenuItem}">
            <Grid>
                <ContentControl
                    Content="{Binding Tag}"
                    Focusable="False"
                    Foreground="Black" />
            </Grid>
        </DataTemplate>
    </mah:HamburgerMenu.ContentTemplate>

    <!--  Options  -->
    <mah:HamburgerMenu.OptionsItemsSource>
        <mah:HamburgerMenuItemCollection>
            <mah:HamburgerMenuIconItem Label="Option 1">
                <mah:HamburgerMenuIconItem.Icon>
                    <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </mah:HamburgerMenuIconItem.Icon>
                <mah:HamburgerMenuIconItem.Tag>
                    <TextBlock>Option 1</TextBlockl>
                </mah:HamburgerMenuIconItem.Tag>
            </mah:HamburgerMenuIconItem>
        </mah:HamburgerMenuItemCollection>
    </mah:HamburgerMenu.OptionsItemsSource>

    <!--  Items  -->
    <mah:HamburgerMenu.ItemsSource>
        <mah:HamburgerMenuItemCollection>
            <mah:HamburgerMenuIconItem Label="Item 1">
                <mah:HamburgerMenuIconItem.Icon>
                    <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </mah:HamburgerMenuIconItem.Icon>
                <mah:HamburgerMenuIconItem.Tag>
                    <TextBlock>Item 1</TextBlockl>
                </mah:HamburgerMenuIconItem.Tag>
            </mah:HamburgerMenuIconItem>
        </mah:HamburgerMenuItemCollection>
    </mah:HamburgerMenu.ItemsSource>
</mah:HamburgerMenu>

来源：https://stackoverflow.com/questions/47243061/how-to-use-icon-in-mahapps-hamburger-menu-xaml

标签

wpf

xaml

mahapps.metro