Question

我试图让一张图像完全淡出，然后用Storyboard淡入另一张图像，但我无法弄明白。我有淡出部分工作，但我找不到一种方法来改变图像并顺利淡入淡出。我还没有找到一种方法，可以通过一键按下来淡入，并使图像动态变化。即使我更改源路径，图像也不会更新。我试图用尽可能多的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();

    }
}

Answer 1

您可以通过将Storyboard设置为第一个Storyboard的{{1}} BeginTime完成后设置另一个Duration淡出p>

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>

Answer 2

查看WPF Bag of Tricks

中的TransitionPresenter

Answer 3

Bag of Tricks项目有如何执行此操作的示例。

具体看看FadeTransition

淡出一个图像，淡入另一个图像

3 个答案: