2 Nov 2010 • on .NET

WPF: Slinding Animation. 'Freezable' workaround.

While ago I needed to implement an Slide InOut amination in WPF. The first attempt was to set TranslateTransform in Animation (to make the control sliding out if it’s content was set to null). But since animations should be freezable I wasn’t able to do so. I googled for a while with no luck. But I found a straightforward solution - I just “inverted” the logic.

So now by default my control is hidden:

 <TranslateTransform

                                 Y="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"

/>

In trigger I just set TranslateTransform to 0. Please review the following example:

  <Trigger Property="Content" Value="{x:Null}">

  <Trigger.ExitActions>

  <BeginStoryboard>

  <Storyboard>

  <DoubleAnimation

                                             To="0"

                                             Duration="00:00:2.1"

                                             Storyboard.TargetName="PART_Host"

                                             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TranslateTransform.Y)"

                                             FillBehavior="HoldEnd"

/>

  </Storyboard>

  </BeginStoryboard>

  </Trigger.ExitActions>

  <Trigger.EnterActions>

  <BeginStoryboard>

  <Storyboard>

  <DoubleAnimation

                                             From="0"

                                             Duration="00:00:2.1"

                                             Storyboard.TargetName="PART_Host"

                                             Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TranslateTransform.Y)"

                                             FillBehavior="Stop"

/>

  </Storyboard>

  </BeginStoryboard>

  </Trigger.EnterActions>

  </Trigger>

Hope this can help someone.