在DrawingVisual上繪製圓形的進度條,相似於IOS系統風格。

1.說明:在WPF中,文件下載時須要顯示下載進度,因爲系統自帶的條型進度條比較佔用空間,改用圓形的進度條,須要在DrawingVisual上呈現。spa

運行的效果如圖:3d

               private Point GetPointOnCir(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;
               }
               private Geometry drawingArc(Point bigCirclefirstPoint, Point bigCirclesecondPoint, Point smallCirclefirstPoint, Point smallCirclesecondPoint, double bigCircleRadius, double smallCircleRadius,bool  isLargeArc)
               {
                       PathFigure pathFigure = new PathFigure { IsClosed = true };
                       pathFigure.StartPoint = bigCirclefirstPoint;
                       pathFigure.Segments.Add(
                         new ArcSegment
                         {
                                 Point = bigCirclesecondPoint,
                                 IsLargeArc = isLargeArc,
                                 Size = new Size(bigCircleRadius, bigCircleRadius),
                                 SweepDirection = SweepDirection.Clockwise
                         });
                       pathFigure.Segments.Add(new LineSegment { Point = smallCirclesecondPoint });
                       pathFigure.Segments.Add(
                        new ArcSegment
                        {
                                Point = smallCirclefirstPoint,
                                IsLargeArc = isLargeArc,
                                Size = new Size(smallCircleRadius, smallCircleRadius),
                                SweepDirection = SweepDirection.Counterclockwise
                        });
                       PathGeometry pathGeometry = new PathGeometry();
                       pathGeometry.Figures.Add(pathFigure);
                       return pathGeometry;
               }
               //根據已保存的大小和文件總大小來計算下載進度百分比
                  private Geometry GetGeometry()
                {
                        bool isLargeArc =false;
                        double percent = double.Parse(Convert.ToString(savedSize)) / double.Parse(Convert.ToString(fileSize));
                        PercentString = string.Format("{0}%",Math.Round(percent*100,0));
                        double angel = percent * 360D;
                        if(angel>180)isLargeArc=true;
                        //double angel = 45;
                        double bigR = 16;
                        double smallR = 13;
                        Point centerPoint = vl.StartPoint;//new Point(100, 300);
                        Point firstpoint = GetPointOnCir(centerPoint, bigR, 0);
                        Point secondpoint = GetPointOnCir(centerPoint, bigR, angel);
                        Point thirdpoint = GetPointOnCir(centerPoint, smallR, 0);
                        Point fourpoint = GetPointOnCir(centerPoint, smallR, angel);
                        return drawingArc(firstp, secondpoint, thirdpoint, fourpoint, bigR, smallR, isLargeArc);
                }

 

畫圓形的進度條,其實是動態畫兩個同心圓,根據文件保存的百分比來計算畫弧形的角度的大小,須要7個參數:大圓的半徑bigR 、小圓的半徑smallR 、同心圓的圓心centerPoint 、大圓的起始點firstpoint 、大圓的結束點secondpoint 、小圓的起始點thirdpoint、小圓的結束點fourpointcode

 

 

最後須要使用DrawingContext把圓給畫出來:orm

                public Visual drawShape()
                {
                        DrawingVisual drawingWordsVisual = new DrawingVisual();
                        DrawingContext drawingContext = drawingWordsVisual.RenderOpen();
                        try
                        {
                                if (savedSize != fileSize)
                                {
                                        drawingContext.DrawEllipse(null, new Pen(Brushes.Gray, 3), vl.StartPoint, 13, 13);
                                        drawingContext.DrawGeometry(vs.VisualBackgroundBrush, vs.VisualFramePen, GetGeometry());
                                        FormattedText formatWords = new FormattedText(PercentString, System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, currentStyle.VisualBackgroundBrush);
                                        formatWords.SetFontWeight(FontWeights.Bold);
                                        Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);
                                        drawingContext.DrawText(formatWords, startPoint);
                                }
                                else
                                {
                                        drawingContext.DrawEllipse(null, new Pen(Brushes.Green, 3), vl.StartPoint, 16, 16);
                                        FormattedText formatWords = new FormattedText("Open", System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, Brushes.Red);
                                        formatWords.SetFontWeight(FontWeights.Bold);
                                        Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);
                                        drawingContext.DrawText(formatWords, startPoint);
                                }

                        }
                        catch (Exception ex)
                        {
                                new SaveExceptionInfo().SaveLogAsTXTInfoex(ex.Message);
                        }
                        finally
                        {
                                drawingContext.Close();
                        }
                        return drawingWordsVisual;
                }
相關文章
相關標籤/搜索