基于ListBox制作一个好看的侧边菜单导航栏

1.代码实现

MainWindow.xaml 代码如下：

<Window x:Class="UIDamo_WPF.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:UIDamo_WPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800" Background="#2b2b2b"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="130"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Rectangle Fill="#111111"/><ListBox Margin="0 5 0 0" Background="Transparent" Foreground="White" BorderThickness="0" FontSize="16" Name="listMenu"><ListBox.ItemContainerStyle><Style TargetType="ListBoxItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><StackPanel Height="35" Orientation="Horizontal" Background="Transparent" Name="container" Cursor="Hand"><Rectangle Fill="Green" VerticalAlignment="Stretch" Width="5" Visibility="Hidden" Name="leftSlideRectangle"/><ContentPresenter  VerticalAlignment="Center" Margin="15 0 0 0"/></StackPanel><ControlTemplate.Triggers><Trigger Property="IsSelected" Value="True"><Setter Property="Visibility" Value="Visible" TargetName="leftSlideRectangle"/><Setter Property="Background" Value="#3a3a3a" TargetName="container"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Visibility" Value="Visible" TargetName="leftSlideRectangle"/><Setter Property="Opacity" Value="0.5" TargetName="leftSlideRectangle"/><Setter Property="Background" Value="#1a1a1a" TargetName="container"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle><ListBoxItem  Content="首页"/><ListBoxItem  Content="用户管理"/><ListBoxItem  Content="权限设置"/><ListBoxItem  Content="菜单管理"/><ListBoxItem  Content="配置管理"/><ListBoxItem  Content="设备管理"/><ListBoxItem  Content="数据管理"/><ListBoxItem  Content="系统配置"/><ListBoxItem  Content="基础配置"/><ListBoxItem  Content="退出系统"/></ListBox></Grid>
</Window>

---