WPF Circular progress bar (i): Overall frame

　　look at the water. WPF Implementation Circular progress bar This article, burst inspiration, decided to make a circular progress bar (user control), named Loadingring.

First of all, the circular progress bar must have a ellipse (this is simply nonsense), so need a ellipse.

To look good, I set it to gray and translucent.

Then I need to populate some of the controls, I want to use ellipse and fill them with Strokedasharray, but later I find it difficult to use the animation with Strokedasharray. Toss for half a day, or use the arc shape in blend. The StartAngle in arc specifies the starting point of the arc, specifying the degree of the end at the top of the circle as 0°,endangle. Now the code is as follows:

1 <EllipseStroke= "Gray"strokethickness= "3"Opacity= "0.6"/>2 <Ed:arcarcthickness= "3"Endangle= "0"Margin= "0"Stretch= "None"Stroke= "Transparent"strokethickness= "0"startangle= "0"Fill= "#FF0071BC"x:name= "Ellipsefill"/>

　　One more detail is to use ED to declare:

1 xmlns:ed= "http://schemas.microsoft.com/expression/2010/drawing"

　　Put Endangle randomly set a number between 1~360 (0 can not see) to see the effect.

The effect is quite satisfying. But there is a very important dependency property that has not yet been defined, to set the user's progress, I set its name to value.

1  Public StaticDependencyProperty Valueproperty;2  Public byteValue3 {4     Get{return(byte) GetValue (Valueproperty); }5     Set{SetValue (valueproperty, value);}6 }7 8 Staticloadingring ()9 {TenValueproperty = Dependencyproperty.register ("Value",typeof(byte),typeof(loadingring),NewFrameworkpropertymetadata ((byte)0,NewPropertychangedcallback (onvaluechanged)); One}

( there is a programmatic detail that is the display conversion of byte before the initial value, because the value defaults to int.) Otherwise the compiler will always tell you the initial value error, cannot call the constructor, but does not know where there is an error. )

　　and a dependency callback function:

Private Static void　　 = (loadingring) D;　　 if;  if000.01;}

do not show the progress of how much, anxious you sink to stay angry? Add a TextBlock as the display progress. Add a line to the XAML code:

1 <TextBlockForeground= "White"FontSize= "+"HorizontalAlignment= "Center"VerticalAlignment= "Center"Margin= "0,-40,0,0"x:name= "TValue"FontFamily= "Segoe UI"><RunText= "0%"/></TextBlock>

There is also a change in the progress update, adding a line to the callback function:　　

1 " % ";

Look at the effect.

Feel good, but always feel that you should tell others what you are doing, add one more TextBlock display event. Add another line to the XAML code:

1 <TextBlockForeground= "White"FontSize= "+"HorizontalAlignment= "Center"VerticalAlignment= "Center"Margin= "0,0,0,-45"x:name= "Ttext"FontFamily= "Segoe UI Light"><RunText= "Something to do ..."/></TextBlock>

　　There is another dependency and callback function:

1  Public StaticDependencyProperty Textproperty;2  Public stringText3 {4  　　 Get{return(string) GetValue (Textproperty); }5  　　 Set{SetValue (textproperty, value);}6 }7 8 Staticloadingring ()9 { TenTextproperty = Dependencyproperty.register ("Text",typeof(string),typeof(loadingring),NewFrameworkpropertymetadata ("Something to do ...",NewPropertychangedcallback (ontextchanged)); OneValueproperty = Dependencyproperty.register ("Value",typeof(byte),typeof(loadingring),NewFrameworkpropertymetadata ((byte)0,NewPropertychangedcallback (onvaluechanged)); A  - } -  the Private Static voidontextchanged (DependencyObject D, DependencyPropertyChangedEventArgs e) - { -loadingring LR =(loadingring) D; -Lr. Ttext.text =LR. Text; +}

The results are pretty good:

The changes in the fill area can be quite rigid as the progress changes, jumping directly to the other side. So the next one will give it a little spirituality and use some animations to make it smoother.

WPF Circular progress bar (i): Overall frame