Creating a 'wipe' animation in WPF

Question

I'm looking to create an animation similar to the 'wipe' animation in Microsoft PowerPoint using WPF.

Put simply, I'd like an image to fade in from left to right over 1 second.

This is the XAML I have so far, which fades the image in all at once:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded">
    <Window.Resources>
        <Storyboard x:Key="fade">
            <DoubleAnimation From="0" To="1" Duration="0:0:1"
                             Storyboard.TargetName="logo"
                             Storyboard.TargetProperty="Opacity"/>

        </Storyboard>
    </Window.Resources>
    <Grid>
        <Image Source="image.png" x:Name="logo"/>
    </Grid>
</Window>

In the code behind, I just play the animation when window has loaded:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    BeginStoryboard((Storyboard)FindResource("fade"));
}

What do I need to add to the Storyboard tag in order to make the image fade in similar to the wipe animation on PowerPoint?

Answer 1

Found the answer myself from this blog post. The code I needed to achieve the effect I needed is identical to the code in the post, but I don't need the first image. (UFO.jpg)

    <Window x:Class="LearnWPF.WipeEffect.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow">
    <Grid>
      <!--First image not needed.-->
      <!--<Image Source="Images/UFO.jpg" />-->
      <Image Source="Images/ladder.jpg">
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
              <GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
              <GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image> 
    </Grid>
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <!--Duration changed to half a second as this is what I need. -->
            <DoubleAnimation Storyboard.TargetName="TransparentStop"
                             Storyboard.TargetProperty="Offset" By="1"  Duration="0:0:0.5"   />
            <DoubleAnimation Storyboard.TargetName="BlackStop"
                             Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5"
                             BeginTime="0:0:0.05" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
  </Window>