在图像控件中加载后对图像进行动画处理 [英] Animate Image when loaded in Image Control

问题描述

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

I want to create a slideshow of images. For this I have loaded new images in image control after every set interval of time. But each time i load a new image it comes without any animation I need to load each image with a transition animation or fade in-out animation. How can I achieve animation while changing images in Image control? Following is the code:

XAML：

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

XAML.cs

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

ViewModel.cs

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

推荐答案

I创建了一个继承Image控件的类，其中当image控件的Source更改时，我提出了属性更改。我在上面应用了触发器，现在可以正常工作了。以下是代码：

I have created a class inheriting Image control in which I have raised property change when Source of image control changes. on which I have applied trigger this works fine now. Following is the code:

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

这篇关于在图像控件中加载后对图像进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！