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>

原文地址:https://www.cnblogs.com/lonelyxmas/p/10480335.html

时间: 2024-10-10 20:08:02

wpf expender 展开动画的相关文章

WPF 有趣的动画效果

WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至于我最后做了之前从未打算做的东西,就是使用一些很实用的.NET代码,渐变填充生成背景动画.让我先给你看一些终于效果吧. WPF和元素定位 然而.在我们開始之前.我们须要考虑一件事情.这件事让我也有点原地转圈的感觉. 似乎当你使用WPF创建不论什么闭环形状时,你不能设置它的X和Y坐标.好吧.至少你不能在一般的WPF窗口(像VS开箱即

jQuery鼠标悬停3d菜单展开动画

效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现.支持Chrome,火狐,Edge等浏览器. 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"

WPF编程学习——动画

前言 使用动画,是增强用户体验的一种有效的手段.合理的动画,可以让应用程序的界面看起来更加自然.真实.流畅.舒适,更有效地向用户展现信息,用户也更容易接受.同时也增加了软件使用的乐趣,提高用户粘度.(如MSN2011的启动界面动画,字体滑动和淡入淡出.) 在以往的程序开发中,如果想构建动画,需要定时器和自定义的绘图元素,并让这些绘图元素根据定时器做出相应的改变,以实现动画效果,开发难度和工作量都是很高的.并且这些动画的拓展性和灵活性一般很弱,代码量和复杂度却很大.而在WPF中,可以使用声明的方式

WPF TabControl 模拟动画

1 public class MyTabControl : TabControl 2 { 3 4 Timer t = null; 5 protected override void OnSelectionChanged(SelectionChangedEventArgs e) 6 { 7 Action a = () => 8 { 9 try 10 { 11 var control = e.Source as MyTabControl; 12 if (control == null) return

自定义菜单收起展开动画

最近需求sama联合美工娘娘又改了界面,整体的界面是华丽了不少,但是大神何必为难弱智儿童的我呢,下面先看看新界面~ 很经典的菜单设计,不过毕竟是版本更迭,不适合在原有基础上大修改改,菜单总共分了4个父菜单和若干个子菜单,点击父菜单会隐藏子菜单,其中还要有收起展开动画,这个首先令我想起了expanedlistview.说动手就动手,花了几分钟先写个demo测试以下吧. <?xml version="1.0" encoding="utf-8"?> <R

WPF绘画和动画(原文:http://blog.csdn.net/fwj380891124/article/details/8177125 )

1.1   WPF绘图 与传统的.net开发使用GDI+进行绘图不同,WPF拥有自己的一套绘图API.使用这套API不但可以轻松绘制出精美的图形,还可以为各种图形添加类似与PhotoShop的"滤镜效果"及"变形效果".本节我们就一起研究WPF图形API绘图,效果和变形等功能. 先观察下面一组图片: 显然,这组图片是矢量图(Vector Image),无论怎样放大缩小都不会出现锯齿.你可能会想:"这是组PNG格式的图片吗?"答案是"NO

WPF中的动画——(五)路径动画

原文:WPF中的动画--(五)路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimationUsingPath,它通常用于控制对象的MatrixTransform,一个简单的例子如下: 1 <Canvas > 2 <Canvas.Resources> 3 <PathGeometry x:Key="path"

WPF中的动画——(三)时间线(TimeLine)(转)

WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下几种TimeLine: AnimationTimeline :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画. MediaTimeline:用于控制媒体文件播放的时间线. ParallelTimeline:ParallelTimeline 是一种可对其他时间线进行分组的时间线,可用于实现较复

WPF中的动画——(四)缓动函数(转)

WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.FromSeconds(1),        EasingFunction = new BackEa