Question

我尝试将HamburgerMenu项目的图标设置为PackIcon的{{1}}中可用的图标，这是我到目前为止所做的：

MaterialDesignInXaml

我已在<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>资源中定义MenuItemTemplate，使用Grid 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，我做错了什么？

Answer 1

您使用错误的帮助程序类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上找到。

希望这有帮助！

如何将MaterialDesignInXaml图标添加到mahapp的HamburgerMenu？

1 个答案: