C# 从一个图像淡出，然后淡入另一个图像

我试图让一张图片完全淡出，然后用故事板淡入另一张图片，但我想不出来。我有淡出部分的工作，但我找不到一个方法，它改变图像和淡出顺利回来。我还没有找到一种方法，让它在按下一个按钮后淡入，并使图像动态变化。即使我更改了源路径，图像也不会更新。我正试图用尽可能多的XAML来完成这一切，而不是代码隐藏

编辑 我想出了如何使其淡入，然而，更改图像源并不会更改图像。我需要一些帮助

这就是我现在拥有的

<Window.Resources>
    <Storyboard x:Key="FadeOut" Completed="Storyboard1_Completed">
        <DoubleAnimation From="1" To="0" Storyboard.TargetName ="Image1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:5"/>
    </Storyboard>
    <Storyboard x:Key="FadeIn" Name="FadeIn">
        <DoubleAnimation From="0" To="1" Storyboard.TargetName ="Image1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:5"/>
    </Storyboard>
</Window.Resources>

<Grid HorizontalAlignment="Center">

    <Image Source="{Binding Path=imagePath}" Margin="0,0,0,28" Name="Image1"/>
    <Button Content="Fade" Height="23" Margin="0,284,341,0" Name="button1" Width="162" Click="button1_Click"/>


</Grid>

---

查看

中的

TransitionPresenter

，该项目提供了如何实现这一点的示例

---

具体看一下你可以通过将

开始时间设置为第一个
故事板的
持续时间，将
故事板设置为在第一个
故事板完成后淡入

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="199" Width="206" Name="UI">
    <Grid DataContext="{Binding ElementName=UI}">
        <Image Source="{Binding Path=MyImage}" Margin="0,0,0,28" Name="Image1"/>
        <Button Content="Fade" Height="23"  Name="button1" Width="162" Margin="12,136,10,0">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard >
                        <Storyboard Name="Storyboard1" Duration="0:0:1" Completed="Storyboard1_Completed">
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="1" To="0"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard Name="Storyboard2" BeginTime="0:0:1" Duration="0:0:1" >
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="0" To="1"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

我不想使用外部库，但我还是要看看。我以前也这么想，直到我看到这个库的演示=）我制作了这个演示，它不是我真正想要的，我希望第一个图像完全淡出，在第二个图像开始淡入之前，而不仅仅是从一个到另一个的直接淡入淡出。您可以轻松地在
FadeTransition
类中更改代码来实现这一点。它所做的一切都是在oldContent和newContent元素的不透明度属性上应用动画。问题是，它只是跳转到淡入，而不会淡出第一幅图像。我通过在code Behind中启动
情节提要
来解决这一问题，但我更喜欢使用纯WPF。我通过一个
情节提要
中的2个
双动画
部分解决了这一问题，但现在图像在淡入后立即更新。。
<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="199" Width="206" Name="UI">
    <Grid DataContext="{Binding ElementName=UI}">
        <Image Source="{Binding Path=MyImage}" Margin="0,0,0,28" Name="Image1"/>
        <Button Content="Fade" Height="23"  Name="button1" Width="162" Margin="12,136,10,0">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard >
                        <Storyboard Name="Storyboard1" Duration="0:0:1" Completed="Storyboard1_Completed">
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="1" To="0"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard Name="Storyboard2" BeginTime="0:0:1" Duration="0:0:1" >
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="0" To="1"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        MyImage = new BitmapImage(new Uri(@"Capture.png", UriKind.RelativeOrAbsolute));
    }

    private BitmapImage _image;
    public BitmapImage MyImage
    {
        get { return _image; }
        set { _image = value; NotifyPropertyChanged("MyImage"); }
    }

    private void Storyboard1_Completed(object sender, EventArgs e)
    {
        MyImage = new BitmapImage(new Uri(@"Capture1.png", UriKind.RelativeOrAbsolute));
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}