WPF轮播图片以及滑动切换图片

阅读更多

最近才接触WPF，想做一个轮播图片的效果，而且要可以滑动切换的，在网上找了好多资料，刚开始没有思路，也没有完整代码参考，搞得头好大，研究了好久终于搞定了，功夫不负有心人啊！哈哈！为了给有同样需求的朋友参考，也给自己做个笔记，话不多说，直接进入正题。

一、开发思路

      主要是要有一个容器放置很多张图片，然后让它们排列好，通过添加计时器定时触发切换图片的动作，最后增加鼠标事件以达到左右滑动的效果。

二、代码参考

   <1>MainWindow.xaml

   <2>MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace ImageCarouselApp
{
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        ObservableCollection imageList; //图片集合
        int index = 0;  //记录索引
        private DispatcherTimer dispatcherTimer; // 计时器
        private Point startPoint; // 记录滑动开始位置
        private Point endPoint; // 记录滑动结束位置
        private bool autoCutover = true; // 是否自动切换
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ImageInit();
            dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
            dispatcherTimer.Interval = new TimeSpan(0, 0, 30);
            dispatcherTimer.Start();
        }

        private void ImageInit()
        {
            imageList = new ObservableCollection();
            for (int i = 0; i < 5; i++)
            {
                BitmapImage bmImg = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "/Images/" +i.ToString()+".jpg"));
                imageList.Add(bmImg);
                if (i == 0)
                {
                    IndexInfo.Text = "●";

                }
                else
                {
                    IndexInfo.Text += "○";
                }
            }
            if (imageList.Count > 0)
                Img.Source = imageList[index];
        }

        void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            if (this.autoCutover)
            {
                index++;
                if (index >= imageList.Count)
                {
                    index = 0;

                }
                if (imageList.Count > 0)
                {
                    Img.Source = imageList[index];
                    IndexInfo.Text = IndexInfo.Text.Substring(imageList.Count - 1) + IndexInfo.Text.Substring(0, imageList.Count - 1);
                }
            }
            else
            {
                this.autoCutover = true;
            }
        }



        private void Btn_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (imageList.Count > 0)
            {
                this.autoCutover = false;
                startPoint = Mouse.GetPosition(e.Source as FrameworkElement);
            }
        }

        private void Btn_MouseUp(object sender, MouseButtonEventArgs e)
        {
            if (imageList.Count > 0)
            {
                endPoint = Mouse.GetPosition(e.Source as FrameworkElement);
                //X轴滑动的距离
                double offsetX = startPoint.X - endPoint.X;
                if (offsetX > 10)
                {
                    ++index;
                    if (index >= imageList.Count)
                    {
                        index = 0;
                    }
                    IndexInfo.Text = IndexInfo.Text.Substring(imageList.Count - 1) + IndexInfo.Text.Substring(0, imageList.Count - 1);
                }
                else if (offsetX < -10)
                {
                    --index;
                    if (index < 0)
                    {
                        index = imageList.Count - 1;
                    }
                    IndexInfo.Text = IndexInfo.Text.Substring(1) + IndexInfo.Text.Substring(0, 1);
                }
                Img.Source = imageList[index];
            }
        }

    }
}

 

三、最终效果

 

转载请注明出处: https://xieke90.iteye.com/blog/2440971

 

• 
• 大小: 619.9 KB

• 查看图片附件