使用MahApps图标与ContextMenu

Question

我正在使用MahApps Metro UI工具包编写WPF应用程序。

http://mahapps.com/guides/quick-start.html

根据他们网站上的指南，我基本完成了我的应用程序并且看起来非常流畅。唯一的问题是我无法找到如何使用他们提供的图标包作为上下文菜单图标。

这是我想要实现的可视化示例。虽然我能够使原始的“Windows”菜单项显示其图标，但我无法为上下文菜单(menuitems)做到同样的效果。我是否做错了什么或者有其他方法来解决这个问题？

这是我的.xaml文件：

<Menu IsMainMenu="True">
    <MenuItem Header="_Windows" ContextMenuService.IsEnabled="False" Click="WindowsMenuItem_Click">
        <MenuItem.Icon>
            <Rectangle Width="15" Height="15" Fill="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_window}" />
                </Rectangle.OpacityMask>
            </Rectangle>
        </MenuItem.Icon>
        <MenuItem.ContextMenu>
            <ContextMenu>
                <MenuItem Header="_Welcome Module">
                    <MenuItem.Icon>
                        <Rectangle Width="15" Height="15" Fill="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=Foreground}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_home}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Schedule Module">
                    <MenuItem.Icon>
                        <Rectangle Width="15" Height="15" Fill="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=Foreground}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_calendar}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Performance Module">
                    <MenuItem.Icon>
                        <Rectangle Width="15" Height="15" Fill="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=Foreground}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_table}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Audit Module">
                    <MenuItem.Icon>
                        <Rectangle Width="15" Height="15" Fill="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=Foreground}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_graph_line}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </MenuItem.Icon>
                </MenuItem>
            </ContextMenu>
        </MenuItem.ContextMenu>
    </MenuItem>
</Menu>

而我的.xaml.cs文件：

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainWindowViewModel();
    }

    private void WindowsMenuItem_Click(object sender, RoutedEventArgs e)
    {
        (sender as MenuItem).ContextMenu.IsEnabled = true;
        (sender as MenuItem).ContextMenu.PlacementTarget = (sender as MenuItem);
        (sender as MenuItem).ContextMenu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
        (sender as MenuItem).ContextMenu.IsOpen = true;
    }
}

- arazzy

Answer 1

我使用以下代码使得它在我的应用中工作起来了：

<Window.Resources>
   <ResourceDictionary>
      <VisualBrush x:Key="RunAllTestsIcon" Visual="{StaticResource appbar_list_check}"/>
   </ResourceDictionary>
</Window.Resources>
... 
<ContextMenu StaysOpen="True">
   <MenuItem Header="RunAllTests">
      <MenuItem.Icon>
         <Rectangle Width="22" Height="22" Fill="{StaticResource RunAllTestsIcon}"/>
      </MenuItem.Icon>
   </MenuItem>
</ContextMenu>

- riqitang

Answer 2

我通过直接使用矢量图标而无需嵌入图像或更改资源文件的方式使其正常工作。

<MenuItem Header="_Reload Data" Click="alleTaken22_Click">
    <MenuItem.Icon>

        <Viewbox Width="22" Height="22">
            <Canvas Width="24" Height="24">
                <Path Data="M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z" Fill="#FFFFFF" />
            </Canvas>
        </Viewbox>

    </MenuItem.Icon>
</MenuItem>

这个向量图标来自materialdesignicons.com。您可以选择一个图标并直接从那里获取XAML的Path。

- VDWWD

Answer 3

使用最新的MahApps IconPacks，您可以轻松地执行以下操作：

xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
    

<MenuItem.Icon>
   <iconPacks:PackIconForkAwesome Kind="Calendar" Width="20" Height="20"/>
</MenuItem.Icon>

- pmilin