WPF 侧边栏示例

WPF 侧边栏示例

示例一:
备注:WPF中的ItemsControl定义了ItemContainerStyle这一属性,顾名思义,该属性用来给ItemsControl中包含的每一个Item的容器定义样式。比如在ListBox中这个容器就是ListBoxItem,在TabControl中这个容器就是TabItem。

代码:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="500" Background="#3b3b3b">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="#111111"></Rectangle>
        <ListBox Margin="0 50 0 0" Background="Transparent" Foreground="White" BorderThickness="0" FontSize="16">
            <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="DarkRed" VerticalAlignment="Stretch" Width="5" Visibility="Hidden" Name="LeftSideRectangle"></Rectangle>
                                    <ContentPresenter VerticalAlignment="Center" Margin="15 0 0 0"></ContentPresenter>
                                </StackPanel>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="Visibility" Value="Visible" TargetName="LeftSideRectangle"></Setter>
                                        <Setter Property="Background" Value="#1a1a1a" TargetName="Container"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter Property="Visibility" Value="Visible" TargetName="LeftSideRectangle"></Setter>
                                        <Setter Property="Background" Value="#3a3a3a" TargetName="Container"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem Content="ONE"></ListBoxItem>
            <ListBoxItem Content="TWO"></ListBoxItem>
            <ListBoxItem Content="THREE"></ListBoxItem>
            <ListBoxItem Content="FOUR"></ListBoxItem>
            <ListBoxItem Content="FIVE"></ListBoxItem>
        </ListBox>
    </Grid>
</Window>

效果:
在这里插入图片描述
示例二:
代码:

<Window x:Class="WPF0310.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:WPF0310"
        mc:Ignorable="d"
        Title="MainWindow" Height="650" Width="900">
    <Window.Resources>
        <Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="0 2 0 0"/>
            <Setter Property="FontSize" Value="26"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                            <Border x:Name="border" BorderBrush="Red" BorderThickness="0"  SnapsToDevicePixels="True"/>
                            <Border x:Name="bd2"/>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}" Grid.Column="1" 
                                              ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="True">
                                <Setter Property="FocusVisualStyle">
                                    <Setter.Value>
                                        <Style>
                                            <Setter Property="Control.Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Padding" Value="4,-1,0,0"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#F7F7F7" TargetName="border"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Foreground"  Value="Green"/>
                                <Setter Property="BorderThickness" Value="4 0 0 0" TargetName="bd2"/>
                                <Setter Property="BorderBrush" Value="Green" TargetName="bd2"/>
                                <Setter Property="Background" Value="Green" TargetName="border"/>
                                <Setter Property="Opacity" Value="0.05" TargetName="border"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="MinHeight" Value="44"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid>
            <StackPanel>
                <TextBlock Text="主页" Foreground="#8F8F8F" FontSize="13" Margin="15 15 0 20"></TextBlock>
                <UniformGrid Columns="2">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="35" Height="35" Source="./logo.png" Margin="10 0 0 0"/>
                        <TextBlock Text="信息" FontSize="14" VerticalAlignment="Center" Margin="5 0 0 0"/>
                    </StackPanel>
                    <TextBlock Text="&#xe612;" FontSize="22" Foreground="#8f8f8f" Margin="0 0 10 0" FontFamily="./fonts/#iconfont" HorizontalAlignment="Right" VerticalAlignment="Center" Cursor="Hand" />
                </UniformGrid>
                <RadioButton   Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe617;" FontFamily="./fonts/#iconfont" FontSize="22"  Margin="10 0 0 0" Foreground="Green"/>
                        <TextBlock Margin="10 0 0 0" Text="我的清单"  FontSize="14" VerticalAlignment="Center" 
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe8ca;" FontFamily="./fonts/#iconfont" FontSize="26" Margin="10 0 0 0" Foreground="#CD3700"/>
                        <TextBlock  Margin="10 0 0 0" Text="制定计划"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe607;" FontFamily="./fonts/#iconfont" FontSize="22" Margin="10 0 0 0" Foreground="Green"/>
                        <TextBlock  Margin="10 0 0 0" Text="数据浏览"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe67d;" FontFamily="./fonts/#iconfont" FontSize="22"  Margin="10 0 0 0" Foreground="#CD3700"/>
                        <TextBlock  Margin="10 0 0 0" Text="活动安排"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe668;" FontFamily="./fonts/#iconfont" FontSize="22" Margin="10 0 0 0" Foreground="Green" />
                        <TextBlock  Margin="10 0 0 0" Text="任务下载"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <Border BorderThickness="0 1 0 0" Margin="10" BorderBrush="#EAEAEA" />

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe790;" FontFamily="./fonts/#iconfont" FontSize="22" Margin="10 0 0 0" Foreground="#6074C2" />
                        <TextBlock  Margin="10 0 0 0" Text="事务列表"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe62e;" FontFamily="./fonts/#iconfont" FontSize="22" Margin="10 0 0 0" Foreground="#6074C2" />
                        <TextBlock  Margin="10 0 0 0" Text="菜单管理"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

                <RadioButton  Style="{DynamicResource RadioButtonStyle}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe606;" FontFamily="./fonts/#iconfont" FontSize="22" Margin="10 0 0 0" Foreground="#6074C2" />
                        <TextBlock  Margin="10 0 0 0" Text="系统设置"  FontSize="14" VerticalAlignment="Center"
                                   Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}}" />
                    </StackPanel>
                </RadioButton>

            </StackPanel>
        </Grid>

        <Grid Grid.Column="1" Background="#2D8660">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="70"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Width="45" Height="30" Content="─" Foreground="White" BorderThickness="0" Background="Transparent" />
                <Button Width="45" Height="30" Content="☐" Foreground="White" BorderThickness="0" Background="Transparent" />
                <Button Width="45" Height="30" Content="✕" Foreground="White" BorderThickness="0" Background="Transparent" Click="Button_Click" />
            </StackPanel>

            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <StackPanel HorizontalAlignment="Center">
                    <TextBlock Text="日程" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" FontSize="30"/>
                    <TextBlock Text="3月10日,星期二" FontSize="15" Foreground="White" VerticalAlignment="Center"/>
                </StackPanel>

            </Grid>

        </Grid>
    </Grid>
</Window>

效果:
在这里插入图片描述
示例三:
代码:

<Window x:Class="WPF0320.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:WPF0320"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox Background="AliceBlue">
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="Height" Value="40" />
                    <Setter Property="FontSize" Value="16" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="border" CornerRadius="0" Margin="2" BorderBrush="Black"
                                        BorderThickness="0,0,0,0.2">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Margin="10,0,0,0" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Foreground" Value="#FF46679A" />
                                        <Setter TargetName="border" Property="Background" Value="white" />
                                        <Setter TargetName="border" Property="BorderBrush" Value="#FF46679A" />
                                        <Setter TargetName="border" Property="BorderThickness" Value="4,0,0,0.5" />
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsMouseOver" Value="True" />
                                            <Condition Property="IsSelected" Value="False" />
                                        </MultiTrigger.Conditions>
                                        <MultiTrigger.Setters>
                                            <Setter Property="Foreground" Value="#FF46679A" />
                                            <Setter TargetName="border" Property="Background" Value="white" />
                                            <Setter TargetName="border" Property="BorderBrush" Value="#FF46679A" />
                                            <Setter TargetName="border" Property="BorderThickness" Value="0,0,0,0.5" />
                                        </MultiTrigger.Setters>
                                    </MultiTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem>网站首页</ListBoxItem>
            <ListBoxItem>今日新闻</ListBoxItem>
            <ListBoxItem>生活服务</ListBoxItem>
            <ListBoxItem>活动专区</ListBoxItem>
            <ListBoxItem>热门活动</ListBoxItem>
            <ListBoxItem>问题解答</ListBoxItem>
            <ListBoxItem>图文资讯</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

运行效果:
在这里插入图片描述

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值