WPF轮播图——DependencyProperty

最新推荐文章于 2023-09-25 17:47:53 发布
最新推荐文章于 2023-09-25 17:47:53 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： .NET
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwlyun/article/details/41480103
版权

在WPF实现轮播图，本例使用了用户自定义控件，并设置了DependencyProperty属性以方便做设置，以下是详细步骤：

1.新建WPF项目，新建一个UserControl用户控件用作我们的轮播图控件（本例：PrintS/UC/RollImg.xaml）：

xaml：

<UserControl x:Class="PrintS.UC.RollImg"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="900" d:DesignWidth="900">
    <Grid>
        <Canvas Name="canvas_board" ClipToBounds="True"
            Height="900" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="900">

            <Image Name="image1" Opacity="1.0"
                Canvas.Left="0" Canvas.Top="0" Height="900" Stretch="Fill" Width="900" />

            <Image Name="image2" Opacity="1.0"
                Canvas.Left="0" Canvas.Top="0" Height="900" Stretch="Fill" Width="900" />

        </Canvas>
    </Grid>
</UserControl>
xaml.cs： 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Media.Animation;

namespace PrintS.UC
{
    /// <summary>
    /// RollImg.xaml 的交互逻辑
    /// </summary>
    public partial class RollImg : UserControl
    {
        public RollImg()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 动画静止时间
        /// </summary>
        public double TimeHold
        {
            get { return (double)GetValue(TimeHoldProperty); }
            set { SetValue(TimeHoldProperty, value); }
        }
        public static readonly DependencyProperty TimeHoldProperty =
            DependencyProperty.Register("TimeHold", typeof(double), // 注册属性名
            typeof(RollImg),    // 所属控件
            new PropertyMetadata(5.0) // 默认值
            );

        /// <summary>
        /// 动画播放时间
        /// </summary>
        public double TimeChange
        {
            get { return (double)GetValue(TimeChangeProperty); }
            set { SetValue(TimeChangeProperty, value); }
        }
        public static readonly DependencyProperty TimeChangeProperty =
            DependencyProperty.Register("TimeChange", typeof(double), // 注册属性名
            typeof(RollImg),    // 所属控件
            new PropertyMetadata(3.0) // 默认值
            );

        // 枚举动画类型
        public enum StoryTypes
        {
            /// <summary>
            /// 从右向左
            /// </summary>
            RightToLeft = 1,
            /// <summary>
            /// 从左向右
            /// </summary>
            LeftToRight,
            /// <summary>
            /// 从上向下
            /// </summary>
            TopToBottom,
            /// <summary>
            /// 从下向上
            /// </summary>
            BottomToTop,
            /// <summary>
            /// 不透明度
            /// </summary>
            Opacity
        }
        /// <summary>
        /// 动画类型
        /// </summary>
        public StoryTypes StoryType
        {
            get { return (StoryTypes)GetValue(StoryTypeProperty); }
            set { SetValue(StoryTypeProperty, value); }
        }
        /// <summary>
        /// 在xaml中操作属性，需要声明为DependencyProperty
        /// </summary>
        public static readonly DependencyProperty StoryTypeProperty =
            DependencyProperty.Register("StoryType", typeof(StoryTypes),
            typeof(RollImg),
            new PropertyMetadata(StoryTypes.LeftToRight)
            );

        /// <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; }
        }

        /// <summary>
        /// 滚动宽度
        /// </summary>
        public double width
        {
            get { return this.canvas_board.Width; }
        }

        /// <summary>
        /// 滚动高度
        /// </summary>
        public double height
        {
            get { return this.canvas_board.Height; }
        }

        private int n_index = 0;    // 滚动索引

        private Storyboard _storyboard_RightToLeft;
        /// <summary>
        /// 滚动动画板，从右到左
        /// </summary>
        public Storyboard storyboard_RightToLeft
        {
            get
            {
                if (_storyboard_RightToLeft == null)
                {
                    _storyboard_RightToLeft = new Storyboard();

                    _storyboard_RightToLeft.Children.Add(
                        this.getDAUKF(0.0, -this.width, this.image1, new PropertyPath("(Canvas.Left)"))
                        );

                    _storyboard_RightToLeft.Children.Add(
                        this.getDAUKF(this.width, 0.0, this.image2, new PropertyPath("(Canvas.Left)"))
                        );

                    _storyboard_RightToLeft.FillBehavior = FillBehavior.Stop;
                    _storyboard_RightToLeft.Completed += new EventHandler(storyboard_Completed);
                }
                return _storyboard_RightToLeft;
            }
        }

        private Storyboard _storyboard_LeftToRight;
        /// <summary>
        /// 滚动动画板，从左到右
        /// </summary>
        public Storyboard storyboard_LeftToRight
        {
            get
            {
                if (_storyboard_LeftToRight == null)
                {
                    _storyboard_LeftToRight = new Storyboard();

                    _storyboard_LeftToRight.Children.Add(
                        this.getDAUKF(0.0, this.width, this.image1, new PropertyPath("(Canvas.Left)"))
                        );

                    _storyboard_LeftToRight.Children.Add(
                        this.getDAUKF(-this.width, 0.0, this.image2, new PropertyPath("(Canvas.Left)"))
                        );

                    _storyboard_LeftToRight.FillBehavior = FillBehavior.Stop;
                    _storyboard_LeftToRight.Completed += new EventHandler(storyboard_Completed);
                }
                return _storyboard_LeftToRight;
            }
        }

        private Storyboard _storyboard_TopToBottom;
        /// <summary>
        /// 滚动动画板，从上到下
        /// </summary>
        public Storyboard storyboard_TopToBottom
        {
            get
            {
                if (_storyboard_TopToBottom == null)
                {
                    _storyboard_TopToBottom = new Storyboard();

                    _storyboard_TopToBottom.Children.Add(
                        this.getDAUKF(0.0, this.height, this.image1, new PropertyPath("(Canvas.Top)"))
                        );

                    _storyboard_TopToBottom.Children.Add(
                        this.getDAUKF(-this.height, 0.0, this.image2, new PropertyPath("(Canvas.Top)"))
                        );

                    _storyboard_TopToBottom.FillBehavior = FillBehavior.Stop;
                    _storyboard_TopToBottom.Completed += new EventHandler(storyboard_Completed);
                }
                return _storyboard_TopToBottom;
            }
        }

        private Storyboard _storyboard_BottomToTop;
        /// <summary>
        /// 滚动动画板，从下到上
        /// </summary>
        public Storyboard storyboard_BottomToTop
        {
            get
            {
                if (_storyboard_BottomToTop == null)
                {
                    _storyboard_BottomToTop = new Storyboard();

                    _storyboard_BottomToTop.Children.Add(
                        this.getDAUKF(0.0, -this.height, this.image1, new PropertyPath("(Canvas.Top)"))
                        );

                    _storyboard_BottomToTop.Children.Add(
                        this.getDAUKF(this.height, 0.0, this.image2, new PropertyPath("(Canvas.Top)"))
                        );

                    _storyboard_BottomToTop.FillBehavior = FillBehavior.Stop;
                    _storyboard_BottomToTop.Completed += new EventHandler(storyboard_Completed);
                }
                return _storyboard_BottomToTop;
            }
        }

        private Storyboard _storyboard_Opacity;
        /// <summary>
        /// 滚动动画板，渐现
        /// </summary>
        public Storyboard storyboard_Opacity
        {
            get
            {
                if (_storyboard_Opacity == null)
                {
                    _storyboard_Opacity = new Storyboard();

                    _storyboard_Opacity.Children.Add(
                        this.getDAUKF(0.0, 1.0, this.image2, new PropertyPath("(Image.Opacity)"))
                        );

                    _storyboard_Opacity.FillBehavior = FillBehavior.Stop;
                    _storyboard_Opacity.Completed += new EventHandler(storyboard_Completed);
                }
                return _storyboard_Opacity;
            }
        }

        /// <summary>
        /// 获取动画中Double类型属性的关键帧组
        /// </summary>
        /// <param name="from">初始值</param>
        /// <param name="to">目标值</param>
        /// <param name="obj">动画控件</param>
        /// <param name="path">动画属性</param>
        /// <returns>关键帧组</returns>
        DoubleAnimationUsingKeyFrames getDAUKF(double from, double to, DependencyObject obj, PropertyPath path)
        {
            DoubleAnimationUsingKeyFrames daukf = new DoubleAnimationUsingKeyFrames();
            LinearDoubleKeyFrame k1 = new LinearDoubleKeyFrame(from, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(this.TimeHold)));
            LinearDoubleKeyFrame k2 = new LinearDoubleKeyFrame(to, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(this.TimeHold + this.TimeChange)));
            daukf.KeyFrames.Add(k1);
            daukf.KeyFrames.Add(k2);
            Storyboard.SetTarget(daukf, obj);
            Storyboard.SetTargetProperty(daukf, path);
            return daukf;
        }

        // 动画结束时
        void storyboard_Completed(object sender, EventArgs e)
        {
            rollNum--;

            // 显示图片
            this.ResetStory();

            // 继续下轮动画
            this.BeginStoty();
        }

        /// <summary>
        /// 开始滚动动画
        /// </summary>
        public void Begin()
        {
            if (!isBegin)
            {
                isBegin = true;

                // 显示图片
                this.ResetStory();

                // 开始动画
                this.BeginStoty();
            }
        }

        /// <summary>
        /// 开始播放动画
        /// </summary>
        void BeginStoty()
        {
            switch (this.StoryType)
            {
                case StoryTypes.LeftToRight:
                    this.storyboard_LeftToRight.Begin();
                    break;
                case StoryTypes.TopToBottom:
                    this.storyboard_TopToBottom.Begin();
                    break;
                case StoryTypes.BottomToTop:
                    this.storyboard_BottomToTop.Begin();
                    break;
                case StoryTypes.Opacity:
                    this.storyboard_Opacity.Begin();
                    break;
                default:
                    this.storyboard_RightToLeft.Begin();
                    break;
            }
        }

        /// <summary>
        /// 初始化动画版，显示动画中的图片
        /// </summary>
        void ResetStory()
        {
            // 图片复位
            switch (this.StoryType)
            {
                case StoryTypes.LeftToRight:
                    this.image1.SetValue(Canvas.LeftProperty, 0.0);
                    this.image2.SetValue(Canvas.LeftProperty, -this.width);
                    break;
                case StoryTypes.TopToBottom:
                    this.image1.SetValue(Canvas.TopProperty, 0.0);
                    this.image2.SetValue(Canvas.TopProperty, -this.height);
                    break;
                case StoryTypes.BottomToTop:
                    this.image1.SetValue(Canvas.TopProperty, 0.0);
                    this.image2.SetValue(Canvas.TopProperty, this.height);
                    break;
                case StoryTypes.Opacity:
                    this.image2.SetValue(Image.OpacityProperty, 0.0);
                    break;
                default:
                    this.image1.SetValue(Canvas.LeftProperty, 0.0);
                    this.image2.SetValue(Canvas.LeftProperty, this.width);
                    break;
            }

            // 显示图片
            if (this.ls_images.Count > 0)
            {
                try
                {
                    this.image1.Source = this.ls_images[this.n_index++ % this.ls_images.Count];
                    this.image2.Source = this.ls_images[this.n_index % this.ls_images.Count];
                }
                catch (Exception ex)
                {
                    this.image1.Source = new BitmapImage();
                    this.image2.Source = new BitmapImage();
                }
            }
            else
            {
                this.image1.Source = new BitmapImage();
                this.image2.Source = new BitmapImage();
            }
        }
    }
}
2.在主窗口中使用轮播图控件： 

<Window x:Class="PrintS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:uc="clr-namespace:PrintS.UC"
        Title="PrintS" Height="900" Width="1440" 
        Loaded="Window_Loaded" WindowState="Maximized" WindowStyle="None">
    <Grid>

        <uc:RollImg x:Name="rollImg" StoryType="Opacity" TimeHold="3" TimeChange="2"
            Height="900" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="900" />

    </Grid>
</Window>
因为我们的轮播图控件中，声明了StoryType、TimeHold、TimeChange的属性（DependencyProperty），可以很方便地在主窗口的xaml中进行设置

部分代码此处省略，可参考简化版：http://blog.csdn.net/xwlyun/article/details/41477385


影天
关注
专栏目录
Wpf制作的主流图片轮播效果控件
12-13
Wpf主流图片轮播。一般新闻资讯会用到的。网站常见的样式。在网上找了好久，没找到，就自己做了一个。希望对你有帮助。
WPF实现轮播图
最新发布
qq_45356948的博客
01-27 517
wpf 实现轮播图
WPF实现轮播图（图片、视屏）
不迁怒，不贰过。小知识，大智慧。
09-22 2532
1、WPF技术实现图片轮播 2、WPF技术实现视屏轮播 3、WPF技术实现图片视屏组合轮播
wpf 自定义轮播图组件
pw8992134的博客
03-17 607
carousel组件留出了许多接口，比如在播放视频时希望视频播放完成再去自动播放轮播图。还留出相应的事件如下。可自实现sizechanged，visiblechanged实现变化逻辑。也可以使用mvvm绑定到items，autoplay等属性。timer请先解除事件绑定和停止计时器，再置为null。视频资源请指定内容，较新复制选项。
WPF图片轮播控件实例
m0_53715125的博客
07-04 1066
wpf图片轮播控件，包括自动播放，下一张上一张，缩放，拖动等功能
22种WPF图片轮播特效.zip
10-22
在本文中，我们将深入探讨基于WPF（Windows Presentation Foundation）的图片轮播特效，这是一个用于构建桌面应用程序的强大框架。标题“22种WPF图片轮播特效.zip”表明这是一个包含22种不同图像切换效果的资源包，...
WPF 图片轮播 2D 3D
11-17
**WPF 图片轮播 2D 3D** Windows Presentation Foundation（WPF）是Microsoft开发的一个用于构建桌面应用程序的框架，它提供了丰富的图形、多媒体和界面设计能力。在WPF中，我们可以创建复杂的2D和3D图像展示，其中...
WPF C# 轮播图
06-19
这个类是C# WPF功能的轮播图，只有一个类，简单。 用的时候 直接实例化，然后将需要轮播的List传进去，是参考网上的一个Demo，但是那个Demo耗内存，我修改了一下
WPF实现的图片轮播控件
10-12
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现一个自定义的图片轮播控件。WPF是.NET Framework中的一个强大的UI框架，它提供了丰富的图形功能和强大的数据绑定机制，使得创建美观且...
WPF 图片滑动轮播，按钮滑动，左右滑动，下标点击定位
08-05
WPF 图片滑动轮播，按钮滑动，左右滑动，下标点击定位
WPF 图片轮播 3D
11-17
在Windows Presentation Foundation（WPF）中，实现3D图片轮播是一种高级的用户界面技术，它结合了2D图像处理和3D图形渲染，为用户提供更丰富、更动态的视觉体验。WPF提供了强大的图形处理能力，使得创建这种效果...
用viewpager实现图片轮播
weixin_34246551的博客
11-21 174
应用中常常遇到图片轮播的需求，这时候就需要用到viewpager这个组件。viewpager是android support v4 中提供的一个组件。viewpager使用需要以下几步骤： 1.在布局文件中添加viewpager组件 1 <android.support.v4.view.ViewPager 2 android:id="@+id/vp_adv" 3 ...
wpf简单的轮播图
qq_41617901的博客
01-22 1603
<UserControl x:Class="CustomControl.UserControl.LbtCtrl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlfor.
WPF轮播图实现方式
dotNET跨平台
08-24 1291
WPF开发者QQ群：340500857 | 微信群 -> 进入公众号主页加入组织欢迎转发、分享、点赞、在看，谢谢~。01—效果预览效果预览（更多效果请下载源码体验）：02...
WPF轮播图——UserControl
xwlyun的专栏
11-25 9857
在WPF中实现轮播图的方法有很多，这里将采用UserControl用户自定义控件的方式
WPF动态呈现、控制Gif，及图片轮播，3D圆，Path，多方式填充等扩展知识
rwo_bear的博客
09-25 664
/获取控制对象//控制播放//暂停//到指定帧control.CurrentFrameChanged//帧改变触发事件//指定gif源//控制速率gif:ImageBehavior.AutoStart="False"//是否自动播放gif:ImageBehavior.RepeatBehavior=“3x"//重复播放次数gif:ImageBehavior.AnimationLoaded//动画加载时触发事件。
【WPF动画】简单构造一个相册轮播图淡化切换特效
qq_36651243的博客
04-28 610
简单的定时器结合DoubleAnimation使用示例，实现轮播图淡化切入特效。
site:download.csdn.net wpf轮播图
10-16
WPF（Windows Presentation Foundation）是一种用于创建 Windows 应用程序的框架。轮播图是用来展示多张图片或内容的一种常见的网页设计元素。要在 CSDN 的下载网站上找到 WPF 轮播图的资源，我们可以通过在搜索引擎中输入 "site:download.csdn.net wpf轮播图" 来进行检索。 "site:download.csdn.net" 是一个特殊的搜索语法，用于限定搜索范围仅限于 CSDN 下载网站。这样，搜索引擎将仅返回在 CSDN 下载网站上找到的相关内容。 "wpf轮播图" 是我们要搜索的具体关键词。WPF 轮播图表示我们正在寻找关于 WPF 框架下的轮播图组件或代码示例。 在搜索结果中，我们可以找到相关的下载资源，这些资源可能是包含 WPF 轮播图相关代码的示例项目、教程或者其他相关的文件。我们可以浏览这些资源，根据自己的需要选择合适的下载项目。 总之，要在 CSDN 的下载网站上找到 WPF 轮播图资源，只需在搜索引擎中输入 "site:download.csdn.net wpf轮播图"，然后浏览返回的搜索结果即可找到适合的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值