使用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));
    }
  }