WPF实现手风琴式轮播图切换效果

本文实例为大家分享了WPF实现轮播图切换效果的具体代码，供大家参考，具体内容如下

实现效果如下：

步骤：

1、自定义控件MyImageControl

实现图片的裁切和动画的赋值。

public partial class MyImageControl : UserControl
 {
   public static readonly DependencyProperty ShowImageProperty = DependencyProperty.Register("ShowImage", typeof(BitmapImage), typeof(MyImageControl), new PropertyMetadata(null));
   public BitmapImage ShowImage
   {
     get { return (BitmapImage)GetValue(ShowImageProperty); }
     set { SetValue(ShowImageProperty, value); }
   }

public MyImageControl()
   {
     InitializeComponent();
   }

public Storyboard storyboard = new Storyboard();
   private const int FlipCount = 5;
   BitmapSource[] bitmap = new BitmapSource[FlipCount];
   Image[] images = new Image[FlipCount];

public void GetHorizontalFlip()
   {
     int partImgWidth = (int)this.ShowImage.PixelWidth;
     int partImgHeight = (int)(this.ShowImage.PixelHeight / FlipCount);
     for (int i = 0; i < FlipCount; i++)
     {
       bitmap[i] = GetPartImage(this.ShowImage, 0, i * partImgHeight, partImgWidth, partImgHeight);

images[i] = new Image()
       {
         Width = partImgWidth,
         Height = partImgHeight,
         Source = bitmap[i],        
       };

Canvas.SetTop(images[i], i * partImgHeight);
       this.mainCanvas.Children.Add(images[i]);

DoubleAnimation da = new DoubleAnimation(0, (int)this.ShowImage.PixelWidth, new Duration(TimeSpan.FromMilliseconds((i + 1) * 250)), FillBehavior.HoldEnd);
       storyboard.Children.Add(da);
       Storyboard.SetTarget(da, images[i]);
       Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
     }

storyboard.FillBehavior = FillBehavior.HoldEnd;
     storyboard.Completed += new EventHandler(Storyboard_Completed);
   }

private void Storyboard_Completed(object sender, EventArgs e)
   {
     this.mainCanvas.Children.Clear();
     storyboard.Children.Clear();
   }

private BitmapSource GetPartImage(BitmapImage img, int XCoordinate, int YCoordinate, int Width, int Height)
   {
     return new CroppedBitmap(img, new Int32Rect(XCoordinate, YCoordinate, Width, Height));
   }
 }

2、自定义轮播控件

实现图片点击轮播和动画的启动。

public partial class MyRollControl : UserControl
 {
   public MyRollControl()
   {
     InitializeComponent();
   }

/// <summary>
   /// 是否开始滚动
   /// </summary>
   public bool isBegin = false;

/// <summary>
   /// 本轮剩余滚动数
   /// </summary>
   public int rollNum = 0;

private List<BitmapImage> _ls_images;
   /// <summary>
   /// 滚动图片组
   /// </summary>
   public List<BitmapImage> ls_images
   {
     set
     {
       if (rollNum > 0)
       {
         // 本轮滚动未结束
       }
       else
       {
         // 开始新的一轮滚动
         _ls_images = value;
         rollNum = _ls_images.Count();
       }
     }
     get { return _ls_images; }
   }

private int n_index = 0;// 滚动索引

/// <summary>
   /// 启动
   /// </summary>
   public void Begin()
   {
     if (!isBegin)
     {
       isBegin = true;

this.ResetStory();
       this.controlFront.GetHorizontalFlip();
     }
   }

/// <summary>
   /// 初始化图片
   /// </summary>
   void ResetStory()
   {
     if (this.ls_images.Count > 0)
     {
       this.controlFront.ShowImage = this.ls_images[this.n_index++ ％ this.ls_images.Count];
       this.controlBack.ShowImage = this.ls_images[this.n_index ％ this.ls_images.Count];
     }
   }

private void mainGrid_MouseDown(object sender, MouseButtonEventArgs e)
   {
     if (this.controlFront.storyboard.Children.Count > 0)
     {
       if(this.controlBack.storyboard.Children.Count <= 0)
       {
         Canvas.SetZIndex(this.controlFront, 0);
         this.controlFront.storyboard.Begin();
         this.controlBack.GetHorizontalFlip();
         rollNum--;
         this.ResetStory();
       }
     }
     else if(this.controlFront.storyboard.Children.Count <= 0)
     {
       if(this.controlBack.storyboard.Children.Count > 0)
       {
         this.controlBack.storyboard.Begin();

rollNum--;
         this.ResetStory();
         Canvas.SetZIndex(this.controlFront, -1);
         this.controlFront.GetHorizontalFlip();
       }
     }
   }
 }

3、主窗体调用后台逻辑

public partial class MainWindow : Window
 {
   public MainWindow()
   {
     InitializeComponent();

List<BitmapImage> ls_adv_img = new List<BitmapImage>();
     List<string> listAdv = GetUserImages(@"C:\Image");
     foreach (string a in listAdv)
     {
       BitmapImage img = new BitmapImage(new Uri(a));
       ls_adv_img.Add(img);
     }
     this.rollImg.ls_images = ls_adv_img;
     this.rollImg.Begin();
   }

/// <summary>
   /// 获取当前用户的图片文件夹中的图片路径列表(不包含子文件夹)
   /// </summary>
   private List<string> GetUserImages(string path)
   {
     List<string> images = new List<string>();
     DirectoryInfo dir = new DirectoryInfo(path);
     FileInfo[] files = GetPicFiles(path, "*.jpg,*.png,*.bmp,", SearchOption.TopDirectoryOnly);

if (files != null)
     {
       foreach (FileInfo file in files)
       {
         images.Add(file.FullName);
       }
     }
     return images;
   }

private FileInfo[] GetPicFiles(string picPath, string searchPattern, SearchOption searchOption)
   {
     List<FileInfo> ltList = new List<FileInfo>();
     DirectoryInfo dir = new DirectoryInfo(picPath);
     string[] sPattern = searchPattern.Replace(';', ',').Split(',');
     for (int i = 0; i < sPattern.Length; i++)
     {
       FileInfo[] files = null;
       try
       {
         files = dir.GetFiles(sPattern[i], searchOption);
       }
       catch (System.Exception ex)
       {
         files = new FileInfo[] { };
       }

ltList.AddRange(files);
     }
     return ltList.ToArray();
   }
}

来源：https://blog.csdn.net/dnazhd/article/details/107413269