【WPF】自定义刻度盘控件

本文主要介绍一个自定义的旋转刻度盘控件，可以进行配置标签、主刻度、主刻度增量。包含一个简单的演示程序，用于演示如何使用此刻度盘。

左侧表盘的数值范围为：0-1，每0.2个单位有一个主刻度和黑色标签，表盘宽度为150。
中间表盘的数值范围为：0-100，每25个单位有一个主刻度和白色标签，表盘宽度为200。
右边表盘的数值范围为：0-50，每5个单位有一个主刻度和黑色标签，表盘宽度为400。

技术背景

需要了解C#并熟悉wpf的基础知识。

在代码中使用

在代码中可以很方便的使用：

<view:RotaryControl x:Name="_dialTemperature" Grid.Row="1" Grid.Column="3" 
NumberOfMajorTicks="4" MajorTickIncrement="25" FontBrush="White" FontSize="20" 
Background="Transparent" Value="{Binding Temperature, Mode=TwoWay}"/>

上面定义的控件为：带有4个主刻度的表盘，主刻度增量为25，标签为白色，字体大小为20point，透明背景。并将Value绑定到了Temperature属性上。
要创建具有整数值的刻度盘，需要将Value依赖属性绑定到ViewModel中的整型/长整型属性上。对于连续值，需要绑定double属性上。

控件代码

此控件继承WPF中的UserControl：

<UserControl x:Class="WpfRotaryControlDemo.View.RotaryControl"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:local="clr-namespace:WpfRotaryControlDemo.View"

             mc:Ignorable="d" 

             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Name="_grid" Width="200" Height="200" Background="Transparent">
        <Ellipse x:Name="_ellipseOuterDial" Width="150" Height="150" 

         Stroke="Gainsboro" StrokeThickness="4" Fill="SteelBlue" />

        <Ellipse x:Name="_ellipseInnerDial" Width="100" Height="100" >
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#BBBBBB" Offset="0"/>
                    <GradientStop Color="#DDDDDD" Offset="1.0"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Ellipse Width="20" Height="20" Stroke="Gainsboro" StrokeThickness="0">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="_markerTranslation" X="35" Y="0"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="DarkRed" Offset="1.0"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

    </Grid>
</UserControl>

上面的XAML使用3个圆进行创建刻度盘基本样式，包括：一个控制轮廓的外圆，旋钮的内圆和位置指示的小红点。
刻度线和标签在CreateControl方法中创建，该方法从构造函数中进行调用。每个刻度线使用Polyline创建，刻度文字使用Label进行创建。

控件有四个依赖属性：

依赖属性	描述
Value	当前值
NumberOfMajorTicks	主刻度数（不包括0刻度）
MajorTickIncrement	相邻主刻度之间的数字增量
FontBrush	外表盘周围绘制数字的画刷（颜色）

默认情况下，控件宽度为200，这是在XAML和相关代码中进行设置的。

后记

你或许希望通过添加其他依赖属性来对添加对其外观和行为进行控制：例如，每个刻度盘的背景色（Background）、边框颜色（Border colors）、位置指示器以及每个主刻度间隔的次刻度标签的数量。或许还希望定义增量值（当前为1或连续），以允许值为诸如0.1或10。
如果具有C#和WPF基础知识，可以根据自己需要改变表盘的外观或适合你自己的样式。

原文链接

---