通过ContextMenu使用MahApps图标 [英] Using MahApps Icons with ContextMenu

问题描述

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

以下是我要执行的操作的直观示例。虽然我可以获取原始的 Windows菜单项来显示其图标，但是我无法对上下文菜单菜单项执行相同的操作。我在做错什么还是解决这个问题的方法吗？

这是我的.xaml：

 < Menu IsMainMenu = True> 
< MenuItem Header = _ Windows ContextMenuService.IsEnabled = False单击= 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 =填充 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 =填充 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 =填充 Visual = {StaticResource appbar_graph_line} /> 
< /Rectangle.OpacityMask> 
< / Rectangle> 
< /MenuItem.Icon> 
< / MenuItem> 
< / ContextMenu> 
< /MenuItem.ContextMenu> 
< / MenuItem> 
< / Menu> 
  

和我的.xaml.cs：

 公共局部类MainWindow 
 {
 public MainWindow（）
 {
 InitializeComponent（）; 
 DataContext = new MainWindowViewModel（）; 
} 
 
 private void WindowsMenuItem_Click（对象发送者，RoutedEventArgs e）
 {
（发送者作为MenuItem）。ContextMenu.IsEnabled= true; 
（发送方为MenuItem）.ContextMenu.PlacementTarget =（发送方为MenuItem）; 
（发送者作为MenuItem）.ContextMenu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom; 
（发送者为MenuItem）.ContextMenu.IsOpen = true; 
} 
} 
  

解决方案

I使用以下命令在我的应用程序中使用它：

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

I am writing a WPF application using the MahApps Metro UI toolkit.

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

From the guide on their website, I have basically finished my application and it looks slick. The only issue I have is I have not been able to find out how to use the icon packs they provide as contextmenu icons.

Here's an visual example of what I'm trying to do. While I was able to get the original "Windows" menu item to display it's icon, I am unable to do the same for the contextmenu menuitems. Is there something I am doing wrong or a way to work around this?

Here's my .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>

And my .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;
    }
}

解决方案

I got it to work in my application using:

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

这篇关于通过ContextMenu使用MahApps图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！