从一个图像中淡出，在另一个图像中淡出

本文关键字：图像 淡出 另一个 一个 | 更新日期: 2023-09-27 17:53:56

我试图让一个图像完全淡出，然后用故事板淡出另一个图像，但我不能弄清楚。我让淡出部分工作，但我找不到一种方法来改变图像并平滑地淡出。我还没有想出一种方法，让它在一个按钮按下，并有图像动态变化。即使我改变了源路径，图像也不会更新。我正在尝试尽可能多地使用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>
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();
    }
}

从一个图像中淡出，在另一个图像中淡出

您可以通过将BeginTime设置为第一个StoryBoard的Duration来设置另一个Storyboard在第一个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>
代码:

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

看看WPF招数包中的TransitionPresenter

Bag of Tricks项目提供了如何做到这一点的示例。

特别是FadeTransition

相关文章：