WPF Expander控件使用

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="&#xe669;" 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="&#xe601;" 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="&#xe606;" 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="&#xe604;" 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="&#xe602;" 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="&#xf0f9;" 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="&#xf179;" 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="&#xf188;" 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="&#xf0f9;" 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="&#xf0f9;" 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="&#xf179;" 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="&#xf188;" 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="&#xf0f9;" 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>

使用效果:
WPF Expander控件使用

上一篇:深入浅出WPF


下一篇:WPF中引入MaterialDesign外部控件库