Fade In Fade Out Animation In Blend

In this article you will learn about FadeIn FadeOut animation in blend.

Here are the steps:

  1. Create a blank app in visual studio and create a grid either using toolbox or by coding in xaml.
    1. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    2.     <Grid Height="500" Width="500" Background="Gray" />  
    3. </Grid>  
  2. Save your file and see on xaml page from solution explorer and select 'Open in Blend'.

    blend

  3. Create new story board.

    board

  4. Select time key frame on for storyboard. For example, a: 1 (fade out and fade in appears in 1 sec.).

    time

  5. Change opacity of gray grid to 0%.

    opacity

  6. To run it forever and in auto reverse mode select story board and change the repeat behavior.

    board

  7. Story board can begin by any event trigger using Storyboard.Begin().

    Example: Button to begin storyboard animation using event trigger and adding actions on click event of button only through xaml.

    event

    event

    event

    event