用WPF 实现VS2017的深色调菜单样式

效果

 

样式文件

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:convert="clr-namespace:Wpf.WpfConverter"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type ContextMenu}">
        <Setter Property="Foreground" Value="#E0F0F0F0" />
        <Setter Property="FontFamily" Value="微软雅黑" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContextMenu}">
                    <Border BorderBrush="#FF444444" 
                                BorderThickness ="1,1,1,1" 
                                Background="#FF1B1B1C" 
                                Opacity="1">
                        <ItemsPresenter Margin="2,2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}"
       TargetType="{x:Type Separator}">
        <Setter Property="Height" Value="1" />
        <Setter Property="Margin" Value="28,2,0,2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Separator}">
                    <Rectangle Width="{TemplateBinding Width}" 
                                   Height="2" 
                                   Fill="#FF434347"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="ChildItem" MinWidth="120">
                        <Grid Height="22">
                            <Grid.ColumnDefinitions>
                                <!--图标部分-->
                                <ColumnDefinition Width="24"/>
                                <!--文字部分-->
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <!--图标部分 要搞成画刷-->
                            <Rectangle Fill="{TemplateBinding Icon}" Margin="0,-1" Height="16" Width="16"></Rectangle>
                            <!--IsChecked 状态勾-->
                            <Path         Margin="5,-2,0,0" 
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Center"
                                      Stroke="Black" 
                                      StrokeThickness="0"
                                      Fill="#E0F0F0F0"
                                      Visibility="{TemplateBinding IsChecked, Converter={convert:B2VConverter}}"
                                      Data="M14,4 L6,12 5,12 1,8 3,6 5,8 6,8 12,2 z"
                                      Grid.Column="0"/>
                            <Path x:Name="Arrow"
                                      Margin="0,0,2,0" 
                                      HorizontalAlignment="Right"
                                      VerticalAlignment="Center"
                                      Stroke="Black" 
                                      StrokeThickness="0"
                                      Fill="#E0F0F0F0"
                                      Visibility="{TemplateBinding HasItems, Converter={convert:B2VConverter}}"
                                      Grid.Column="1" Data="M0,0 L0,6 L6,3 z"/>
                            <!--文字部分-->
                            <ContentPresenter VerticalAlignment="Center" 
                                                  Margin="8,0,20,0"
                                                  HorizontalAlignment="Left"
                                                  ContentSource="Header" 
                                                  Grid.Column="1" />
                            <!--子菜单-->
                            <Popup 
                                       IsOpen="{TemplateBinding IsSubmenuOpen}"
                                       AllowsTransparency="True" 
                                       Placement="Right">
                                <Border 
                                		BorderBrush="#FF444444" 
                                		BorderThickness ="1,1,1,1" 
                                		Background="#FF1B1B1C" 
                                		Opacity="1">
                                    <StackPanel Margin="2,2" IsItemsHost="True"/>
                                </Border>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Arrow" Property="Fill" Value="#FF007ACC"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="ChildItem" Property="Background" Value="#FF444444"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="ChildItem" Property="Background" Value="#FF1B1B1C"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="ChildItem" Property="Background" Value="#FF555555"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="ChildItem" Property="TextBlock.Foreground" Value="#70FFFFFF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

 Converter

using System;
using System.Windows;
using System.Windows.Data;

namespace Wpf.WpfConverter
{
    /// <summary>
    /// Boolean to visible converter
    /// </summary>
    public class B2VConverter : System.Windows.Markup.MarkupExtension, IValueConverter
    {
        public B2VConverter()
        {

        }
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Boolean? ivalue = value as Boolean?;

            if (ivalue.HasValue && ivalue.Value)
            {
                return Visibility.Visible;
            }
            else
            {
                if (parameter != null)
                {
                    return Visibility.Collapsed;
                }
                else
                {
                    return Visibility.Hidden;
                }
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }
    }

}

直接引入上面的样式文件 

图标使用方式

    <UserControl.ContextMenu>
        <ContextMenu>
            <MenuItem Header="ddddddddddddddddd">
                <MenuItem.Icon>
                    <ImageBrush ImageSource="Images/add.png"/>
                </MenuItem.Icon>
            </MenuItem>
            <Separator>
            </Separator>
            <MenuItem Header="ddddddddddddddddd"/>
            <Separator />
            <MenuItem Header="ddddddddddddddddd"/>
            <Separator />
            <MenuItem Header="ddddddddddddddddd"/>
            <Separator />

        </ContextMenu>
    </UserControl.ContextMenu>