WPF Expander控件使用
xaml代码：
<Window x:Class="WpfApp5.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:WpfApp5"
mc:Ignorable="d"
Title="MainWindow" Height="550" Width="800">
<Window.Resources>
<Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Header}" IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=IsExpanded}" Height="50" Background="{TemplateBinding Background}" Style="{DynamicResource ToggleButtonStyle}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" >
<ToggleButton.Resources>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<TextBlock x:Name="textBlock" Grid.Column="1" Text="" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter x:Name="content" Visibility="Collapsed" Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.RowSpan="2" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True" >
<Setter Property="Visibility" TargetName="content" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Expander IsExpanded="False" Foreground="White" Padding="10 0 0 0" FontSize="20" HorizontalAlignment="Center" Style="{DynamicResource ExpanderStyle}" VerticalAlignment="Center" Width="450" Background="#FF4E5465" FontFamily="Fonts/#iconfont">
<Expander.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" x:Name="grid">
<ContentPresenter/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="grid" Value="#009688"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Expander.Resources>
<Expander.Header>
<TextBlock Text="权限系统" FontSize="16"/>
</Expander.Header>
<StackPanel Background="#282B33">
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="表单管理" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="新建订单" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="系统设置" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="库存管理" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
</Expander>
<Expander IsExpanded="False" Foreground="White" Padding="10 0 0 0" FontSize="20" HorizontalAlignment="Center" Style="{DynamicResource ExpanderStyle}" VerticalAlignment="Center" Width="450" Background="#FF4E5465" FontFamily="Fonts/#iconfont">
<Expander.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" x:Name="grid">
<ContentPresenter/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="grid" Value="#009688"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Expander.Resources>
<Expander.Header>
<TextBlock Text="权限系统" FontSize="16"/>
</Expander.Header>
<StackPanel Background="#282B33">
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="ICU" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="苹果" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="Debug" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="ICU" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
</Expander>
<Expander IsExpanded="False" Foreground="White" Padding="10 0 0 0" FontSize="20" HorizontalAlignment="Center" Style="{DynamicResource ExpanderStyle}" VerticalAlignment="Center" Width="450" Background="#FF4E5465" FontFamily="Fonts/#iconfont">
<Expander.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" x:Name="grid">
<ContentPresenter/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="grid" Value="#009688"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Expander.Resources>
<Expander.Header>
<TextBlock Text="权限系统" FontSize="16"/>
</Expander.Header>
<StackPanel Background="#282B33">
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="ICU" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="苹果" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="Debug" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
<Button Height="50">
<Button.Content>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="ICU" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
</Expander>
</StackPanel>
</Window>
使用效果：