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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
运行效果: