當在圖像控件中加載時動畫圖像

Question

我想要創建圖像的幻燈片。爲此，我在每次設定的時間間隔後在圖像控制中加載了新圖像。但每次我加載一個新的圖像它沒有任何動畫，我需要加載每個圖像與過渡動畫或淡入淡出動畫。在Image控件中更改圖像時如何實現動畫？以下是代碼：

XAML：

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

XAML.cs

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

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

Answer 2

希望這有助於。

請單獨運行此代碼。

<Grid Height="200" Width="200"> 
    <Grid.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard > 
       <Storyboard > 
        <ObjectAnimationUsingKeyFrames Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="img1" Storyboard.TargetProperty="(Image.Source)"> 
         <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
          <DiscreteObjectKeyFrame.Value> 
           <BitmapImage UriSource="image1.png" /> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
         <DiscreteObjectKeyFrame KeyTime="00:00:02"> 
          <DiscreteObjectKeyFrame.Value> 
           <BitmapImage UriSource="image2.png" /> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
         <DiscreteObjectKeyFrame KeyTime="00:00:04"> 
          <DiscreteObjectKeyFrame.Value> 
           <BitmapImage UriSource="image3.png" /> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <DoubleAnimation Storyboard.TargetName="img1" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From="0.1" To="1" Duration="00:00:02"></DoubleAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Grid.Triggers> 
    <Image x:Name="img1" Stretch="Fill"></Image> 
</Grid> 

更新

<Storyboard FillBehavior="Stop" x:Key="FadeOut"> 
     <DoubleAnimation FillBehavior="Stop" Storyboard.TargetName="ScreensaverImage" Storyboard.TargetProperty="Opacity" From="0.05" To="1" Duration="0:0:2"> 
     </DoubleAnimation> 
    </Storyboard> 

<Storyboard FillBehavior="Stop" x:Key="FadeIn"> 
     <DoubleAnimation Storyboard.TargetName="ScreensaverImage" FillBehavior="Stop" Storyboard.TargetProperty="Opacity" From="1" To=".05" Duration="0:0:2"> 
     </DoubleAnimation> 
    </Storyboard> 

<Grid> 
    <Image x:Name="ScreensaverImage"></Image> 
</Grid> 

public partial class MainWindow : Window 
{ 

    List<Uri> savedImage = new List<Uri>(); 
    int i = 0; 
    Storyboard fadeIn, fadeOut; 

    public MainWindow() 
    { 
     InitializeComponent(); 
     this.Loaded += MainWindow_Loaded; 
     savedImage.Add(new Uri("image1.png", UriKind.Relative)); 
     savedImage.Add(new Uri("image2.png", UriKind.Relative)); 
     savedImage.Add(new Uri("image3.png", UriKind.Relative)); 
    } 

    void MainWindow_Loaded(object sender, RoutedEventArgs e) 
    { 
     if (savedImage.Count > 0) 
     { 
      fadeIn = (Storyboard)this.Resources["FadeIn"]; 
      fadeOut = (Storyboard)this.Resources["FadeOut"]; 

      fadeIn.Completed += fadeIn_Completed; 
      fadeOut.Completed += fadeOut_Completed; 
      ScreensaverImage.Source = new BitmapImage(savedImage[i++]); 
      if (savedImage.Count > 1) 
      { 
       BeginStoryboard(fadeOut); 

      } 
      ScreensaverImage.Visibility = System.Windows.Visibility.Visible; 
     } 
     else 
     { 
      ScreensaverImage.Visibility = System.Windows.Visibility.Collapsed; 
     } 
    } 

    void fadeOut_Completed(object sender, EventArgs e) 
    { 
     fadeIn.Begin(); 
    } 

    void fadeIn_Completed(object sender, EventArgs e) 
    { 
     if (i == savedImage.Count) 
      i = 0; 
     ScreensaverImage.Source = new BitmapImage(savedImage[i++]); 
     fadeOut.Begin(); 
    } 



} 

Answer 3

可以使用MetroImageControl或MetroContentControl在提供： Mahapps library for metro style