UWP Picture Toggle Animations

Recently in the study of Android, LOL Custom record project nearly shut down, and teng Asahi The interface completely changed, good annoying. Just learning to switch animations in Android, I wanted to implement one in the LOL project. First on Baidu to check, mom, the poor data.

Let's do it by myself. Custom controls go a wave

Create a new custom control

Directly change the template file to replace it with an image source bound to the dependency property

<style targettype="Control:imagedisplayer"> <setter property="Template"> <Setter.Value> <controltemplate targettype="Control:imagedisplayer"> <image x:name="Image"Width=" +"height=" +"Source="{TemplateBinding Imagesourcenormal}"/> </ControlTemplate> </Setter.Value> </Setter> </Style>

Add a field to the CS file

DispatcherTimer time = new DispatcherTimer ();
static field image refers to the image control in the template        private static image image;        int i = 1;

Adding dependency properties

 #regionDependencyProperty/// <summary>        ///The Source property that is used to display the image bindings/// </summary>         PublicImageSource Imagesourcenormal {Get{return(ImageSource) GetValue (imagesourcenormalproperty);} Set{SetValue (imagesourcenormalproperty, value);} }         Public Static ReadOnlyDependencyProperty Imagesourcenormalproperty = Dependencyproperty.register ("Imagesourcenormal",typeof(ImageSource),typeof(Imagedisplayer),NewPropertyMetadata (NULL)); #endregion

Add Property

 #regionProperty/// <summary>        ///whether the animation is displayed/// </summary>         Public BOOLIsshow {Get;Private Set; } /// <summary>        ///List<BitmapImage>Images Collection of cyclic displays/// </summary>         PublicList<bitmapimage> Images {Get;Set; } #endregion

Overriding the Onapplytemplate () method

<summary>        ////When reusing a template enable        //</summary> protected override void OnApplyTemplate ()        {            base. OnApplyTemplate ();
Here the image points to the Iamge control in the template            image = GetTemplateChild ("image") as image;
Register the Tick event for time  ignore timer less that R  write wrong don't want to change is so willful time            . Tick + = Time_tick;            Time. Interval = Timespan.frommilliseconds (+);        }

Handling picture transitions in tick events

  /// <summary>        ///Timer Operation/// </summary>        /// <param name= "Sender" ></param>        /// <param name= "E" ></param>        Private Async voidTime_tick (ObjectSenderObjecte) {if(Image = =NULL|| images==NULL) {time.                Stop (); Isshow=false; return; }            if(I >=images.count) {i=1; }            awaitDispatcher.runasync (Windows.UI.Core.CoreDispatcherPriority.Normal, () ={imagesourcenormal=Images[i];            }); I++; }

How to use and stop a write control

 /// <summary>        ///Start Timer/// </summary>         Public voidShow () {time.            Start (); Isshow=true; }        /// <summary>        ///Stop Timer/// </summary>         Public voidStop () {time.        Stop (); }

Now, this control is ready to use the

Add a reference on the page

<local2:imagedisplayer x:name= "Display"/>

Do this when you want to show the animation

//This List is a picture of a collection of pictures named to canonical points like teemo_1.jpg teemo_2.jpg 
 list<bitmapimage> List = new             List<bitmapimage> ();  for  (int  i = 1 ; I < 9 ;  I++//Initialize Picture collection BitmapImage image  = new  BitmapImage (string  . Format ( ms-appx:///resources/teemo_{0}.png                  , I))); List.            ADD (image); } display.            Images  = list; Display. Show ();  

Call this method when you stop the animation

Display. Stop ();

Complete

Write poorly, please understand more

Gayhub Address: Https://github.com/hei12138/LOL-/tree/master/Mycontrols

This is a class library project, and there are some other controls I've customized.

Novice, Welcome to Exchange [email protected]

UWP Picture Toggle Animations