最近在學習安卓，LOL自定義戰績項目近乎停工，而且騰旭把界面全改了，好煩。剛好學習到安卓中的圖片切換動畫，我就想在LOL項目中實現一個。首先上百度查看一下，媽的，資料少的可憐。

還是自己來吧。自定義控件走一波

效果圖

新建自定義控件

直接改模板文件 把裏面換成一個image source綁定到依賴屬性上

<Style TargetType="control:ImageDisplayer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="
 
control:ImageDisplayer">
                    <Image x:Name="image" Width="40" Height="40" Source="{TemplateBinding ImageSourceNormal}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在cs文件裏添加字段

//這個定時器用來控制圖片切換 
DispatcherTimer time = new DispatcherTimer();
//靜態字段 image指模板中的image控件
        private static Image image;
        int i = 1;

添加依賴屬性

 #region dependencyProperty
        /// <summary>
        /// 用於顯示的Image綁定的Source屬性
        /// </summary>
        public ImageSource ImageSourceNormal
        {
            get { return (ImageSource)GetValue(ImageSourceNormalProperty); }
            set { SetValue(ImageSourceNormalProperty, value); }
        }
        
 
public static readonly DependencyProperty ImageSourceNormalProperty = DependencyProperty.Register("ImageSourceNormal", typeof(ImageSource), typeof(ImageDisplayer), new PropertyMetadata(null));
        #endregion

添加屬性

 #region property
        /// <summary>
        /// 是否在顯示動畫
        /// </summary>
        public bool IsShow { get; private set; }
        /// <summary>
        /// List<BitmapImage> Images循環顯示的集合
        /// </summary>
        public List<BitmapImage> Images { get; set; }
        #endregion

重寫OnApplyTemplate()方法

 /// <summary>
        /// 重用模板時啟用
        /// </summary>
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
//在這裏將image指向模板中的iamge控件
            image = GetTemplateChild("image") as Image;
//註冊time的Tick事件  忽略timer少的那個r  寫錯了 不想改了 就是這麽任性
            time.Tick += Time_Tick;
            time.Interval = TimeSpan.FromMilliseconds(100);
        }

　　在tick事件裏處理圖片切換

  /// <summary>
        /// 計時器操作
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private async void Time_Tick(object sender, object e)
        {
            if (image == null||Images==null)
            {
                time.Stop();
                IsShow = false;
                return;
            }
            if (i >= Images.Count)
            {
                i = 1;
            }
            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
            {
                ImageSourceNormal = Images[i];
            });
            i++;
        }

寫控件的使用與停止方法

 /// <summary>
        /// 開始計時器
        /// </summary>
        public void Show()
        {
            time.Start();
            IsShow = true;
        }
        /// <summary>
        /// 停止計時器
        /// </summary>
        public void Stop()
        {
            time.Stop();
        }

現在，這個控件就可以使用了

在頁面上添加一個引用

 <local2:ImageDisplayer x:Name="display"/>

當你想顯示動畫的時候這樣做

//這個list就是圖片的集合 圖片的命名要規範點 像teemo_1.jpg teemo_2.jpg
List<BitmapImage> list = new List<BitmapImage>();
            for (int i = 1; i < 9; i++)
            {
//初始化圖片集合
                BitmapImage image = new BitmapImage(new Uri(string.Format("ms-appx:///Resources/teemo_{0}.png", i)));
                list.Add(image);
            }
            display.Images = list;
            display.Show();

//停止動畫的時候調用這個方法

display.Stop();

　完成；

寫的不好，請多理解

gayhub地址：https://github.com/hei12138/LOL-/tree/master/Mycontrols

這是一個類庫項目，裏面也有我自定義的一些其他控件

新手，歡迎交流 [email protected]

uwp 圖片切換動畫