如何在mahapp的HamburgerMenu中添加MaterialDesignInXaml图标？

Question

我正在尝试将 HamburgerMenu 项的图标设置为 MaterialDesignInXaml 的 PackIcon 中可用的图标，我目前所做的是：

 <Grid.Resources>
        <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type materialDesign:PackIcon}">
            <Grid Height="48">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"
                           Foreground="White" Text="{Binding Kind}" />
                <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" 
                           Foreground="White" Text="{Binding Label}" />
            </Grid>
        </DataTemplate>
    </Grid.Resources>

我在 Grid 资源中定义了一个 MenuItemTemplate，使用 DataType materialDesign 的 PackIcon 这样定义的：

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

然后，我尝试在项目上应用图标：

 <Controls:HamburgerMenu.ItemsSource>
            <Controls:HamburgerMenuItemCollection>
                <Controls:HamburgerMenuGlyphItem  Glyph="?" Label="General">
                    <Controls:HamburgerMenuGlyphItem.Tag>
                        <Settings:view/>
                    </Controls:HamburgerMenuGlyphItem.Tag>
                </Controls:HamburgerMenuGlyphItem>

我应该得到 Kind 属性而不是 Glyph，我做错了什么？

Answer 1

您使用了错误的助手 class HamburgerMenuGlyphItem 其中 Glyph 属性是字符串而不是对象。

如果你想使用任何额外的对象来显示在MenuItem处，那么你可以使用HamburgerMenuIconItem。这有一个属性 Icon 类型 object.

<DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type controls:HamburgerMenuIconItem}">
    <Grid x:Name="RootGrid"
          Height="48"
          Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!-- This ContentControl binds to the Icon property which contains a PackIconXYZ control -->
        <ContentControl Grid.Column="0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Content="{Binding Icon}"
                        Focusable="False" />
        <TextBlock Grid.Column="1"
                   VerticalAlignment="Center"
                   FontSize="16"
                   Text="{Binding Label}" />
    </Grid>
</DataTemplate>

你可以看到这个DataTemplate 可以显示任何对象，如 PackIcon。我在此示例中使用了 MahApps.Metro.IconPacks 库，其中还包含此类 MarkupExtensions {iconPacks:Material Kind=Home}.

<controls:HamburgerMenu x:Name="HamburgerMenuControl"
                        DisplayMode="CompactInline"
                        IsPaneOpen="True"
                        ItemTemplate="{StaticResource MenuItemTemplate}"
                        OptionsItemTemplate="{StaticResource MenuItemTemplate}"
                        PaneForeground="White"
                        PaneBackground="#FF444444">

    <!--  Items  -->
    <controls:HamburgerMenu.ItemsSource>
        <controls:HamburgerMenuItemCollection>
            <controls:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Home}"
                                               Label="Home">
                <controls:HamburgerMenuIconItem.Tag>
                    <views:HomeView />
                </controls:HamburgerMenuIconItem.Tag>
            </controls:HamburgerMenuIconItem>


            <controls:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=AccountCircle}"
                                               Label="Private">
                <controls:HamburgerMenuIconItem.Tag>
                    <views:PrivateView />
                </controls:HamburgerMenuIconItem.Tag>
            </controls:HamburgerMenuIconItem>


            <controls:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Settings}"
                                               Label="Settings">
                <controls:HamburgerMenuIconItem.Tag>
                    <views:SettingsView />
                </controls:HamburgerMenuIconItem.Tag>
            </controls:HamburgerMenuIconItem>
        </controls:HamburgerMenuItemCollection>
    </controls:HamburgerMenu.ItemsSource>


    <!--  Options  -->
    <controls:HamburgerMenu.OptionsItemsSource>
        <controls:HamburgerMenuItemCollection>
            <controls:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Help}" Label="About">
                <controls:HamburgerMenuIconItem.Tag>
                    <views:AboutView />
                </controls:HamburgerMenuIconItem.Tag>
            </controls:HamburgerMenuIconItem>
        </controls:HamburgerMenuItemCollection>
    </controls:HamburgerMenu.OptionsItemsSource>

    <!--  Content template  -->
    <controls:HamburgerMenu.ContentTemplate>
        <DataTemplate DataType="{x:Type controls:HamburgerMenuItem}">
            <Grid x:Name="TheContentGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="48" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Grid.Row="0" Background="#FF444444">
                    <TextBlock x:Name="Header"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="24"
                               Foreground="White"
                               Text="{Binding Label}" />
                </Border>
                <ContentControl x:Name="TheContent"
                                Grid.Row="1"
                                Content="{Binding Tag}"
                                Focusable="False"
                                Foreground="{DynamicResource BlackBrush}" />
            </Grid>
        </DataTemplate>
    </controls:HamburgerMenu.ContentTemplate>

</controls:HamburgerMenu>

此示例也可以在 GitHub 上找到。

希望对您有所帮助！

如何在mahapp的HamburgerMenu中添加MaterialDesignInXaml图标？

How to add MaterialDesignInXaml icon to HamburgerMenu of mahapp?

c#

wpf

xaml

material-design

mahapps.metro