devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF 修改(优化)Menu菜单的样式

作者：盐析白兔 | 2024-06-26 05:57:04

赞

踩

wpf menu样式

Menu菜单，在软件中使用率很高的一个控件。包含具有层级关系的一个或多个MenuItem作为子菜单。

今天就来分享一个定义的菜单样式。

看一下效果图：

下面就来看看代码：

本次代码，全部都在MainWindow.xaml内：

  1. <Window x:Class="wpfcore.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:wpfcore" 
  7.         xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
  8.         mc:Ignorable="d"
  9.         Background="#2D2D30"
  10.         UseLayoutRounding="True"
  11.         Title="MainWindow" Width="820" Height="340">
  12.     <Window.Resources>
  13.         <Style x:Key="sep" TargetType="{x:Type Separator}">
  14.             <Setter Property="Margin" Value="0,3" />
  15.             <Setter Property="Template">
  16.                 <Setter.Value>
  17.                     <ControlTemplate TargetType="{x:Type Separator}">
  18.                         <Border Height="1" BorderThickness="1" BorderBrush="#999999" />
  19.                     </ControlTemplate>
  20.                 </Setter.Value>
  21.             </Setter>
  22. </Style>
  23.         <Style TargetType="{x:Type MenuItem}">
  24.             <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
  25.             <Setter Property="Template">
  26.                 <Setter.Value>
  27.                     <ControlTemplate TargetType="{x:Type MenuItem}">
  28.                         <Border x:Name="Border"  Background="{TemplateBinding Background}" 
  29.                                 BorderBrush="{TemplateBinding BorderBrush}" 
  30.                                 BorderThickness="1">
  31.                             <Grid>
  32.                                 <Grid.ColumnDefinitions>
  33.                                     <ColumnDefinition x:Name="ColIcon" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
  34.                                     <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
  35.                                     <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
  36.                                     <ColumnDefinition x:Name="ColNext" Width="auto"/>
  37.                                 </Grid.ColumnDefinitions>
  38.                                 <ContentPresenter Grid.Column="0"
  39.                                                   Margin="5 0"
  40.                                                   x:Name="Icon"
  41.                                                   VerticalAlignment="Center" 
  42.                                                   ContentSource="Icon"/>
  43.                                 <Grid Grid.Column="0" 
  44.                                       Visibility="Hidden" 
  45.                                       Margin="5 0" 
  46.                                       x:Name="GlyphPanel"
  47.                                       VerticalAlignment="Center">
  48.                                     <Viewbox VerticalAlignment="Center" FlowDirection="LeftToRight" Width="18" Height="18">
  49.                                         <Path Fill="{TemplateBinding Foreground}" Data="M422.36247 839.786465c-13.320377 13.421684-34.909068 13.421684-48.126091 0l-10.69355-10.800997 0 0-11.398608-11.502985-50.145074-50.544163c-0.097214-0.201591 0-0.500397-0.201591-0.604774L72.380494 533.085224c-13.320377-13.421684-13.320377-35.218106 0-48.535413l72.132854-72.842005c13.319353-13.408381 34.907021-13.408381 48.224328 0l205.814506 209.252815L831.363631 184.208419c13.218046-13.414521 34.806737-13.414521 48.124044 0l72.134901 72.842005c13.317307 13.408381 13.317307 35.113729 0 48.52211L422.36247 839.786465 422.36247 839.786465z"/>
  50.                                     </Viewbox>
  51.                                 </Grid>
  52.                                 <ContentPresenter Grid.Column="1"
  53.                                           Margin="{TemplateBinding Padding}"
  54.                                           x:Name="HeaderHost"
  55.                                           VerticalAlignment="Center"
  56.                                           RecognizesAccessKey="True"
  57.                                           ContentSource="Header"/>
  58.                                 <ContentPresenter Grid.Column="2"
  59.                                           Margin="8 0"
  60.                                           x:Name="IGTHost"
  61.                                           ContentSource="InputGestureText"
  62.                                           VerticalAlignment="Center"/>
  63.                                 <Grid Grid.Column="3" Margin="5 0" x:Name="ArrowPanel" VerticalAlignment="Center">
  64.                                     <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
  65.                                 </Grid>
  66.                                 <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
  67.                                        Placement="Right" 
  68.                                        x:Name="SubMenuPopup" 
  69.                                        Focusable="false">
  70.                                     <Border x:Name="SubMenuBorder" BorderBrush="#999999" BorderThickness="1" Padding="2,2,2,2">
  71.                                         <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
  72.                                             <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
  73.                                         </Grid>
  74.                                     </Border>
  75.                                 </Popup>
  76.                             </Grid>
  77.                         </Border>
  78.                         <ControlTemplate.Triggers>
  79.                             <Trigger Property="Role" Value="TopLevelHeader">
  80.                                 <Setter Property="Padding" Value="6 1"/>
  81.                                 <Setter Property="Background" Value="Transparent"/>
  82.                                 <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
  83.                                 <Setter Property="MinWidth" Value="0" TargetName="ColIcon"/>
  84.                                 <Setter Property="Width" Value="Auto" TargetName="ColNext"/>
  85.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
  86.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
  87.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
  88.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
  89.                             </Trigger>
  90.                             <Trigger Property="IsHighlighted" Value="true">
  91.                                 <Setter Property="Background" Value="Green" TargetName="Border"/>
  92.                             </Trigger>
  93.                             <MultiTrigger>
  94.                                 <MultiTrigger.Conditions>
  95.                                     <Condition Property="IsHighlighted" Value="True"/>
  96.                                     <Condition Property="Role" Value="TopLevelHeader"/>
  97.                                 </MultiTrigger.Conditions>
  98.                                 <MultiTrigger.Setters>
  99.                                     <Setter Property="Background" Value="Green" TargetName="Border"/>
  100.                                 </MultiTrigger.Setters>
  101.                             </MultiTrigger>
  102.                             <Trigger Property="Role" Value="TopLevelItem">
  103.                                 <Setter Property="Padding" Value="6 1"/>
  104.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
  105.                             </Trigger>
  106.                             <Trigger Property="Role" Value="SubmenuHeader">
  107.                                 <Setter Property="Padding" Value="5 2"/>
  108.                             </Trigger>
  109.                             <Trigger Property="Role" Value="SubmenuItem">
  110.                                 <Setter Property="Padding" Value="5 2"/>
  111.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
  112.                             </Trigger>
  113.                             <Trigger Property="Icon" Value="{x:Null}">
  114.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
  115.                             </Trigger>
  116.                             <Trigger Property="IsChecked" Value="true">
  117.                                 <Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
  118.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
  119.                             </Trigger>
  120.                            
  121.                             <Trigger Property="IsEnabled" Value="false">
  122.                                 <Setter Property="Foreground" Value="LightGray"/>
  123.                             </Trigger>
  124.                         </ControlTemplate.Triggers>
  125.                     </ControlTemplate>
  126.                 </Setter.Value>
  127.             </Setter>
  128. </Style>
  129.         <Image x:Key="icon" x:Shared="False"  Width="22" Height="22" Source="/icon.jpg" />
  130.     </Window.Resources>
  131.     
  132.     <Grid>
  133.         <Menu HorizontalAlignment="Left" VerticalAlignment="Top"
  134.               FontSize="16" Foreground="#F6F6F6" Background="Transparent">
  135.           <MenuItem  Header="文件(F)">
  136.                 <MenuItem Header="新建(N)">
  137.                     <MenuItem Header="项目(P)..." InputGestureText="Ctrl+Shift+N"/>
  138.                     <MenuItem Header="存储库(R)..."/>
  139.                     <MenuItem Header="文件(F)..." InputGestureText="Ctrl+N"/>
  140.                     <MenuItem Header="从现有代码创建项目(E)..."/>
  141.                 </MenuItem>
  142.                 <MenuItem Header="打开(O)"/>
  143.                 <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
  144.                 <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
  145.                 <Separator Style="{StaticResource sep}"/>
  146.                 <MenuItem Header="添加(D)"/>
  147.                 <MenuItem Header="关闭(C)"/>
  148.                 <MenuItem Header="关闭解决方案(T)"/>
  149.                 <Separator Style="{StaticResource sep}"/>
  150.                 <MenuItem Header="退出(X)" InputGestureText="Alt+F4"/>
  151.             </MenuItem>
  152.             <MenuItem  Header="文件(F)">
  153.                 <MenuItem Header="新建(N)">
  154.                     <MenuItem Header="项目(P)..." InputGestureText="Ctrl+Shift+N"/>
  155.                     <MenuItem Header="存储库(R)..."/>
  156.                     <MenuItem Header="文件(F)..." InputGestureText="Ctrl+N"/>
  157.                     <MenuItem Header="从现有代码创建项目(E)..."/>
  158.                 </MenuItem>
  159.                 <MenuItem Header="打开(O)"/>
  160.                 <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
  161.                 <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
  162.                 <Separator Style="{StaticResource sep}"/>
  163.                 <MenuItem Header="添加(D)"/>
  164.                 <MenuItem Header="关闭(C)"/>
  165.                 <MenuItem Header="关闭解决方案(T)"/>
  166.                 <Separator Style="{StaticResource sep}"/>
  167.                 <MenuItem Header="退出(X)" InputGestureText="Alt+F4"/>
  168.             </MenuItem>
  169.             <MenuItem  Header="文件(F)">
  170.                 <MenuItem Header="新建(N)">
  171.                     <MenuItem Header="项目(P)..." InputGestureText="Ctrl+Shift+N"/>
  172.                     <MenuItem Header="存储库(R)..."/>
  173.                     <MenuItem Header="文件(F)..." InputGestureText="Ctrl+N"/>
  174.                     <MenuItem Header="从现有代码创建项目(E)..."/>
  175.                 </MenuItem>
  176.                 <MenuItem Header="打开(O)"/>
  177.                 <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
  178.                 <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
  179.                 <Separator Style="{StaticResource sep}"/>
  180.                 <MenuItem Header="添加(D)"/>
  181.                 <MenuItem Header="关闭(C)"/>
  182.                 <MenuItem Header="关闭解决方案(T)"/>
  183.                 <Separator Style="{StaticResource sep}"/>
  184.                 <MenuItem Header="退出(X)" InputGestureText="Alt+F4"/>
  185.             </MenuItem>
  186.         </Menu>
  187.     </Grid>
  188. </Window>

ok,以上代码直接CV就能用喽。。。

如果喜欢，点个赞呗~

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/758406
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号