WPF 绕圈进度条(一)

简介: 在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码:     1、控件界面 ...

在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 

 

 1、控件界面

<UserControl x:Class="ProgressBarControl" 
             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="200" d:DesignWidth="300"
             Background="Gray" Loaded="ProgressBarControl_OnLoaded">

    <Grid>
        <Grid.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Height" Value="{Binding EclipseSize}"></Setter>
                <Setter Property="Width" Value="{Binding EclipseSize}"></Setter>
                <Setter Property="Stretch" Value="Fill"></Setter>
                <!--设置圆的颜色-->
                <Setter Property="Fill" Value="White"></Setter>
            </Style>
        </Grid.Resources>
        <StackPanel   HorizontalAlignment="Center"  
            VerticalAlignment="Center">
            <Viewbox Width="{Binding ViewBoxSize}" Height="{Binding ViewBoxSize}"  
            HorizontalAlignment="Center"  
            VerticalAlignment="Center">
                <Grid x:Name="LayoutRoot"   
                Background="Transparent"  
                HorizontalAlignment="Center"  
                VerticalAlignment="Center">
                    <!--此处有canvas的加载和卸载事件-->
                    <Canvas x:Name="ProgressBarCanvas" RenderTransformOrigin="0.5,0.5"  
                    HorizontalAlignment="Center"  
                    VerticalAlignment="Center" Width="{Binding CanvasSize}"  
                    Height="{Binding CanvasSize}" Loaded="HandleLoaded"  
                    Unloaded="HandleUnloaded"  >
                        <!--画圆-->                        
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="SpinnerRotate" Angle="0" />
                        </Canvas.RenderTransform>
                    </Canvas>
                </Grid>
            </Viewbox>
        </StackPanel>
    </Grid>
</UserControl> 

 

2、控件后台逻辑:

 控件后台:

/// <summary>
    /// 进度条
    /// </summary>
    public partial class ProgressBarControl : UserControl
    {
        //集成到按指定时间间隔和指定优先级处理的 System.Windows.Threading.Dispatcher 队列中的计时器。
        private DispatcherTimer animationTimer;
        private ProgressBarDataModel _dataModel;
        private int index = 0;
        #region 构造方法与加载
        /// <summary>
        /// 构造方法
        /// </summary>
        public ProgressBarControl()
        {
            InitializeComponent();
            
        }
        /// <summary>
        /// 加载后刷新
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ProgressBarControl_OnLoaded(object sender, RoutedEventArgs e)
        {
            animationTimer = new DispatcherTimer(DispatcherPriority.ContextIdle, Dispatcher);
            //指定时间间隔
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, TimeSpan);
            if (EllipseCount < 1)
            {
                EllipseCount = 12;
            }
            for (int i = 0; i < EllipseCount; i++)
            {
                ProgressBarCanvas.Children.Add(new Ellipse());
            }
            var dataModel = new ProgressBarDataModel()
            {
                CanvasSize = CanvasSize,
                EclipseSize = EllipseSize
            };
            _dataModel = dataModel;
            this.DataContext = dataModel;
        }
        #endregion

        #region 属性
        /// <summary>
        /// 获取或设置圆圈数量
        /// 默认12
        /// </summary>
        public double EllipseCount
        {
            get { return (double)GetValue(EllipseCountProperty); }
            set { SetValue(EllipseCountProperty, value); }
        }
        public static readonly DependencyProperty EllipseCountProperty =
            DependencyProperty.Register("EllipseCount", typeof(double), typeof(ProgressBarControl),
            new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        /// <summary>
        /// 获取或设置圆圈大小
        /// 默认10
        /// </summary>
        public double EllipseSize
        {
            get { return (double)GetValue(EllipseSizeProperty); }
            set { SetValue(EllipseSizeProperty, value); }
        }
        public static readonly DependencyProperty EllipseSizeProperty =
            DependencyProperty.Register("EllipseSize", typeof(double), typeof(ProgressBarControl),
            new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        /// <summary>
        /// 获取或设置面板大小
        /// 默认80
        /// </summary>
        public double CanvasSize
        {
            get { return (double)GetValue(CanvasSizeProperty); }
            set { SetValue(CanvasSizeProperty, value); }
        }
        public static readonly DependencyProperty CanvasSizeProperty =
            DependencyProperty.Register("CanvasSize", typeof(double), typeof(ProgressBarControl),
            new FrameworkPropertyMetadata(80.0, FrameworkPropertyMetadataOptions.AffectsRender));

        /// <summary>
        /// 获取或设置每次旋转角度
        /// 默认10.0
        /// </summary>
        public double StepAngle
        {
            get { return (double)GetValue(StepAngleProperty); }
            set { SetValue(StepAngleProperty, value); }
        }

        public static readonly DependencyProperty StepAngleProperty =
            DependencyProperty.Register("StepAngle", typeof(double), typeof(ProgressBarControl),
            new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));
        /// <summary>
        /// 获取或设置每次旋转间隔时间(毫秒)
        /// 默认100毫秒
        /// </summary>
        public int TimeSpan
        {
            get { return (int)GetValue(TimeSpanProperty); }
            set { SetValue(TimeSpanProperty, value); }
        }
        public static readonly DependencyProperty TimeSpanProperty =
            DependencyProperty.Register("TimeSpan", typeof(int), typeof(ProgressBarControl),
            new FrameworkPropertyMetadata(100, FrameworkPropertyMetadataOptions.AffectsRender));
       
        #endregion

        #region 方法
        /// <summary>
        /// Canvas加载
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void HandleLoaded(object sender, RoutedEventArgs e)
        {
            //设置设置圆的位置和旋转角度
            SetEclipsePosition(_dataModel);
            //DesignerProperties   提供用于与设计器进行通信的附加属性。
            if (!DesignerProperties.GetIsInDesignMode(this))
            {
                if (this.Visibility == System.Windows.Visibility.Visible)
                {
                    //超过计时器间隔时发生。
                    animationTimer.Tick += HandleAnimationTick;
                    animationTimer.Start();
                }
            }
        }

        /// <summary>
        /// 设置圆的位置和旋转角度
        /// </summary>
        private void SetEclipsePosition(ProgressBarDataModel dataModel)
        {
            //圆周长就是:C = π * d 或者C=2*π*r(其中d是圆的直径,r是圆的半径)
            double r =dataModel.R;

            var children=ProgressBarCanvas.Children;
            int count = children.Count;
            double step = (Math.PI * 2) / count;

            //根据圆中正弦、余弦计算距离
            int index = 0;
            foreach (var element in children)
            {
                var ellipse = element as Ellipse;
                //透明度
                var opacity = Convert.ToDouble(index)/(count - 1);
                ellipse.SetValue(UIElement.OpacityProperty, opacity<0.05?0.05:opacity);
                //距离
                double left = r + Math.Sin(step*index)*r;
                ellipse.SetValue(Canvas.LeftProperty,left);
                double top = r - Math.Cos(step*index)*r;
                ellipse.SetValue(Canvas.TopProperty, top);

                index++;
            }
        }

        /// <summary>
        /// Canvas卸载时
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            animationTimer.Stop();
            //除去委托
            animationTimer.Tick -= HandleAnimationTick;
        }

        /// <summary>
        /// 超过计时器间隔时发生。
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void HandleAnimationTick(object sender, EventArgs e)
        {
            //设置旋转角度
            SpinnerRotate.Angle = (SpinnerRotate.Angle + StepAngle) % 360;
        }
        #endregion
    }
View Code

数据Model类: 

/// <summary>
    /// 进度条Model类
    /// </summary>
    public class ProgressBarDataModel
    {
        public double EclipseSize { get; set; }
        public double CanvasSize { get; set; }
        public double ViewBoxSize
        {
            get
            {
                double length = Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize);
                return length;
            }
        }
        public double EclipseLeftLength
        {
            get
            {
                double length = Convert.ToDouble(CanvasSize) / 2;
                return length;
            }
        }
        public double R
        {
            get
            {
                double length = (Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize)) / 2;
                return length;
            }
        }
    }

 

 

3、取用控件

<control:ProgressBarControl  CanvasSize="100" EllipseCount="10" EllipseSize="10" StepAngle="36" TimeSpan="60"/>

 

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
目录
相关文章
|
C# 数据库 UED
C#-WPF ProgressBar进度条
进度条常用在加载,下载,导出一些比较耗时的地方,利用进度条能让用户看到实时进展,能有更好的用户体验……
596 0
|
人工智能 搜索推荐 C#
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
550 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
|
C#
WPF 绕圈进度条(二)
原文:WPF 绕圈进度条(二) 一 以前的方案 以前写过一个圆点绕圈的进度条,根据参数圆点个数和参数每次旋转角度,主要是在cs文件中动态添加圆点,通过后台定时器,动态设置角度后用正弦余弦计算(x,y)的位置。
841 0
|
前端开发 C#
WPF 绕圈进度条(一)
原文:WPF 绕圈进度条(一) 在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码:     1、控件界面 ...
1397 0
|
C# Windows
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
原文:Photoshop和WPF双剑配合,打造炫酷个性的进度条控件 现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要。UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或者AI设计文件(当然不是全部特征支持),最近研究了一下,也费了一番周折,好在最后实现了预期的效果。
909 0
|
C#
WPF下载远程文件,并显示进度条和百分比
原文:WPF下载远程文件,并显示进度条和百分比 WPF下载远程文件,并显示进度条和百分比 1、xaml  2、CS程序 using System; using System.
1898 0
|
存储 前端开发 C#
WPF自定义控件第一 - 进度条控件
原文:WPF自定义控件第一 - 进度条控件 本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路。 前期一个小任务需要实现一个类似含步骤进度条的控件。虽然对于XAML的了解还不是足够深入,还是摸索着做了一个。
1254 0
|
C#
WPF 控件库——仿制Windows10的进度条
原文:WPF 控件库——仿制Windows10的进度条 一、其实有现成的   先来看看Windows10进度条的两种模式:       网上有不少介绍仿制Windows10进度条的文章,也都实现了不错的效果。
1412 0
|
C#
WPF 简单的绕圈进度条(无cs代码)
方案: 图标位置不变化的情况下设置透明度实现 代码: 0:0:.84 ...
1302 0
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件