New UWP Community Toolkit-radialprogressbar

Overview

The UWP Community Toolkit has a circular progress bar control-Radialprogressbar, which we'll cover in detail with the code to illustrate the implementation of Radialprogressbar.

Radialprogressbar is a circular progress bar control that is represented by the angle of the fill color in the circle, the progress is increased, the fill color increases clockwise until the entire circle is filled, and the progress bar reaches the maximum value. Let's take a look at the official presentation and the demo in our official website:

Source:https://github.com/microsoft/uwpcommunitytoolkit/tree/master/microsoft.toolkit.uwp.ui.controls/radialprogressbar

Doc:https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/controls/radialprogressbar

Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls;

Development process

Code Analysis

Let's take a look at the structure of the Radialprogressbar control:

• Radialprogressbar.cs-radialprogressbar control Definition Class
• Radialprogressbar.xaml-radialprogressbar Control Styles

1. Radialprogressbar.xaml

This is the style of the Radialprogressbar control, and we can see that the Template section consists of Outlinefigurepart and Barfigurepart, respectively, representing the gray bottom of the progress bar and the actual progress bar, because the two-part style is basically the same, So we omitted a part.

As you can see, the two-part style consists of a Path geometry that contains the Parhfigure, whose Segment property contains the ArcSegment: a radian section, which is the basic composition of the style.

<StyleTargetType= "Local:radialprogressbar" ><Setter Property= "Foreground"Value="{ThemeResource Systemcontrolhighlightaccentbrush}" /><Setter Property= "Outline"Value="{ThemeResource Systemcontrolbackgroundbaselowbrush}" /><Setter Property= "Background"Value= "Transparent" /><Setter Property= "Thickness"Value= "4"/><Setter Property= "Template">    <Setter.value>        <ControlTemplateTargetType= "Local:radialprogressbar">            <GridBackground="{TemplateBinding Background}">                <!--Outlinefigurepart of progress bar -                <PathFill= "Transparent"Stroke="{TemplateBinding Outline}"strokethickness="{TemplateBinding Thickness}"Strokedashcap= "Flat">                    <Path.data>                        <PathGeometry>                            <PathGeometry.Figures>                                <pathfigurecollection>                                    <PathFigurex:name= "Outlinefigurepart">                                        <pathfigure.segments>                                            <pathsegmentcollection>                                                <ArcSegmentx:name= "Outlinearcpart"IsLargeArc= "True"sweepdirection= "Clockwise"/>                                            </pathsegmentcollection>                                        </pathfigure.segments>                                    </PathFigure>                                </pathfigurecollection>                            </PathGeometry.Figures>                        </PathGeometry>                    </Path.data>                </Path>                <!--Barfigurepart of Progress Bar -                ...            </Grid>        </ControlTemplate>    </Setter.value></Setter></Style>

2. RadialProgressBar.cs

Take a look at the composition of this class:

The Radialprogressbar class inherits from the ProgressBar class, with the form of a circular progress bar divided into outline and bar two parts, so you can see that the outlinefigure, Barfigure, Outlinearc, and The Bararc property, while the dependency property is:

• Thickness-Indicates the ring size of the circular progress bar, which is defined as 4 by default in 0,xaml
• Outline-A brush that represents the bottom of the circle, defined as gray in Transparent,xaml by default

The Background and Foreground that inherit from ProgressBar, respectively, represent the color of the blank part of the progress bar, and the progress color of the progress bar. Because it inherits from the ProgressBar class, several methods of the Progress class are overloaded:

• Onminimumchanged (old, new)-The process of changing the minimum value of the progress bar will trigger the Rendersegment () method;
• Onmaximumchanged (old, new)-The process of changing the maximum value of the progress bar will trigger the Rendersegment () method;
• OnValueChanged (old, new)-a process that changes the progress value of a progress bar, triggering the rendersegment () method;
• OnApplyTemplate ()-When applying a template or a template change, updating the visual display of the control will trigger the Renderall () method;

There are also two Changed processing methods: Thicknesschangedhandler (d, E) and Sizechangedhandler (S, e), respectively, processing progress bar width change and progress bar size change, will also trigger the Renderall () method;

Here's a look at some of the main methods:

①computenormalizedrange ()

Calculates the interval based on the maximum and minimum values of the progress bar, as well as the current value, calculates the percentage of the current value in the interval, or 0.999 if the current value is > 0.999

Private Double Computenormalizedrange () {    var range = Maximum- Minimum;     var delta = Value- Minimum;     var 0.0 0.0 : Delta/ range;     = Math.min (Math.max (0.00.9999);     return output;}

②computeellipsesize ()

Calculate the size of the circle, according to the actual width and height of the progress bar, remove the safety width, the calculated value of 1/2 is the length of the Ellipse radius;

Private Size computeellipsesize () {    var0.0);     var 2.0 0.0 );     var 2.0 0.0 );     return New Size (width, height);}

③rendersegment ()

The actual rendering of the Arc section calculates the end coordinate of the current arc according to the current angle, size, and ring width, and outputs a value: ISLARGEARC, whether the angle is >= 180 degrees.

Private voidrendersegment () {if(!alltemplatepartsdefined) {        return; }    varNormalizedrange =Computenormalizedrange (); varAngle =2* Math.PI *Normalizedrange; varSize =computeellipsesize (); varTranslationfactor = Math.max (Thickness/2.0,0.0); Doublex = (Math.sin (angle) * size. Width) + size. Width +Translationfactor; Doubley = (((Math.Cos (angle) * size. Height)-size. Height) *-1) +Translationfactor; Bararc.islargearc= Angle >=Math.PI; Bararc.point=NewPoint (x, y);}

④renderall ()

Renders the entire control portion of the progress bar, calculating the starting point of the outlinefigure and Barfigure, new points (Segmentwidth + translationfactor, translationfactor) That is, the horizontal center point at the top of the circle, and then calculates the size of the Outlinearc and Bararc, which is the circle radius, and the angle of the OUTLINEARC is fixed, so just give an initial value and finally call the Rendersegment () method to calculate the actual rendering portion of Bar.

Private voidRenderall () {if(!alltemplatepartsdefined) {        return; }    varSize =computeellipsesize (); varSegmentwidth =size.    Width; varTranslationfactor = Math.max (Thickness/2.0,0.0); Outlinefigure.startpoint= Barfigure.startpoint =NewPoint (Segmentwidth +Translationfactor, Translationfactor); Outlinearc.size= Bararc.size =Newsize (segmentwidth, size.    Height); Outlinearc.point=NewPoint (Segmentwidth + Translationfactor-0.05, Translationfactor); Rendersegment ();}

Invoke Example

We define a Radialprogressbar control with a light gray background, a progress color of green, an interval of 0~100, a current value of 29 and a progress bar width of 20, which can be verified from the sample run diagram.

<Controls:radialprogressbarx:name= "Radialprogressbarcontrol"Grid.column= "1"Value= "$"Foreground= "Green"Thickness= " the"Minimum= "0"Maximum= "+"Width= "$"Height= "$"Outline= "Lightgray"/>

Summarize

Here we will be the UWP Community Toolkit in the Radialprogressbar control of the source code implementation process and simple invocation of the example to complete, we hope to be able to better understand and use this control to help, you can also be based on a simple circular progress bar, Expand more in the different shapes of the progress bar, such as rectangle, solid circle and so on, welcome to communicate, thank you!

Finally, with everyone Amway Uwpcommunitytoolkit official micro-blog:https://weibo.com/u/6506046490, You can follow the latest news through Weibo.

Heartfelt thanks to the outstanding work of Uwpcommunitytoolkit's authors, Thank you much, uwpcommunitytoolkit authors!!!

New UWP Community Toolkit-radialprogressbar