在前面 中分享了仪表盘的效果，今天咱就来分享一下具体实现的过程,再来看一下效果 :
1 、先把 SweepAngle 绑定到Slider的Value上:
<ArcStartAngle="-180"SweepAngle="{Binding Value, ElementName=Slder}"StrokeThickness="10"Width="162"Height="162"><Arc.Stroke><LinearGradientBrushStartPoint="100%,0%"EndPoint="0%,0%"><GradientStopColor="#DB3529"Offset="0.0" /><GradientStopColor="#E66400"Offset="0.33" /><GradientStopColor="#4CB34C"Offset="0.7" /><GradientStopColor="#30BF7F"Offset="1.0" /></LinearGradientBrush></Arc.Stroke></Arc>
2、自定义一个环形刻度集合:
<Cores:RadialTicksMargin="0,80,0,0"TicksCount="10"/>
3 、重写Render:
double startAngle = Math.PI;for (int i = 0; i < ticksCount; i++){double angle = startAngle - step * i; // Calculate angle from the left sidedouble cosAngle = Math.Cos(angle);double sinAngle = Math.Sin(angle);double startX = centerX + radius * cosAngle;double startY = centerY - radius * sinAngle; // Y axis is positive downwards Point startPoint = new Point(startX, startY);double endX = centerX + innerRadius * cosAngle;double endY = centerY - innerRadius * sinAngle; // Y axis is positive downwards Point endPoint = new Point(endX, endY); context.DrawLine(pen, startPoint, endPoint);}
4、先这么组合玩,回头可以封装一下:
<GridWidth="162"Height="162"><Cores:RadialTicksTicksCount="10"Radius="60"/><ArcStartAngle="-180"SweepAngle="180"StrokeThickness="10"Stroke="#5D6B94"Width="162"Height="162"/><ArcStartAngle="-180"SweepAngle="{Binding Value, ElementName=Slder2}"StrokeThickness="10"Width="162"Height="162"Stroke="{Binding Value, ElementName=Slder2,Converter={StaticResource ValueToArcStrokeConverter}}"></Arc><GridWidth="162"Height="162"RenderTransformOrigin="50%,50%"><Grid.RenderTransform ><RotateTransformAngle="{Binding Value, ElementName=Slder2}"/></Grid.RenderTransform><PathData="M0 512.13l417.03-63.92L512 512l-94.97 64.05z"Fill="#5D6B94"HorizontalAlignment="Center"VerticalAlignment="Center"Height="20"Width="80"Stretch="Uniform"RenderTransformOrigin="50%,50%"></Path></Grid></Grid>
5、最后为了 Stroke 来了个转换器:
int dataValue = Convert.ToInt32(value);if(dataValue <= 90){var color = Color.Parse("#4CB34C"); SolidColorBrush brush = new SolidColorBrush(color);return brush;}else{ LinearGradientBrush brush = new LinearGradientBrush(); brush.StartPoint = Avalonia.RelativePoint.BottomRight; brush.EndPoint = Avalonia.RelativePoint.TopLeft; brush.GradientStops.Add(new GradientStop() { Color = Color.Parse("#E66400"), Offset = 0.33 }); brush.GradientStops.Add(new GradientStop() { Color = Color.Parse("#4CB34C"), Offset = 0.7 }); brush.GradientStops.Add(new GradientStop() { Color = Color.Parse("#30BF7F"), Offset = 1.0 });if(dataValue >= 150) { brush.GradientStops.Insert(0, new GradientStop() { Color = Color.Parse("#FF0000"), Offset = 0.0 }); }return brush;}
最终简单的效果先这样吧 ; 以后有时间的话,可以再去摸索一下更复杂的效果 ;编程不息、Bug不止、无Bug、无生活 ; 改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持! 如果觉得不错,那就伸出您的小手点个赞并关注一下！
