在图像控件中加载时动画图像

Question

我想创建一个图像幻灯片。为此，我在每个设定的时间间隔后在图像控件中加载了新图像。但是每次我加载一个新图像时，它都没有任何动画，我需要用过渡动画或淡入淡出动画加载每个图像。如何在图像控件中更改图像时实现动画？以下是代码：

XAML：

<Grid>
<Image Source="{Binding CurrentImage}" />
</Grid>

XAML文件

ViewModel = new ScreenSaverViewModel();
this.DataContext = ViewModel;

视图模型.cs

/// <summary>
/// Gets the current image to display on the attract screen. Changes to this property 
/// cause the PropertyChanged event to be signaled
/// </summary>
public string CurrentImage
{
    get { return this.currentImage; }
    protected set
    {
        this.currentImage = value;
        this.OnPropertyChanged("CurrentImage");
    }
}

/// <summary>
/// Gets the observable collection of all images.
/// </summary>
public ObservableCollection<string> Images
{
    get { return this.images; }
}

public ScreenSaverViewModel()
{
    images = new ObservableCollection<string>();

    this.LoadSlideShowImages();

    if (Images != null && Images.Count > 0)
    {
        this.CurrentImage = this.Images[this.currentIndex];

        this.tickTimer = new DispatcherTimer();
        this.tickTimer.Interval = TimeSpan.FromMilliseconds(TimerIntervalMilliseconds);
        this.tickTimer.Tick += (s, e) =>
        {
            this.currentIndex++;
            this.currentIndex = this.currentIndex < this.Images.Count ? this.currentIndex : 0;
            this.CurrentImage = this.Images[this.currentIndex];
        };

        // start the timer after image is loaded
        this.tickTimer.Start();
    }
}

Answer 1

我创建了一个继承 Image 控件的类，当图像控件的源更改时，我在其中引发了属性更改。我已经应用了触发器，现在可以正常工作了。以下是代码：

<controls:ImageControl   Source="{Binding CurrentImage}" >
            <controls:ImageControl.Triggers>
                <EventTrigger RoutedEvent="controls:ImageControl.SourceChanged">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)" From="0" To="1" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </controls:ImageControl.Triggers>
        </controls:ImageControl>


  public class ImageControl : Image
    {
        public static readonly RoutedEvent SourceChangedEvent = EventManager.RegisterRoutedEvent(
      "SourceChanged", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(ImageControl));

        static ImageControl()
        {
            Image.SourceProperty.OverrideMetadata(typeof(ImageControl), new FrameworkPropertyMetadata(SourcePropertyChanged));
        }

        public event RoutedEventHandler SourceChanged
        {
            add { AddHandler(SourceChangedEvent, value); }
            remove { RemoveHandler(SourceChangedEvent, value); }
        }

        private static void SourcePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            Image image = obj as Image;
            if (image != null)
            {
                image.RaiseEvent(new RoutedEventArgs(SourceChangedEvent));
            }
        }
    }