Плавная смена изображений

В данном случае мы создаем два элемента Image, которые накладываются друг на друга. Но одно является прозрачным. По клику на кнопку мы запускаем анимацию, благодаря которой прозрачность постепенно уменьшается, и у нас получается эффект плавного перехода от одного изображения к другому.

Разметка XAML

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Custom ScrollViewer" Height="250" Width="300">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="blackStop" Storyboard.TargetProperty="Offset" 
                                         From="0" To="1" Duration="0:0:1.2" />
                        <DoubleAnimation Storyboard.TargetName="transpStop" Storyboard.TargetProperty="Offset" 
                                         From="0" To="1" Duration="0:0:1" BeginTime="0:0:2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Grid Background="Black">
        <Image Source="D:\Exp\Photos\x_f5d8e3c2.jpg"></Image>
        <Image Source="D:\Exp\Photos\x_c0932793.jpg" x:Name="first">
            <Image.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop x:Name="transpStop" Offset="0" Color="Transparent" />
                    <GradientStop x:Name="blackStop" Offset="0" Color="Black" />
                </LinearGradientBrush>
            </Image.OpacityMask>
        </Image>
		<Button x:Name="button1" Foreground="Wheat" Width="80" Height="30" Content="Кнопка" VerticalAlignment="Bottom" />  
    </Grid>
</Window>