如何创建一个动画的扩展

的扩展控制，可以用在很多的情况下，，但默认情况下，提出一个相当quot; rigidquot;

在这篇文章中我们会发现如何通过XAML动画，只是很简单！

的WPF引擎让我们重新定义的控件的模板，我们就做。目标旨在
我们的目标是获得相同functionnality原来的扩展。
这是不那么简单，因为我们tought，我看到了很多的扩展失去他们的一些行为，当他们成为quot; animatedquot;:原始值的IsExpanded忽略，忽略ExpandDirection，等..获得必要的文件
所需的文件:原有的控制模板的扩展链接到它的扩展的按钮样式
为了得到它们，我使用Expression Blend的如下因素此页的MSDN步骤:
特别为您，他们也与后
{S0}
下面是原始模板的扩展:

<ControlTemplate TargetType="{x:Type Expander}">

  <Border SnapsToDevicePixels="true" 

      Background="{TemplateBinding Background}" 

      BorderBrush="{TemplateBinding BorderBrush}" 

      BorderThickness="{TemplateBinding BorderThickness}" 

      CornerRadius="3">

    <DockPanel>

      <ToggleButton FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" 

              Margin="1" 

              MinHeight="0" 

              MinWidth="0" 

              x:Name="HeaderSite" 

              Style="{StaticResource ExpanderDownHeaderStyle}" />

      <ContentPresenter Focusable="false" 

                Visibility="Collapsed" 

                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 

                Margin="{TemplateBinding Padding}" 

                x:Name="ExpandSite"   />

    </DockPanel>

  </Border>

  <ControlTemplate.Triggers>

    <Trigger Property="IsExpanded" Value="true">

      <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>

    </Trigger>

    <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>

<Expander Header="Our text" ExpandDirection="Up" 

               Style="{StaticResource ourAnimatedExpanderStyle}"    >

    <!--- content here ! --->

</Expander>