最近才接触WPF,想做一个轮播图片的效果,而且要可以滑动切换的,在网上找了好多资料,刚开始没有思路,也没有完整代码参考,搞得头好大,研究了好久终于搞定了,功夫不负有心人啊!哈哈!为了给有同样需求的朋友参考,也给自己做个笔记,话不多说,直接进入正题。
一、开发思路
主要是要有一个容器放置很多张图片,然后让它们排列好,通过添加计时器定时触发切换图片的动作,最后增加鼠标事件以达到左右滑动的效果。
二、代码参考
<1>MainWindow.xaml
<Window x:Class="ImageCarouselApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ImageCarouselApp" mc:Ignorable="d" Title="图片轮播" Height="750" Width="750" Loaded="Window_Loaded"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="10*"></RowDefinition> <RowDefinition Height="2*"></RowDefinition> </Grid.RowDefinitions> <Button Width="500" Grid.Row="0" Background="Transparent" Name="Btn" MouseDown="Btn_MouseDown" MouseUp="Btn_MouseUp" BorderThickness="0"> <Button.Content> <Image Name="Img" Stretch="UniformToFill"/> </Button.Content> </Button> <TextBox Grid.Row="1" Name="IndexInfo" Background="Transparent" Foreground="Blue" FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0"></TextBox> </Grid> </Window>
<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 { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { ObservableCollection<BitmapImage> 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<BitmapImage>(); 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
相关推荐
WPF 图片滑动轮播,按钮滑动,左右滑动,下标点击定位
WPF3D图片轮播效果
WPF 图片轮播 2D 3D
非常优秀的22种WPF图片轮播特效,含源码
WPF 切换图片动画效果 Demo 在同一个Image控件中,改变Source属性时动画实现
WPF 图片轮播 3D
WPF图片动画效果切换
WPF滑动切换画面,类似于触摸移动画面,listbox
wpf3D鼠标滑动切换图片,3D效果,总结了很多网络的源码整合成一个可以滑动切换图片的小程序。本人初学wpf,很多都不懂,希望能和大家交流
WPF鼠标滑轮滚动切换图片,点击图片可放大,180度照片查看和图片倒影。
WPF 3D 弧形旋转轮播可操作面板,不走弯路,适合做3D轮播图、3D轮播操控面板,3D显示上位机,功能强大,思路清晰,可扩展性强
这是我自己写的WPF 图片滑动效果动画,利用的是双向环形链表,和wpf自带的动画类doubleAnimation做的,还算简单啦。希望多指点,交流
这个类是C# WPF功能的轮播图,只有一个类,简单。 用的时候 直接实例化,然后将需要轮播的List传进去,是参考网上的一个Demo,但是那个Demo耗内存,我修改了一下
就是一个简单的小东西
实现了图片轮播的功能,只需要调整样式就行,轮播的当前页也显示了的
WPF图片浏览伪3D效果源码 功能介绍: 使用WPF实现了类似3D图片旋转浏览,效果很漂亮,可以自己根据需要修改,有兴趣的可以下载参考。 注意: 开发环境为Visual Studio 2010
Wpf主流图片轮播。一般新闻资讯会用到的。网站常见的样式。在网上找了好久,没找到,就自己做了一个。希望对你有帮助。
前段时间,在网上找wpf轮播相关资源,发现几乎没有完整合适的资源,于是自己写了个。
使用自定义控件写的一个图片轮播控件,实现方法容易并且效果非常不错,不依赖任何第三方库。
wpf的图片切换,单独点击可以跳转到下一关界面,实现图片跳转