一、創(chuàng)建WPF項目及文件

1、創(chuàng)建項目

打開VS2022,創(chuàng)建一個WPF項目，如下所示

2、創(chuàng)建文件夾及文件

創(chuàng)建資源文件夾，添加字體圖標(biāo)文件，添加 Menu樣式文件，如下所示

創(chuàng)建公共附加屬性用控件類庫,并創(chuàng)建對應(yīng)的 ControlAttachProperty 類文件如下：

3、添加引用

右鍵 Menu_WPF 添加引用，將類庫引用到當(dāng)前項目

二、代碼實現(xiàn)

2.ControlAttachProperty類

代碼如下（示例）：

using Microsoft.Win32;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using CheckBox = System.Windows.Controls.CheckBox;
using ComboBox = System.Windows.Controls.ComboBox;
using OpenFileDialog = Microsoft.Win32.OpenFileDialog;
using RadioButton = System.Windows.Controls.RadioButton;
using RichTextBox = System.Windows.Controls.RichTextBox;
using TextBox = System.Windows.Controls.TextBox;namespace Common.UserControl.Extession
{/// <summary>/// 公共附加屬性/// </summary>public static class ControlAttachProperty{#region FocusBorderBrush 焦點邊框色，輸入控件public static readonly DependencyProperty FocusBorderBrushProperty = DependencyProperty.RegisterAttached("FocusBorderBrush", typeof(Brush), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));public static void SetFocusBorderBrush(DependencyObject element, Brush value){element.SetValue(FocusBorderBrushProperty, value);}public static Brush GetFocusBorderBrush(DependencyObject element){return (Brush)element.GetValue(FocusBorderBrushProperty);}#endregion#region MouseOverBorderBrush 鼠標(biāo)進入邊框色，輸入控件public static readonly DependencyProperty MouseOverBorderBrushProperty =DependencyProperty.RegisterAttached("MouseOverBorderBrush", typeof(Brush), typeof(ControlAttachProperty),new FrameworkPropertyMetadata(Brushes.Transparent,FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.Inherits));/// <summary>/// Sets the brush used to draw the mouse over brush./// </summary>public static void SetMouseOverBorderBrush(DependencyObject obj, Brush value){obj.SetValue(MouseOverBorderBrushProperty, value);}/// <summary>/// Gets the brush used to draw the mouse over brush./// </summary>[AttachedPropertyBrowsableForType(typeof(TextBox))][AttachedPropertyBrowsableForType(typeof(CheckBox))][AttachedPropertyBrowsableForType(typeof(RadioButton))][AttachedPropertyBrowsableForType(typeof(DatePicker))][AttachedPropertyBrowsableForType(typeof(ComboBox))][AttachedPropertyBrowsableForType(typeof(RichTextBox))]public static Brush GetMouseOverBorderBrush(DependencyObject obj){return (Brush)obj.GetValue(MouseOverBorderBrushProperty);}#endregion#region AttachContentProperty 附加組件模板/// <summary>/// 附加組件模板/// </summary>public static readonly DependencyProperty AttachContentProperty = DependencyProperty.RegisterAttached("AttachContent", typeof(ControlTemplate), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));public static ControlTemplate GetAttachContent(DependencyObject d){return (ControlTemplate)d.GetValue(AttachContentProperty);}public static void SetAttachContent(DependencyObject obj, ControlTemplate value){obj.SetValue(AttachContentProperty, value);}#endregion#region WatermarkProperty 水印/// <summary>/// 水印/// </summary>public static readonly DependencyProperty WatermarkProperty = DependencyProperty.RegisterAttached("Watermark", typeof(string), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(""));public static string GetWatermark(DependencyObject d){return (string)d.GetValue(WatermarkProperty);}public static void SetWatermark(DependencyObject obj, string value){obj.SetValue(WatermarkProperty, value);}#endregion#region FIconProperty 字體圖標(biāo)/// <summary>/// 字體圖標(biāo)/// </summary>public static readonly DependencyProperty FIconProperty = DependencyProperty.RegisterAttached("FIcon", typeof(string), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(""));public static string GetFIcon(DependencyObject d){return (string)d.GetValue(FIconProperty);}public static void SetFIcon(DependencyObject obj, string value){obj.SetValue(FIconProperty, value);}#endregion#region FIconSizeProperty 字體圖標(biāo)大小/// <summary>/// 字體圖標(biāo)/// </summary>public static readonly DependencyProperty FIconSizeProperty = DependencyProperty.RegisterAttached("FIconSize", typeof(double), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(12D));public static double GetFIconSize(DependencyObject d){return (double)d.GetValue(FIconSizeProperty);}public static void SetFIconSize(DependencyObject obj, double value){obj.SetValue(FIconSizeProperty, value);}#endregion#region FIconMarginProperty 字體圖標(biāo)邊距/// <summary>/// 字體圖標(biāo)/// </summary>public static readonly DependencyProperty FIconMarginProperty = DependencyProperty.RegisterAttached("FIconMargin", typeof(Thickness), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));public static Thickness GetFIconMargin(DependencyObject d){return (Thickness)d.GetValue(FIconMarginProperty);}public static void SetFIconMargin(DependencyObject obj, Thickness value){obj.SetValue(FIconMarginProperty, value);}#endregion#region AllowsAnimationProperty 啟用旋轉(zhuǎn)動畫/// <summary>/// 啟用旋轉(zhuǎn)動畫/// </summary>public static readonly DependencyProperty AllowsAnimationProperty = DependencyProperty.RegisterAttached("AllowsAnimation", typeof(bool), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(false, AllowsAnimationChanged));public static bool GetAllowsAnimation(DependencyObject d){return (bool)d.GetValue(AllowsAnimationProperty);}public static void SetAllowsAnimation(DependencyObject obj, bool value){obj.SetValue(AllowsAnimationProperty, value);}/// <summary>/// 旋轉(zhuǎn)動畫刻度/// </summary>private static DoubleAnimation RotateAnimation = new DoubleAnimation(0, new Duration(TimeSpan.FromMilliseconds(200)));/// <summary>/// 綁定動畫事件/// </summary>private static void AllowsAnimationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){var uc = d as FrameworkElement;if (uc == null) return;if (uc.RenderTransformOrigin == new Point(0, 0)){uc.RenderTransformOrigin = new Point(0.5, 0.5);RotateTransform trans = new RotateTransform(0);uc.RenderTransform = trans;}var value = (bool)e.NewValue;if (value){RotateAnimation.To = 180;uc.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, RotateAnimation);}else{RotateAnimation.To = 0;uc.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, RotateAnimation);}}#endregion#region CornerRadiusProperty Border圓角/// <summary>/// Border圓角/// </summary>public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.RegisterAttached("CornerRadius", typeof(CornerRadius), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));public static CornerRadius GetCornerRadius(DependencyObject d){return (CornerRadius)d.GetValue(CornerRadiusProperty);}public static void SetCornerRadius(DependencyObject obj, CornerRadius value){obj.SetValue(CornerRadiusProperty, value);}#endregion#region LabelProperty TextBox的頭部Label/// <summary>/// TextBox的頭部Label/// </summary>public static readonly DependencyProperty LabelProperty = DependencyProperty.RegisterAttached("Label", typeof(string), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));[AttachedPropertyBrowsableForType(typeof(TextBox))]public static string GetLabel(DependencyObject d){return (string)d.GetValue(LabelProperty);}public static void SetLabel(DependencyObject obj, string value){obj.SetValue(LabelProperty, value);}#endregion#region LabelTemplateProperty TextBox的頭部Label模板/// <summary>/// TextBox的頭部Label模板/// </summary>public static readonly DependencyProperty LabelTemplateProperty = DependencyProperty.RegisterAttached("LabelTemplate", typeof(ControlTemplate), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null));[AttachedPropertyBrowsableForType(typeof(TextBox))]public static ControlTemplate GetLabelTemplate(DependencyObject d){return (ControlTemplate)d.GetValue(LabelTemplateProperty);}public static void SetLabelTemplate(DependencyObject obj, ControlTemplate value){obj.SetValue(LabelTemplateProperty, value);}#endregion}
}

Menu樣式文件實現(xiàn)

    <!--背景透明的HeaderItem樣式,帶旋轉(zhuǎn)動畫--><Style x:Key="TransparentHeaderMenuItem" TargetType="{x:Type MenuItem}"><Setter Property="BorderBrush" Value="{StaticResource MenuBorderBrush}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Background" Value="{StaticResource MenuBackground}"/><Setter Property="Foreground" Value="{StaticResource TextForeground}"/><Setter Property="FontSize" Value="{StaticResource FontSize}"/><Setter Property="Margin" Value="2,0,2,0"/><Setter Property="Height" Value="30"/><Setter Property="local:ControlAttachProperty.FIconSize" Value="18"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><Grid x:Name="Bg" VerticalAlignment="{TemplateBinding VerticalAlignment}"><StackPanel Orientation="Horizontal" x:Name="border" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"><!--icon--><TextBlock x:Name="PART_Icon" Text="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" local:ControlAttachProperty.AllowsAnimation="{Binding IsSubmenuOpen,RelativeSource={RelativeSource TemplatedParent}}"FontSize="{TemplateBinding local:ControlAttachProperty.FIconSize}" Style="{StaticResource FIcon}" /><TextBlock x:Name="txtHeader" Margin="5 0 0 0" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Stretch" Text="{TemplateBinding Header}" VerticalAlignment="Center" Grid.Column="1" Foreground="{TemplateBinding Foreground}"/></StackPanel><!--彈出子集菜單容器--><Popup x:Name="SubMenuPopup" AllowsTransparency="true" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom"  Focusable="false" VerticalOffset="0"PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"><Border Background="{TemplateBinding Background}"  CornerRadius="0" Margin="5" Effect="{StaticResource DefaultDropShadow}"BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"><Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True"><StackPanel Margin="10" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/></Grid></Border></Popup></Grid><!--觸發(fā)器--><ControlTemplate.Triggers><!--高亮狀態(tài)--><Trigger Property="IsHighlighted" Value="true"><Setter Property="Foreground" Value="{StaticResource MouseOverForeground}"></Setter></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Foreground" Value="{StaticResource PressedForeground}"></Setter></Trigger><Trigger Property="IsEnabled" Value="False"><Setter TargetName="border" Value="{StaticResource DisableOpacity}" Property="Opacity"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

MainWindow樣式實現(xiàn)

  <Menu Width="80" Height="30" Margin="3" Background="Transparent" ><MenuItem Header="展開菜單" Style="{StaticResource TransparentHeaderMenuItem}" Padding="0" Icon="&#xe61b;" ><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe605;" Header="設(shè)置" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe656;" Header="插件管理" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe65e;"  Header="用戶管理" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe659;" Header="修改密碼" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe7c6;" Header="在線更新" /><Separator Background="SpringGreen" Style="{StaticResource HorizontalSeparatorStyle}"/><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe6d5;" Header="問題反饋" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe65f;" Header="技術(shù)支持" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe600;" Header="幫助" /><MenuItem Style="{StaticResource TransparentHeaderMenuItem}" Icon="&#xe622;" Header="關(guān)于" /></MenuItem></Menu>