XAML Grid Visibility Transition? - xaml

Question

I have a Grid that has Visibility bound to a property in my viewmodel. This all works fine -- the Grid appears/disappears correctly. My question is, how can I apply a transition so that instead of just instantly disappearing from the screen, the grid content slides into the edge of the UI? When made visible it should slide back out again.
<Grid Grid.Row="0" Grid.RowSpan="2"
Grid.Column="0"
Margin="30,30,0,30"
Visibility="{Binding IsSearchEnabled, Converter={StaticResource visibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
...

Answer 1

So as a quick example, one way of doing this;
<Grid Grid.RowSpan="2" x:Name="TheGrid"
Margin="30,30,0,30"
Visibility="{Binding IsSearchEnabled, Converter={StaticResource visibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Start the magic -->
<Grid.RenderTransform>
<TranslateTransform x:Name="SlideIn" X="750" />
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SlideIn" Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheGrid" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
This will slide it in when it's loaded and even fade in as it goes. You might have to play with the "X" value on SlideIn to get it off the screen to your liking. You could reverse it for the other direction.
Hope this helps.