WPF实现轮播图（图片、视屏）

浅浅的花香味﹌ 2024-04-20 06:00 59阅读 0赞

![在这里插入图片描述][0af3cc554568470e887e8364eeb59181.gif_pic_center]

> ✅作者简介：2022年博客新星 **第八**。热爱国学的Java后端开发者，修心和技术同步精进。  
> ?个人主页：[Java Fans的博客][Java Fans]  
> ?个人信条：不迁怒，不贰过。小知识，大智慧。  
> ?当前专栏：[WPF 案例及知识分享专栏][WPF]  
> ✨特色专栏：[乐趣国学-心性养成之路][-]  
> ?本文内容：WPF实现轮播图（图片、视屏）

#### 文章目录 ####

*   *  1、WPF技术实现图片轮播
     *  2、WPF技术实现视屏轮播
     *  3、WPF技术实现图片视屏组合轮播

![在这里插入图片描述][05da3159cac54ccb9534829fd45a8c40.png]

### 1、WPF技术实现图片轮播 ###

以下是一个使用WPF技术实现图片轮播的简单案例代码示例。在这个示例中，我们将使用Image控件来显示图片，并使用DispatcherTimer来实现图片切换的定时效果。

首先，在XAML文件中创建一个窗口，并添加一个Image控件用于显示图片：

然后，在C\#代码中，实现图片轮播逻辑：

using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Threading;
    
    namespace ImageSlider
    {
        
        public partial class MainWindow : Window
        {
        
            private List<string> imagePaths = new List<string>
            {
        
                "image1.jpg",
                "image2.jpg",
                "image3.jpg",
                // 添加更多图片路径
            };
    
            private int currentIndex = 0;
            private DispatcherTimer timer = new DispatcherTimer();
    
            public MainWindow()
            {
        
                InitializeComponent();
                timer.Interval = TimeSpan.FromSeconds(5); // 设置图片切换间隔
                timer.Tick += Timer_Tick;
                LoadImage(currentIndex); // 初始加载第一张图片
                timer.Start(); // 启动定时器
            }
    
            private void Timer_Tick(object sender, EventArgs e)
            {
        
                currentIndex++;
                if (currentIndex >= imagePaths.Count)
                {
        
                    currentIndex = 0;
                }
                LoadImage(currentIndex);
            }
    
            private void LoadImage(int index)
            {
        
                if (index >= 0 && index < imagePaths.Count)
                {
        
                    string imagePath = imagePaths[index];
                    BitmapImage bitmapImage = new BitmapImage(new Uri(imagePath, UriKind.Relative));
                    imageControl.Source = bitmapImage;
                }
            }
        }
    }

在上述代码中，我们首先定义了一个包含图片路径的列表 imagePaths，然后使用DispatcherTimer来定时切换图片。在窗口初始化时，我们加载第一张图片并启动定时器，定时器触发时会切换到下一张图片。

请确保将示例代码中的图片路径替换为你自己的图片路径，并根据需要调整定时器的间隔。

### 2、WPF技术实现视屏轮播 ###

要在WPF应用程序中实现视频轮播，你可以使用MediaElement控件来播放视频，并使用DispatcherTimer来控制视频的切换。以下是一个简单的示例代码，演示如何实现视频轮播：

首先，在XAML文件中创建一个窗口，并添加一个MediaElement控件用于播放视频：

然后，在C\#代码中，实现视频轮播逻辑：

using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Threading;
    using System.Windows.Media;
    
    namespace VideoSlider
    {
        
        public partial class MainWindow : Window
        {
        
            private List<string> videoPaths = new List<string>
            {
        
                "video1.mp4",
                "video2.mp4",
                "video3.mp4",
                // 添加更多视频路径
            };
    
            private int currentIndex = 0;
            private DispatcherTimer timer = new DispatcherTimer();
    
            public MainWindow()
            {
        
                InitializeComponent();
                timer.Interval = TimeSpan.FromSeconds(10); // 设置视频切换间隔
                timer.Tick += Timer_Tick;
                LoadVideo(currentIndex); // 初始加载第一个视频
                timer.Start(); // 启动定时器
            }
    
            private void Timer_Tick(object sender, EventArgs e)
            {
        
                currentIndex++;
                if (currentIndex >= videoPaths.Count)
                {
        
                    currentIndex = 0;
                }
                LoadVideo(currentIndex);
            }
    
            private void LoadVideo(int index)
            {
        
                if (index >= 0 && index < videoPaths.Count)
                {
        
                    string videoPath = videoPaths[index];
                    Uri videoUri = new Uri(videoPath, UriKind.Relative);
                    mediaElement.Source = videoUri;
                    mediaElement.Play();
                }
            }
        }
    }

在上述代码中，我们首先定义了一个包含视频文件路径的列表 videoPaths，然后使用DispatcherTimer来定时切换视频。在窗口初始化时，我们加载第一个视频并启动定时器，定时器触发时会切换到下一个视频。

请确保将示例代码中的视频文件路径替换为你自己的视频文件路径，并根据需要调整定时器的间隔。

### 3、WPF技术实现图片视屏组合轮播 ###

要在WPF应用程序中实现图片和视频的轮播混合效果，可以借助MediaElement控件播放视频，同时使用Image控件来显示图片。以下是一个示例代码，演示如何实现图片和视频的轮播混合效果：

首先，在XAML文件中创建一个窗口，包含一个MediaElement用于播放视频和一个Image用于显示图片：

然后，在C\#代码中，实现图片和视频的轮播逻辑：

using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Media.Imaging;
    using System.Windows.Threading;
    
    namespace MediaSlider
    {
        
        public partial class MainWindow : Window
        {
        
            private List<string> mediaPaths = new List<string>
            {
        
                "video1.mp4",
                "image1.jpg",
                "video2.mp4",
                "image2.jpg",
                // 添加更多视频和图片路径
            };
    
            private int currentIndex = 0;
            private DispatcherTimer timer = new DispatcherTimer();
    
            public MainWindow()
            {
        
                InitializeComponent();
                timer.Interval = TimeSpan.FromSeconds(10); // 设置切换间隔
                timer.Tick += Timer_Tick;
                LoadMedia(currentIndex); // 初始加载第一个媒体
                timer.Start(); // 启动定时器
            }
    
            private void Timer_Tick(object sender, EventArgs e)
            {
        
                currentIndex++;
                if (currentIndex >= mediaPaths.Count)
                {
        
                    currentIndex = 0;
                }
                LoadMedia(currentIndex);
            }
    
            private void LoadMedia(int index)
            {
        
                if (index >= 0 && index < mediaPaths.Count)
                {
        
                    string mediaPath = mediaPaths[index];
                    if (mediaPath.EndsWith(".mp4", StringComparison.OrdinalIgnoreCase))
                    {
        
                        // 如果是视频文件
                        Uri videoUri = new Uri(mediaPath, UriKind.Relative);
                        mediaElement.Source = videoUri;
                        mediaElement.Play();
                        imageControl.Visibility = Visibility.Collapsed; // 隐藏图片
                        mediaElement.Visibility = Visibility.Visible; // 显示视频
                    }
                    else if (mediaPath.EndsWith(".jpg", StringComparison.OrdinalIgnoreCase))
                    {
        
                        // 如果是图片文件
                        BitmapImage bitmapImage = new BitmapImage(new Uri(mediaPath, UriKind.Relative));
                        imageControl.Source = bitmapImage;
                        imageControl.Visibility = Visibility.Visible; // 显示图片
                        mediaElement.Visibility = Visibility.Collapsed; // 隐藏视频
                    }
                }
            }
        }
    }

在上述代码中，我们定义了一个包含视频文件和图片文件路径的列表 mediaPaths，并使用DispatcherTimer来定时切换媒体。在窗口初始化时，我们加载第一个媒体（可以是视频或图片），并启动定时器，定时器触发时会切换到下一个媒体。

根据文件的扩展名来判断是视频还是图片，并相应地设置MediaElement和Image的可见性。

请确保将示例代码中的媒体文件路径替换为你自己的文件路径，并根据需要调整定时器的间隔。

--------------------

码文不易，本篇文章就介绍到这里，如果想要学习更多**Java系列知识**，**点击**[**关注博主**][Link 1]，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的**第四栏目**：[《国学周更—心性养成之路》][-]，学习技术的同时，我们也注重了心性的养成。

![在这里插入图片描述][e15b88a853574cf790eab90d2fca6520.gif_pic_center]

[0af3cc554568470e887e8364eeb59181.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0903ab4c238748f9a1d6c7ca4f4cedd7.gif
[Java Fans]: https://blog.csdn.net/hh867308122
[WPF]: https://blog.csdn.net/hh867308122/category_12260211.html
[-]: https://blog.csdn.net/hh867308122/category_11971690.html
[05da3159cac54ccb9534829fd45a8c40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ebfd162f91184f81bfcda1c518c99122.png
[Link 1]: https://blog.csdn.net/hh867308122?type=blog
[e15b88a853574cf790eab90d2fca6520.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0592e0bb1a7c4d54a75daf38e0870285.gif