[Sample of Mar 10th] WPF animated image show

  • Article

 

Homepage image
Sample of the Day RSS Feed

Sample Download
C# version: https://code.msdn.microsoft.com/CSWPFAnimatedImage-88b938d5
VB version: https://code.msdn.microsoft.com/VBWPFAnimatedImage-be1e0211

Today’s code sample demonstrates how to display a series of photos just like a digital picture frame with a "Wipe" effect in WPF.

 

imageYou can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.

 

Introduction

The sample demonstrates how to display a series of photos just like a digital picture frame with a "Wipe" effect in WPF.

 

Running the Sample

Press F5 to run this application, you will see that the window displays a series of photos just like a digital picture frame with a "Wipe" effect.

 

Using the Code

  1. Add two Image controls named myImage1 and myImage2 on a Window. The myImage1 lies on top of the myImage2.
  2. Set the OpacityMask of the myImage1 to a LinearGradientBrush. Add two GradientStop in the LinearGradientBrush.
  3. Add two Storyboards in the resource dictionary of the Window. One storyboard is named VisibleToInvisible. It animates the two GradientStop above to hide themyImage1. The other storyboard is named InvisibleToVisible. It animates thetwo GradientStop to show the myImage1.
  4. Create a collection of type List<BitmapImage> and add images to be shown in the collection when the Window is loaded.
  5. Subscribe the Completed event of the two storyboards.
  6. In the Completed event handler of the VisibleToInvisible storyboard, changethe Source of the myImage1 to the next image to be shown. Get the InvisibleToVisible storyboard from the resource dictionary and start it.
  7. In the Completed event handler of the InvisibleToVisible storyboard, changethe Source of the myImage2 to the next image to be shown. Get the VisibleToInVisible storyboard from the resource dictionary and start it.

More Information

Storyboard Class
https://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx