ToB企服应用市场:ToB评测及商务社交产业平台

标题: [WPF] 使用 HandyControl 的 CirclePanel 画出表盘刻度 [打印本页]
作者: 乌市泽哥    时间: 2022-9-16 17:25
标题: [WPF] 使用 HandyControl 的 CirclePanel 画出表盘刻度
1. 前言

最近需要一个 WPF 的表盘控件，之前 Cyril-hcj 写过一篇不错的博客 《WPF在圆上画出刻度线》，里面介绍了一些原理及详细实现的代码：
  1. double radius = BackEllipse.Width / 2;
  2. double min = 0; double max = 100;
  3. double step = 360.0 / (max - min);
  4. for (int i = 0; i < max - min; i++)
  5. {
  6.     Line lineScale = new Line
  7.     {
  8.         X1 = ((radius - 20) * Math.Cos(i * step * Math.PI / 180)) + radius,
  9.         Y1 = ((radius - 20) * Math.Sin(i * step * Math.PI / 180)) + radius,
  10.         X2 = (radius * Math.Cos(i * step * Math.PI / 180)) + radius,
  11.         Y2 = (radius * Math.Sin(i * step * Math.PI / 180)) + radius,
  12.         Stroke = Brushes.Red,
  13.         StrokeThickness = 2
  14.     };
  16.     MainCanvas.Children.Add(lineScale);
  17. }
复制代码
我本来想直接参考这篇文章的代码封装成一个控件，但我用得不多封装起来又麻烦，索性考虑用 ItemsControl 实现还比较方便些。
2. 使用 CirclePanel 实现

既然要用 ItemsControl，那首先要有个集合作为它的 ItemsSource。在 XAML 中可以用以下方式创建一个集合：
  1. <x:Array x:Key="AuthorList" Type="{x:Type sys:String}">
  2.     <sys:String>Mahesh Chand</sys:String>
  3.     <sys:String>Praveen Kumar</sys:String>
  4.     <sys:String>Raj Beniwal</sys:String>
  5.     <sys:String>Neel Beniwal</sys:String>
  6.     <sys:String>Sam Hobbs</sys:String>
  7. </x:Array>
复制代码
不过也可以不这么大费周章，在 .NET 中 string 也是一个集合，
可以用作 ItemsControl 的 ItemsSource。但在 Xaml 上直接写 ItemsSource="somestring"` 会报错，可以用 ContentControl 包装一下，写成这样：
  1. <ContentControl Content="111111111111">
  2.     <ContentControl.ContentTemplate>
  3.         <DataTemplate>
  4.             <ItemsControl ItemsSource="{Binding}">
  5. <ItemsControl.ItemsPanel>
  6.     <ItemsPanelTemplate>
  7.         <hc:CirclePanel Diameter="310" />
  8.     </ItemsPanelTemplate>
  9. </ItemsControl.ItemsPanel><ItemsControl.ItemTemplate>
  10. <ItemsControl.ItemsPanel>
  11.     <ItemsPanelTemplate>
  12.         <hc:CirclePanel Diameter="310" />
  13.     </ItemsPanelTemplate>
  14. </ItemsControl.ItemsPanel>    <DataTemplate>
  15. <ItemsControl.ItemsPanel>
  16.     <ItemsPanelTemplate>
  17.         <hc:CirclePanel Diameter="310" />
  18.     </ItemsPanelTemplate>
  19. </ItemsControl.ItemsPanel>        <Rectangle Width="10"
  20. <ItemsControl.ItemsPanel>
  21.     <ItemsPanelTemplate>
  22.         <hc:CirclePanel Diameter="310" />
  23.     </ItemsPanelTemplate>
  24. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  25.     <ItemsPanelTemplate>
  26.         <hc:CirclePanel Diameter="310" />
  27.     </ItemsPanelTemplate>
  28. </ItemsControl.ItemsPanel>   Height="3"
  29. <ItemsControl.ItemsPanel>
  30.     <ItemsPanelTemplate>
  31.         <hc:CirclePanel Diameter="310" />
  32.     </ItemsPanelTemplate>
  33. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  34.     <ItemsPanelTemplate>
  35.         <hc:CirclePanel Diameter="310" />
  36.     </ItemsPanelTemplate>
  37. </ItemsControl.ItemsPanel>   Fill="#383838" />
  38. <ItemsControl.ItemsPanel>
  39.     <ItemsPanelTemplate>
  40.         <hc:CirclePanel Diameter="310" />
  41.     </ItemsPanelTemplate>
  42. </ItemsControl.ItemsPanel>    </DataTemplate>
  43. <ItemsControl.ItemsPanel>
  44.     <ItemsPanelTemplate>
  45.         <hc:CirclePanel Diameter="310" />
  46.     </ItemsPanelTemplate>
  47. </ItemsControl.ItemsPanel></ItemsControl.ItemTemplate>
  48.             </ItemsControl>
  49.         </DataTemplate>
  50.     </ContentControl.ContentTemplate>
  51. </ContentControl>
复制代码
这样 UI 上就会重复创建 12 个 Rectangle，然后设置 ItemsControl 的 ItemsPanel，让这些 Rectangle 按着圆形布局。这里我使用了 HandyControl 的 CirclePanel，这个 Panel 用起来十分简单，它会自动将 Children 在圆形上等距分布：
  1. <ItemsControl.ItemsPanel>
  2.     <ItemsPanelTemplate>
  3.         <hc:CirclePanel Diameter="310" />
  4.     </ItemsPanelTemplate>
  5. </ItemsControl.ItemsPanel>
复制代码
顺便一提，HandyControl 的 Nuget 地址为：https://www.nuget.org/packages/HandyControl/3.3.0?_src=template
最后再添加一些边框和内阴影，一个简单的表盘就完成了。

3.  用 DataTrigger 实现不同的指针

上面的表盘还是做得太朴素了，我们可以用 DataTrigger 让它变得更复杂些。首先改变 ItemsSource 的内容，让它变成 60 个指针。反正只是 60 个，也没多复杂，复制粘贴几次就有了：
  1. [/code]然后设置 DataTrigger，在 Item 的内容等于 1 时指针变粗些：
  2. [code]<ItemsControl.ItemsPanel>
  3.     <ItemsPanelTemplate>
  4.         <hc:CirclePanel Diameter="310" />
  5.     </ItemsPanelTemplate>
  6. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  7.     <ItemsPanelTemplate>
  8.         <hc:CirclePanel Diameter="310" />
  9.     </ItemsPanelTemplate>
  10. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  11.     <ItemsPanelTemplate>
  12.         <hc:CirclePanel Diameter="310" />
  13.     </ItemsPanelTemplate>
  14. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  15.     <ItemsPanelTemplate>
  16.         <hc:CirclePanel Diameter="310" />
  17.     </ItemsPanelTemplate>
  18. </ItemsControl.ItemsPanel>
复制代码

这样看起来就和真的表盘差不多了。
4.  用 OpacityMask 实现方形表盘

这次更进一步实现一个方形的表盘，首先将 CirclePanel 的尺寸变大，然后加长刻度线：

然后在它的背后藏一个 Border，用它作为刻度线的 OpacityMask,这样就完成了一个方形表盘：
  1. <ItemsControl.ItemsPanel>
  2.     <ItemsPanelTemplate>
  3.         <hc:CirclePanel Diameter="310" />
  4.     </ItemsPanelTemplate>
  5. </ItemsControl.ItemsPanel><ItemsControl.ItemsPanel>
  6.     <ItemsPanelTemplate>
  7.         <hc:CirclePanel Diameter="310" />
  8.     </ItemsPanelTemplate>
  9. </ItemsControl.ItemsPanel>
复制代码

5. 用 ArcPanel 实现仪表盘

CirclePanel 虽然很好用，可惜的是不能实现弧形布局，于是我又另外找了 HeBianGu 的 ArcPanel 来实现仪表板，用它替换掉 CirclePanel 即可实现弧形布局的刻度线：
  1. <ItemsControl.ItemsPanel>
  2.     <ItemsPanelTemplate>
  3.         <hc:CirclePanel Diameter="310" />
  4.     </ItemsPanelTemplate>
  5. </ItemsControl.ItemsPanel>
复制代码

5. 最后

这篇文章介绍了如何实现表盘刻度，基本都是用别人的 Panel 实现布局，我自己反而没出什么力，感谢两位大佬实现的优秀 Panel。
顺便一提，也可以用 Ellipe 配合 StrokeDashArray 简单做出这种效果，只是如果太粗的指针会看得出来是个扇形，不是矩形，而且还不够灵活。

源码：https://github.com/DinoChan/wpf_design_and_animation_lab

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4