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

1.代码实现

MainWindow.xaml 代码如下:

csharp 复制代码
<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>

相关推荐
九鼎科技-Leo17 分钟前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
麻花201310 小时前
C#之WPF的C1FlexGrid空间的行加载事件和列事件变更处理动态加载的枚举值
开发语言·c#·wpf
lcintj10 小时前
【WPF】Prism学习(九)
学习·wpf·prism
界面开发小八哥10 小时前
界面控件DevExpress WPF中文教程:网格视图数据布局的列和卡片字段
wpf·界面控件·devexpress·ui开发·用户界面
△曉風殘月〆10 小时前
如何在WPF中嵌入其它程序
wpf
Crazy Struggle11 小时前
功能齐全的 WPF 自定义控件资源库(收藏版)
.net·wpf·ui控件库
shepherd枸杞泡茶1 天前
WPF动画
c#·.net·wpf
lcintj1 天前
【WPF】Prism学习(十)
学习·wpf·prism
wyh要好好学习1 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing1 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计