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：

<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中应用此datatemplate设置此属性

ItemTemplate="{StaticResource MenuItemTemplate}"

请注意，可以修改datatemplate中定义的宽度和高度以适合您的menù大小。您可以定义自己的数据模板，但需要告诉应用程序如何显示图标

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中使用图标

2 个答案: