3

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

    }
}
4

3 回答 3

2

您可以通过将第一个设置为第一个完成Storyboard后将另一个设置为淡入StoryboardBeginTimeDurationStoryBoard

<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));
        }
    }
}
于 2013-01-16T22:03:07.487 回答
0

查看WPF 技巧包中TransitionPresenter的

于 2013-01-16T21:20:09.273 回答
0

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

具体看FadeTransition

于 2013-01-16T21:23:33.150 回答