• 加载进度【圆圈+百分比】


    为了增加用户体验,我们在打打开较大的文件,或者在一些耗时的操作中,我们可以通过增加进度条,保证更好的用户提体验

    以下主要展示的是圆圈+百分比的一个加载进度模板

    设计代码如下:

                <Grid Panel.ZIndex="-1" Visibility="{Binding LoadingVisibility}">
                    <Grid.RowDefinitions>
    
                        <RowDefinition Height="30"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
    
                    <Label Name="lbShow" Grid.Row="0"  HorizontalAlignment="Left" Margin="38,5,0,0" VerticalAlignment="Top"  RenderTransformOrigin="-0.375,0.3"/>
                    <ProgressBar Name="pbBar" Grid.Row="1"  Minimum="0"
                                 Maximum="100"
                                 Value="{Binding LoaddingPercent, Mode=OneWay}" Height="120" Width="120" >
                        <ProgressBar.Template>
                            <ControlTemplate TargetType="ProgressBar">
                                <Border Background="{TemplateBinding Value, Converter={StaticResource ValueToProcessConverter}, ConverterParameter=200}"/>
                            </ControlTemplate>
                        </ProgressBar.Template>
                    </ProgressBar>
                </Grid>
    

      我们需要将数据转换成ProgressBar的需要的值,因此需要转换器,代码如下

     public class ValueToProcessConverter : IValueConverter
        {
            private const double Thickness = 8;
            private const double Padding = 1;
            private const double WarnValue = 60;
            private const int SuccessRateFontSize = 34;
            private static readonly SolidColorBrush NormalBrush;
            private static readonly SolidColorBrush WarnBrush;
            private static readonly Typeface SuccessRateTypeface;
    
            private string percentString;
            private Point centerPoint;
            private double radius;
    
            static ValueToProcessConverter()
            {
                NormalBrush = new SolidColorBrush(Colors.Green);
                WarnBrush = new SolidColorBrush(Colors.Red);
                SuccessRateTypeface = new Typeface(new FontFamily("MSYH"), new FontStyle(), new FontWeight(), new FontStretch());
            }
    
            public ValueToProcessConverter()
            {
    
            }
    
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value is double && !string.IsNullOrEmpty((string)parameter))
                {
                    double arg = (double)value;
                    double width = double.Parse((string)parameter);
                    radius = width / 2;
                    centerPoint = new Point(radius, radius);
    
                    return DrawBrush(arg, 100, radius, radius, Thickness, Padding);
                }
                else
                {
                    throw new ArgumentException();
                }
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
    
            /// <summary>
            /// 根据角度获取坐标
            /// </summary>
            /// <param name="CenterPoint"></param>
            /// <param name="r"></param>
            /// <param name="angel"></param>
            /// <returns></returns>
            private Point GetPointByAngel(Point CenterPoint, double r, double angel)
            {
                Point p = new Point();
                p.X = Math.Sin(angel * Math.PI / 180) * r + CenterPoint.X;
                p.Y = CenterPoint.Y - Math.Cos(angel * Math.PI / 180) * r;
    
                return p;
            }
    
            /// <summary>
            /// 根据4个坐标画出扇形
            /// </summary>
            /// <param name="bigFirstPoint"></param>
            /// <param name="bigSecondPoint"></param>
            /// <param name="smallFirstPoint"></param>
            /// <param name="smallSecondPoint"></param>
            /// <param name="bigRadius"></param>
            /// <param name="smallRadius"></param>
            /// <param name="isLargeArc"></param>
            /// <returns></returns>
            private Geometry DrawingArcGeometry(Point bigFirstPoint, Point bigSecondPoint, Point smallFirstPoint, Point smallSecondPoint, double bigRadius, double smallRadius, bool isLargeArc)
            {
                PathFigure pathFigure = new PathFigure { IsClosed = true };
                pathFigure.StartPoint = bigFirstPoint;
                pathFigure.Segments.Add(
                  new ArcSegment
                  {
                      Point = bigSecondPoint,
                      IsLargeArc = isLargeArc,
                      Size = new Size(bigRadius, bigRadius),
                      SweepDirection = SweepDirection.Clockwise
                  });
                pathFigure.Segments.Add(new LineSegment { Point = smallSecondPoint });
                pathFigure.Segments.Add(
                 new ArcSegment
                 {
                     Point = smallFirstPoint,
                     IsLargeArc = isLargeArc,
                     Size = new Size(smallRadius, smallRadius),
                     SweepDirection = SweepDirection.Counterclockwise
                 });
                PathGeometry pathGeometry = new PathGeometry();
                pathGeometry.Figures.Add(pathFigure);
    
                return pathGeometry;
            }
    
            /// <summary>
            /// 根据当前值和最大值获取扇形
            /// </summary>
            /// <param name="value"></param>
            /// <param name="maxValue"></param>
            /// <returns></returns>
            private Geometry GetGeometry(double value, double maxValue, double radiusX, double radiusY, double thickness, double padding)
            {
                bool isLargeArc = false;
                double percent = value / maxValue;
                percentString = string.Format("{0}%", Math.Round(percent * 100));
                double angel = percent * 360D;
                if (angel > 180) isLargeArc = true;
                double bigR = radiusX;
                double smallR = radiusX - thickness + padding;
                Point firstpoint = GetPointByAngel(centerPoint, bigR, 0);
                Point secondpoint = GetPointByAngel(centerPoint, bigR, angel);
                Point thirdpoint = GetPointByAngel(centerPoint, smallR, 0);
                Point fourpoint = GetPointByAngel(centerPoint, smallR, angel);
                return DrawingArcGeometry(firstpoint, secondpoint, thirdpoint, fourpoint, bigR, smallR, isLargeArc);
            }
    
            private void DrawingGeometry(DrawingContext drawingContext, double value, double maxValue, double radiusX, double radiusY, double thickness, double padding)
            {
                if (value != maxValue)
                {
                    SolidColorBrush brush;
                    if (value < WarnValue)
                    {
                        brush = WarnBrush;
                    }
                    else
                    {
                        brush = NormalBrush;
                    }
                    drawingContext.DrawEllipse(null, new Pen(new SolidColorBrush(Color.FromRgb(0xdd, 0xdf, 0xe1)), thickness), centerPoint, radiusX, radiusY);
                    drawingContext.DrawGeometry(brush, new Pen(), GetGeometry(value, maxValue, radiusX, radiusY, thickness, padding));
                    FormattedText formatWords = new FormattedText(percentString,
                        CultureInfo.CurrentCulture,
                        FlowDirection.LeftToRight,
                        SuccessRateTypeface,
                        SuccessRateFontSize,
                        brush);
                    Point startPoint = new Point(centerPoint.X - formatWords.Width / 2, centerPoint.Y - formatWords.Height / 2);
                    drawingContext.DrawText(formatWords, startPoint);
                }
                else
                {
                    drawingContext.DrawEllipse(null, new Pen(NormalBrush, thickness), centerPoint, radiusX, radiusY);
                    FormattedText formatWords = new FormattedText("100%",
                        CultureInfo.CurrentCulture,
                        FlowDirection.LeftToRight,
                        SuccessRateTypeface,
                        SuccessRateFontSize,
                        NormalBrush);
                    Point startPoint = new Point(centerPoint.X - formatWords.Width / 2, centerPoint.Y - formatWords.Height / 2);
                    drawingContext.DrawText(formatWords, startPoint);
                }
    
                drawingContext.Close();
            }
    
            /// <summary>
            /// 根据当前值和最大值画出进度条
            /// </summary>
            /// <param name="value"></param>
            /// <param name="maxValue"></param>
            /// <returns></returns>
            private Visual DrawShape(double value, double maxValue, double radiusX, double radiusY, double thickness, double padding)
            {
                DrawingVisual drawingWordsVisual = new DrawingVisual();
                DrawingContext drawingContext = drawingWordsVisual.RenderOpen();
    
                DrawingGeometry(drawingContext, value, maxValue, radiusX, radiusY, thickness, padding);
    
                return drawingWordsVisual;
            }
    
            /// <summary>
            /// 根据当前值和最大值画出进度条
            /// </summary>
            /// <param name="value"></param>
            /// <param name="maxValue"></param>
            /// <returns></returns>
            private Brush DrawBrush(double value, double maxValue, double radiusX, double radiusY, double thickness, double padding)
            {
                DrawingGroup drawingGroup = new DrawingGroup();
                DrawingContext drawingContext = drawingGroup.Open();
    
                DrawingGeometry(drawingContext, value, maxValue, radiusX, radiusY, thickness, padding);
    
                DrawingBrush brush = new DrawingBrush(drawingGroup);
    
                return brush;
            }
    
        }
    

      对应的viewModel中只需要添加对应的属性

             /// <summary>
            /// propfull
            /// 加载进度
            /// </summary>
            private double loaddingPercent;
    
            public double LoaddingPercent
            {
                get { return loaddingPercent; }
                set { loaddingPercent = value; OnPropertyChanged(); }
            }
    

      最终效果如下:

  • 相关阅读:
    支付宝支付内容 尚未完成
    mvc 高并发解决方案之一---存储过程
    微信第三方平台开头篇--MVC代码(第三方获取ticket和公众号授权)
    卡券类字段
    Jquery 方法学习
    c# 对象反射赋值未知属性需类型转换
    C# enum 枚举 反射
    MVC c# 调用sql的存储过程
    Javascript装饰器原理
    关于阿里云的产品应用思考
  • 原文地址:https://www.cnblogs.com/Koalin/p/14968989.html
Copyright © 2020-2023  润新知