【Win10开发】绘制静态UI

相信经历过Windows Insider的人对下面这个图都不会陌生，偶然看见邹欣老师领导的微软团队写了篇用xaml绘制这个静态页面，那咱也来亲手实验一番。唔。。。请做和放宽！



首先我们来看看xaml代码。

<Grid Background="Black">
<Grid>
<TextBlock Margin="35" FontSize="20" Foreground="White"  HorizontalAlignment="Center" FontFamily="Microsoft YaHei">请坐和放宽</TextBlock>
<Grid Height="200" Width="200" >
<Ellipse Stroke="Gray" StrokeThickness="3"></Ellipse>
<Ellipse Stroke="DeepSkyBlue" StrokeThickness="3"
StrokeDashArray="61.89, 1000"
RenderTransformOrigin="0.5, 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="-90" />
</Ellipse.RenderTransform>
</Ellipse>
<TextBlock FontSize="50" FontFamily="Microsoft YaHei" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">30%</TextBlock>
</Grid>
</Grid>
</Grid>

首先，将Grid的背景设置为黑色。然后画出两个圆形，一个圆形设置为灰色，StrokeThickness属性设置为3，将第二个圆设置为蓝色，StrokeThickness属性设置为3，此时圆形被蓝色填满，这是"进度100%"的效果。那么写这么一句StrokeDashArray="61.89, 1000"。此时我们可以看到一个坐和放宽就绘制出来了，是不是很简单。