The expander control can be used in a lot of situations but the one proposed by default is quite "rigid".
In this post we will discover how to animate it quite simply just via XAML !
The WPF engine lets us redefine the template of the controls and we'll just do that.
The goal aimed
What we aim is to get the same functionnality as the original expander.
This is not as simple as we tought and I've seen a lot of expander loosing some of their behaviors when they became "animated" : original value of IsExpanded ignored, ExpandDirection ignored, etc...
Getting the necessary files
The files needed are :
1. the original control template of the Expander
2. the expander's button style which are linked to it
To get them, I used Expression Blend folowing the MSDN steps on this page : http://msdn.microsoft.com/en-us/library/cc294908.aspx
Especially for you, they are also linked to the post
:)
Here is the expander original template :
<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>Add the New Behavior to the Expander
As you can see, the original template plays on the Visibility property to expand or collapse the "expandable" part.
We will change that and add a scaling transformation on the "expendable part" of the control that we'll animate at the right moment (when the IsExpanded property value change). Also we'll not use simple DataTrigger but MultiTrigger because we have to starts differents animation depending of the Expand direction.
The result is a quite simple but lenghty XAML file (the AnimatedExpanderStyles is linked to the post):
<Style x:Key="ourAnimatedExpanderStyle" 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>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/My.Assembly;component/AnimatedExpander/AnimatedExpanderStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Storyboard x:Key="scaleYUp">
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
<Storyboard x:Key="scaleYDown">
<DoubleAnimation Fr om="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
<Storyboard x:Key="scaleXUp">
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)" />
</Storyboard>
<Storyboard x:Key="scaleXDown">
<DoubleAnimation From="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)" />
</Storyboard>
</ResourceDictionary>
</ControlTemplate.Resources>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" CornerRadius="3"
SnapsToDevicePixels="true">
<DockPanel>
<ToggleButton
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"
Margin="1" MinHeight="0" MinWidth="0" x:Name="HeaderSite"
Style="{StaticResource ExpanderDownHeaderStyle}">
<ContentPresenter Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Margin="1"
Focusable="false" />
</ToggleButton>
<ContentPresenter x:Name="ExpandSite"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" Focusable="false">
<ContentPresenter.LayoutTransform>
<ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsExpanded" Value="True" />
<Condition Property="ExpandDirection" Value="Up" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource scaleYUp}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource scaleYDown}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsExpanded" Value="True" />
<Condition Property="ExpandDirection" Value="Down" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource scaleYUp}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource scaleYDown}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsExpanded" Value="True" />
<Condition Property="ExpandDirection" Value="Left" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource scaleXUp}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource scaleXDown}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsExpanded" Value="True" />
<Condition Property="ExpandDirection" Value="Right" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource scaleXUp}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource scaleXDown}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="ExpandDirection" Value="Down">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Bottom" />
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top" />
</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="{DynamicResource ExpanderUpHeaderStyle}" />
</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="{DynamicResource ExpanderRightHeaderStyle}" />
</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="{DynamicResource ExpanderLeftHeaderStyle}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>Conclusion
To use this Expander we have to use this little snippet :
<Expander Header="Our text" ExpandDirection="Up"
Style="{StaticResource ourAnimatedExpanderStyle}" >
<!--- content here ! --->
</Expander>
0 comments:
Post a Comment