[Win 10 Development] draws static UI and win draws static ui

[Win 10 Development] draws static UI and win draws static ui

I believe that those who have experienced Windows Insider will not be unfamiliar with the figure below. I accidentally saw the Microsoft team headed by Jack Xin write an article on drawing this static page using xaml, then let's experiment with our own hands. Well... Please do and relax!

First, let's look at the xaml code.

1 <Grid Background = "Black"> 2 <Grid> 3 <TextBlock Margin = "35" FontSize = "20" Foreground = "White" HorizontalAlignment = "Center" FontFamily = "Microsoft yaHei "> please sit down and relax </TextBlock> 4 <Grid Height =" 200 "Width =" 200 "> 5 <Ellipse Stroke =" Gray "StrokeThickness =" 3 "> </ ellipse> 6 <Ellipse Stroke = "DeepSkyBlue" StrokeThickness = "3" 7 StrokeDashArray = "61.89, 1000 "8 RenderTransformOrigin =" 0.5, 0.5 "> 9 <Ellipse. renderTransform> 10 <RotateTransform Angle = "-90"/> 11 </Ellipse. renderTransform> 12 </Ellipse> 13 <TextBlock FontSize = "50" FontFamily = "Microsoft YaHei" HorizontalAlignment = "Center" verticalignment = "Center" Foreground = "White"> 30% </ textBlock> 14 </Grid> 15 </Grid> 16 </Grid>

Shape. StrokeDashArray attributes
Windows. UI. xaml. shapes. the Shape base class, Ellipse, Line, Path, Rectangle and other classes inherited from it all have the attributes of some Stroke ***** names, which can achieve the Stroke effect. There is a special StrokeDashArray attribute, which can achieve the stroke effect of the dotted line. If it is expanded, it is a good helper for us to implement repetitive UI painting.
In XAML, this attribute is represented in a string format like "1, 2, 3, 4", and essentially a DoubleCollection. The values are paired with each other, indicating the length of the dotted line and the gap between the blank lines in sequence, and can appear periodically. If there are only an odd number of values, the length of the blank interval will be the same as that of the short line in the group that is not matching.

First, set the background of the Grid to black. Then draw two circles, one circle is set to gray, StrokeThickness is set to 3, the second circle is set to blue, StrokeThickness is set to 3, then the circle is filled with blue, this is the effect of "100% progress. Write such a statement StrokeDashArray = "61.89, 1000 ". At this point, we can see a sit and relax to draw out, isn't it very easy.