wpf 从一个图像淡出并在另一个图像中淡入

Fade out from one image and fade in another

提问by chyyran

I'm trying to get one image to fade out completely, then fade in another image with Storyboards, but I can't figure it out. I have the fade out part working, but I can't find a way for it to change the Image and fade back in smoothly. I have yet to figure out a way for it to fade back in with one button press, and have the image change dynamically. Even if I change the source path, the image doesn't update. I'm trying to do all this with as much XAML as possible, rather than code-behind.

我试图让一个图像完全淡出，然后用 Storyboards 淡入另一个图像，但我无法弄清楚。我有淡出部分工作，但我无法找到一种方法来改变图像并平滑地淡入。我还没有想出一种方法让它通过按一下按钮淡入淡出，并使图像动态变化。即使我更改源路径，图像也不会更新。我正在尝试使用尽可能多的 XAML 来完成所有这些工作，而不是使用代码隐藏。

EDITI figured out how to make it fade back in, however, changing the image source doesn't change the image. I need some help on this.

编辑我想出了如何让它淡入淡出，但是，更改图像源并不会更改图像。我需要一些帮助。

This is what I have right now

这就是我现在所拥有的

<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>

C#

C＃

public partial class MainWindow : Window
{

    public String imagePath { get; set; }

    public MainWindow()
    {
        imagePath = "1.png";
        InitializeComponent();

    }

    private void Storyboard1_Completed(object sender, EventArgs e)
    {

        imagePath = "2.png";
        Storyboard stbFadeOut = (Storyboard)FindResource("FadeIn");
        stbFadeOut.Begin();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        Storyboard stbFadeOut = (Storyboard)FindResource("FadeOut");
        stbFadeOut.Begin();

    }
}

回答by sa_ddam213

You could just set anothet Storyboardto fade in after the first Storyboardfinishes by setting the BeginTimeto the Durationof the first StoryBoard

你可以只设置anothetStoryboard第一后淡出Storyboard通过设置完成BeginTime对Duration第一StoryBoard

<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>

Code:

代码：

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));
        }
    }
}

回答by Federico Berasategui

Take a look at the TransitionPresenterin the WPF Bag of Tricks

看看在TransitionPresenter在技巧的WPF袋

回答by bic

The Bag of Tricksproject has samples of how to do this.

该锦囊项目有如何做到这一点的样本。

Specifically look at the FadeTransition

具体看FadeTransition