wpf expender 展开动画

原文: wpf expender 展开动画

非原创，网上下载的，觉得还可以，记录一下以便以后查看学习

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ExpanderRightHeaderStyle"
           TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid Background="Transparent"
                              SnapsToDevicePixels="False">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="-90" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse x:Name="circle"
                                         HorizontalAlignment="Center"
                                         Height="19"
                                         Stroke="DarkGray"
                                         VerticalAlignment="Center"
                                         Width="19" />
                                <Path x:Name="arrow"
                                      Data="M 1,1.5 L 4.5,5 L 8,1.5"
                                      HorizontalAlignment="Center"
                                      SnapsToDevicePixels="false"
                                      Stroke="#666"
                                      StrokeThickness="2"
                                      VerticalAlignment="Center" />
                            </Grid>
                            <ContentPresenter HorizontalAlignment="Center"
                                              Margin="0,4,0,0"
                                              Grid.Row="1"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="True"
                                              VerticalAlignment="Top" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="Data"
                                    TargetName="arrow"
                                    Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF3C7FB1" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#222" />
                        </Trigger>
                        <Trigger Property="IsPressed"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF526C7B" />
                            <Setter Property="StrokeThickness"
                                    TargetName="circle"
                                    Value="1.5" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#FF003366" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderUpHeaderStyle"
           TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid Background="Transparent"
                              SnapsToDevicePixels="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="180" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse x:Name="circle"
                                         HorizontalAlignment="Center"
                                         Height="19"
                                         Stroke="DarkGray"
                                         VerticalAlignment="Center"
                                         Width="19" />
                                <Path x:Name="arrow"
                                      Data="M 1,1.5 L 4.5,5 L 8,1.5"
                                      HorizontalAlignment="Center"
                                      SnapsToDevicePixels="false"
                                      Stroke="#666"
                                      StrokeThickness="2"
                                      VerticalAlignment="Center" />
                            </Grid>
                            <ContentPresenter Grid.Column="1"
                                              HorizontalAlignment="Left"
                                              Margin="4,0,0,0"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="True"
                                              VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="Data"
                                    TargetName="arrow"
                                    Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF3C7FB1" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#222" />
                        </Trigger>
                        <Trigger Property="IsPressed"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF526C7B" />
                            <Setter Property="StrokeThickness"
                                    TargetName="circle"
                                    Value="1.5" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#FF003366" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderLeftHeaderStyle"
           TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid Background="Transparent"
                              SnapsToDevicePixels="False">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="90" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse x:Name="circle"
                                         HorizontalAlignment="Center"
                                         Height="19"
                                         Stroke="DarkGray"
                                         VerticalAlignment="Center"
                                         Width="19" />
                                <Path x:Name="arrow"
                                      Data="M 1,1.5 L 4.5,5 L 8,1.5"
                                      HorizontalAlignment="Center"
                                      SnapsToDevicePixels="false"
                                      Stroke="#666"
                                      StrokeThickness="2"
                                      VerticalAlignment="Center" />
                            </Grid>
                            <ContentPresenter HorizontalAlignment="Center"
                                              Margin="0,4,0,0"
                                              Grid.Row="1"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="True"
                                              VerticalAlignment="Top" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="Data"
                                    TargetName="arrow"
                                    Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF3C7FB1" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#222" />
                        </Trigger>
                        <Trigger Property="IsPressed"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF526C7B" />
                            <Setter Property="StrokeThickness"
                                    TargetName="circle"
                                    Value="1.5" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#FF003366" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderHeaderFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="0"
                                   SnapsToDevicePixels="true"
                                   Stroke="Black"
                                   StrokeThickness="1"
                                   StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderDownHeaderStyle"
           TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid Background="Transparent"
                              SnapsToDevicePixels="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Ellipse x:Name="circle"
                                     HorizontalAlignment="Center"
                                     Height="19"
                                     Stroke="DarkGray"
                                     VerticalAlignment="Center"
                                     Width="19" />
                            <Path x:Name="arrow"
                                  Data="M 1,1.5 L 4.5,5 L 8,1.5"
                                  HorizontalAlignment="Center"
                                  SnapsToDevicePixels="false"
                                  Stroke="#666"
                                  StrokeThickness="2"
                                  VerticalAlignment="Center" />
                            <ContentPresenter Grid.Column="1"
                                              HorizontalAlignment="Left"
                                              Margin="4,0,0,0"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="True"
                                              VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="Data"
                                    TargetName="arrow"
                                    Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF3C7FB1" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#222" />
                        </Trigger>
                        <Trigger Property="IsPressed"
                                 Value="true">
                            <Setter Property="Stroke"
                                    TargetName="circle"
                                    Value="#FF526C7B" />
                            <Setter Property="StrokeThickness"
                                    TargetName="circle"
                                    Value="1.5" />
                            <Setter Property="Stroke"
                                    TargetName="arrow"
                                    Value="#FF003366" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderStyleMain"
           TargetType="{x:Type Expander}">
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
        <Setter Property="BorderBrush"
                Value="Transparent" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="STHide">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                           Storyboard.TargetName="ExpandSite">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                                      Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                           Storyboard.TargetName="ExpandSite">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="STShow">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                           Storyboard.TargetName="ExpandSite">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                           Storyboard.TargetName="ExpandSite">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="3"
                            SnapsToDevicePixels="true">
                        <DockPanel>
                            <ToggleButton x:Name="HeaderSite"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                          Content="{TemplateBinding Header}"
                                          DockPanel.Dock="Top"
                                          Foreground="{TemplateBinding Foreground}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}"
                                          FontStyle="{TemplateBinding FontStyle}"
                                          FontStretch="{TemplateBinding FontStretch}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                          Margin="1"
                                          MinWidth="0"
                                          MinHeight="0"
                                          Padding="{TemplateBinding Padding}"
                                          Style="{StaticResource ExpanderDownHeaderStyle}"
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                            <ContentPresenter x:Name="ExpandSite"
                                              DockPanel.Dock="Bottom"
                                              Focusable="false"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"
                                              Visibility="Visible"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter.LayoutTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <SkewTransform />
                                        <RotateTransform />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </ContentPresenter.LayoutTransform>
                            </ContentPresenter>
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard Storyboard="{StaticResource STHide}" />
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Expander.Expanded">
                            <BeginStoryboard x:Name="STShow_BeginStoryboard"
                                             Storyboard="{StaticResource STShow}" />
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Expander.Collapsed">
                            <BeginStoryboard Storyboard="{StaticResource STHide}" />
                        </EventTrigger>
                        <Trigger Property="ExpandDirection"
                                 Value="Right">
                            <Setter Property="DockPanel.Dock"
                                    TargetName="ExpandSite"
                                    Value="Right" />
                            <Setter Property="DockPanel.Dock"
                                    TargetName="HeaderSite"
                                    Value="Left" />
                            <Setter Property="Style"
                                    TargetName="HeaderSite"
                                    Value="{StaticResource ExpanderRightHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="ExpandDirection"
                                 Value="Up">
                            <Setter Property="DockPanel.Dock"
                                    TargetName="ExpandSite"
                                    Value="Top" />
                            <Setter Property="DockPanel.Dock"
                                    TargetName="HeaderSite"
                                    Value="Bottom" />
                            <Setter Property="Style"
                                    TargetName="HeaderSite"
                                    Value="{StaticResource ExpanderUpHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="ExpandDirection"
                                 Value="Left">
                            <Setter Property="DockPanel.Dock"
                                    TargetName="ExpandSite"
                                    Value="Left" />
                            <Setter Property="DockPanel.Dock"
                                    TargetName="HeaderSite"
                                    Value="Right" />
                            <Setter Property="Style"
                                    TargetName="HeaderSite"
                                    Value="{StaticResource ExpanderLeftHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Foreground"
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>