1. 程式人生 > 程式設計 >WPF實現手風琴式輪播圖切換效果

WPF實現手風琴式輪播圖切換效果

本文例項為大家分享了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,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();
    }
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。