之前做了一個菜單樣式，這樣的：

鏈接：WPF 修改(優(yōu)化)Menu菜單的樣式

如今又來一個左側(cè)菜單樣式，其實只是修改了一下模板，如下圖：

還是老樣子，代碼全部都在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中，控制左側(cè)的文字顯示與隱藏，自行添加嘍--><!--<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="從現(xiàn)有代碼創(chuàng)建項目(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="關(guān)閉(C)"/><MenuItem Header="關(guān)閉解決方案(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="從現(xiàn)有代碼創(chuàng)建項目(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="關(guān)閉(C)"/><MenuItem Header="關(guān)閉解決方案(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="從現(xiàn)有代碼創(chuàng)建項目(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="關(guān)閉(C)"/><MenuItem Header="關(guān)閉解決方案(T)"/><Separator Style="{StaticResource sep}"/><MenuItem Header="退出(X)" /></MenuItem></Menu></Grid> </Window>

OK,結(jié)束?。

如果喜歡，點個贊唄~

總結(jié)

以上是生活随笔為你收集整理的WPF 左侧菜单样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。