之前做了一个菜单样式,这样的:
链接:WPF 修改(优化)Menu菜单的样式
如今又来一个左侧菜单样式,其实只是修改了一下模板,如下图:
还是老样子,代码全部都在MainWindow.xaml中:
<Window x:Class="wpfcore.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:wpfcore" xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"mc:Ignorable="d"Background="#2D2D30"SnapsToDevicePixels="True"UseLayoutRounding="True"Title="MainWindow" Width="820" Height="340"><Window.Resources><Style x:Key="sep" TargetType="{x:Type Separator}"><Setter Property="Margin" Value="0,3" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Separator}"><Border Height="1" BorderThickness="1" BorderBrush="#999999" /></ControlTemplate></Setter.Value></Setter>
</Style><Style TargetType="{x:Type MenuItem}"><Setter Property="Height" Value="40"/><Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><Border x:Name="Border" Background="{TemplateBinding Background}" ><Grid><Grid.ColumnDefinitions><ColumnDefinition x:Name="ColIcon" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><ContentPresenter Grid.Column="0" Margin="5 0" x:Name="Icon"VerticalAlignment="Center" ContentSource="Icon"/><Grid Grid.Column="1" x:Name="rightGrid"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/><ColumnDefinition x:Name="ColNext" Width="auto"/></Grid.ColumnDefinitions><ContentPresenter Grid.Column="0"Margin="{TemplateBinding Padding}"x:Name="HeaderHost"VerticalAlignment="Center"RecognizesAccessKey="True"ContentSource="Header"/><Grid Grid.Column="1" Margin="5 0"x:Name="ArrowPanel" VerticalAlignment="Center"><Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/></Grid></Grid><Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"Placement="Right" x:Name="SubMenuPopup" Focusable="false"><Border x:Name="SubMenuBorder" BorderBrush="#999999"BorderThickness="1" Padding="2,2,2,2"><Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True"><StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/></Grid></Border></Popup></Grid></Border><ControlTemplate.Triggers><Trigger Property="Role" Value="TopLevelHeader"><Setter Property="Padding" Value="6 0"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="DarkRed"/><Setter Property="MinWidth" Value="0" TargetName="ColIcon"/><Setter Property="Width" Value="Auto" TargetName="ColNext"/><Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/><!--可添加一个附加属性,在trigger中,控制左侧的文字显示与隐藏,自行添加喽--><!--<Setter Property="Visibility" Value="Collapsed" TargetName="rightGrid"/>--></Trigger><Trigger Property="IsHighlighted" Value="true"><Setter Property="Background" Value="Green" TargetName="Border"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsHighlighted" Value="True"/><Condition Property="Role" Value="TopLevelHeader"/></MultiTrigger.Conditions><MultiTrigger.Setters><Setter Property="Background" Value="Green" TargetName="Border"/></MultiTrigger.Setters></MultiTrigger><Trigger Property="Role" Value="TopLevelItem"><Setter Property="Padding" Value="6 1"/><Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/></Trigger><Trigger Property="Role" Value="SubmenuHeader"><Setter Property="Padding" Value="5 2"/></Trigger><Trigger Property="Role" Value="SubmenuItem"><Setter Property="Padding" Value="5 2"/><Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/></Trigger><Trigger Property="Icon" Value="{x:Null}"><Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Foreground" Value="LightGray"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style><Image x:Key="icon" x:Shared="False" Width="32" Height="32" Source="/64.jpg" /></Window.Resources><Grid><Menu HorizontalAlignment="Left" VerticalAlignment="Top"FontSize="16" Foreground="#F6F6F6" Background="Transparent"><Menu.ItemsPanel><ItemsPanelTemplate><StackPanel IsItemsHost="True"/></ItemsPanelTemplate></Menu.ItemsPanel><MenuItem Header="文件(F)" Icon="{StaticResource icon}"><MenuItem Header="新建(N)"><MenuItem Header="项目(P)..." /><MenuItem Header="存储库(R)..."/><MenuItem Header="文件(F)..." /><MenuItem Header="从现有代码创建项目(E)..."/></MenuItem><MenuItem Header="打开(O)"/><MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/><MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/><Separator Style="{StaticResource sep}"/><MenuItem Header="添加(D)"/><MenuItem Header="关闭(C)"/><MenuItem Header="关闭解决方案(T)"/><Separator Style="{StaticResource sep}"/><MenuItem Header="退出(X)" /></MenuItem><MenuItem Header="文件(F)" Icon="{StaticResource icon}"><MenuItem Header="新建(N)"><MenuItem Header="项目(P)..." Icon="{StaticResource icon}"/><MenuItem Header="存储库(R)..."/><MenuItem Header="文件(F)..." /><MenuItem Header="从现有代码创建项目(E)..."/></MenuItem><MenuItem Header="打开(O)"/><MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/><MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/><Separator Style="{StaticResource sep}"/><MenuItem Header="添加(D)"/><MenuItem Header="关闭(C)"/><MenuItem Header="关闭解决方案(T)"/><Separator Style="{StaticResource sep}"/><MenuItem Header="退出(X)" /></MenuItem><MenuItem Header="文件(F)" Icon="{StaticResource icon}"><MenuItem Header="新建(N)"><MenuItem Header="项目(P)..." /><MenuItem Header="存储库(R)..."/><MenuItem Header="文件(F)..." /><MenuItem Header="从现有代码创建项目(E)..."/></MenuItem><MenuItem Header="打开(O)"/><MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/><MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/><Separator Style="{StaticResource sep}"/><MenuItem Header="添加(D)"/><MenuItem Header="关闭(C)"/><MenuItem Header="关闭解决方案(T)"/><Separator Style="{StaticResource sep}"/><MenuItem Header="退出(X)" /></MenuItem></Menu></Grid>
</Window>
OK,结束 。
如果喜欢,点个赞呗~