XAML Grid Visibility Transition?

by

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.

Leave a Comment