服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - C# - WPF实现手风琴式轮播图切换效果

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

2022-10-09 14:17RunnerDNA C#

这篇文章主要为大家详细介绍了WPF实现手风琴式轮播图切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

实现效果如下:

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

步骤:

1、自定义控件MyImageControl

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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、自定义轮播控件

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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、主窗体调用后台逻辑

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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

延伸 · 阅读

精彩推荐
  • C#C#实现微信公众号会员卡管理的示例代码

    C#实现微信公众号会员卡管理的示例代码

    这篇文章主要介绍了C#实现微信公众号会员卡管理的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    软件开发研究11902022-09-14
  • C#浅析C# 9.0 新特性之 Lambda 弃元参数

    浅析C# 9.0 新特性之 Lambda 弃元参数

    这篇文章主要介绍了C# 9.0 新特性之 Lambda 弃元参数的的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,想学习c#的朋友可以了解下...

    精致码农5992022-09-21
  • C#C#使用ADO.Net部件来访问Access数据库的方法

    C#使用ADO.Net部件来访问Access数据库的方法

    数据库的访问是所有编程语言中最重要的部分,C#提供了ADO.Net部件用于对数据库进行访问。本文从最简单易用的微软Access数据库入手讨论在C#中对数据库的...

    C#教程网8792021-10-25
  • C#C#中Byte[]和String之间转换的方法

    C#中Byte[]和String之间转换的方法

    很多朋友不清楚如何在Byte[]和String之间进行转换?下面小编给大家带来了byte与string转换的方法,感兴趣的朋友参考下吧...

    鞠帅7912021-12-02
  • C#Unity利用材质自发光实现物体闪烁

    Unity利用材质自发光实现物体闪烁

    这篇文章主要为大家详细介绍了Unity利用材质自发光实现物体闪烁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Symbolizer8022022-07-19
  • C#常用C#正则表达式汇总介绍

    常用C#正则表达式汇总介绍

    c#正则表达式,用于字符串处理、表单验证等场合,实用高效。现将一些常用的表达式收集于此,以备不时之需。...

    C#教程网6632021-11-08
  • C#详解C#中对于接口的实现方式(隐式接口和显式接口)

    详解C#中对于接口的实现方式(隐式接口和显式接口)

    这篇文章主要介绍了详解C#中对于接口的实现方式(隐式接口和显式接口),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    搬运工_阿壮10372022-08-15
  • C#SuperSocket入门--Telnet服务器和客户端请求处理

    SuperSocket入门--Telnet服务器和客户端请求处理

    本文的控制台项目是根据SuperSocket官方Telnet示例代码进行调试的,官方示例代码:Telnet示例。下面跟着小编一起来看下吧...

    黄昏前黎明后10592021-12-21