如何在 mahapps 汉堡菜单中使用图标 XAML

Question

如何在 mahapps 汉堡菜单中使用 Entypo 图标？我尝试了很多方法，但没有任何效果。下面是我的 xaml 代码：

<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>

Answer 1

您需要定义一个数据模板：

<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>

然后在您的 HamburgerMenu

中应用此数据模板设置属性

ItemTemplate="{StaticResource MenuItemTemplate}"

请注意，可以修改数据模板中定义的宽度和高度以适合您的菜单尺寸。你可以定义你自己的数据模板，但是你需要告诉你的应用程序在哪里显示图标

Answer 2

这是一个完整的 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>

如何在 mahapps 汉堡菜单中使用图标 XAML

How to use icon in mahapps hamburger menu XAML

wpf

xaml

mahapps.metro