WPF自定义控件制作：仪表之单针单数显
1、
2、
代码中相关控件的使用可参考本园博文：WPF Dashboard仪表盘控件的实现
1 <Style TargetType="{x:Type local:Gauge_OnlyPointe}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type local:Gauge_OnlyPointe}"> 5 <Viewbox Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" d:DesignHeight="300" d:DesignWidth="300" MinWidth="170" MinHeight="170"> 6 <Grid > 7 //圆形控件，用于指针运动轨迹 8 <Ellipse Margin="0" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Fill="{TemplateBinding Background}"/> 9 //圆弧路径控件用于绑定长刻度：位置、起始、终止角度绑定到可设置的依赖属性 10 <ed:Arc x:Name="LongTickPath" Margin="{Binding LongTickMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
ArcThicknessUnit="Pixel" Stretch="None" Stroke="Black" StrokeThickness="0" Height="Auto" StartAngle="{TemplateBinding StartAngle}" EndAngle="{TemplateBinding EndAngle}" /> 11 //路径动画、数据集容器控件：数据源绑定到后台（LongTicksInternal），数据类型在后台定义 12 <ec:PathListBox x:Name="LongTick" IsHitTestVisible="False" ItemsSource="{TemplateBinding LongTicksInternal}">
//长刻度数据集显示样式 13 <ec:PathListBox.ItemTemplate> 14 //长刻度数据元样式：宽度、长度、颜色绑定到可设置的依赖属性 15 <DataTemplate> 16 <Border Width="{Binding LongTickWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Height="{Binding LongTickHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" SnapsToDevicePixels="True" UseLayoutRounding="False"
Background="{Binding LongTickColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" /> 17 </DataTemplate> 18 </ec:PathListBox.ItemTemplate> 19 //长刻度路径控件路径属性：在这里将圆弧绑定到了路径控件，并指定了排布方式和方向 20 <ec:PathListBox.LayoutPaths> 21 <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=LongTickPath}" /> 22 </ec:PathListBox.LayoutPaths> 23 </ec:PathListBox> 24 //圆弧路径控件用于绑定短刻度：位置、起始、终止角度绑定到可设置的依赖属性（其他处理同长刻度） 25 <ed:Arc x:Name="SmallTrianglePath" Margin="4" ArcThicknessUnit="Pixel" Stretch="None" Stroke="Black" StrokeThickness="0" Height="Auto"
StartAngle="{TemplateBinding StartAngle}" EndAngle="{TemplateBinding EndAngle}" /> 26 <ec:PathListBox x:Name="SmallTriangle" IsHitTestVisible="False" ItemsSource="{TemplateBinding LongTicksInternal}"> 27 <ec:PathListBox.ItemTemplate> 28 <DataTemplate> 29 <ed:RegularPolygon PointCount="3" Width="10" Height="6" Fill="#FF3BAABC" SnapsToDevicePixels="True" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" > 30 <ed:RegularPolygon.RenderTransform> 31 <TransformGroup> 32 <ScaleTransform/> 33 <SkewTransform/> 34 <RotateTransform Angle="180"/> 35 <TranslateTransform/> 36 </TransformGroup> 37 </ed:RegularPolygon.RenderTransform> 38 </ed:RegularPolygon> 39 </DataTemplate> 40 </ec:PathListBox.ItemTemplate> 41 <ec:PathListBox.LayoutPaths> 42 <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=SmallTrianglePath}" /> 43 </ec:PathListBox.LayoutPaths> 44 </ec:PathListBox> 45 46 <ed:Arc x:Name="ShortTickPath" Margin="{Binding ShortTickMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
ArcThickness="0" ArcThicknessUnit="Pixel" Stretch="None" Stroke="Black" StrokeThickness="0" 47 EndAngle="{TemplateBinding EndAngle}" StartAngle="{TemplateBinding StartAngle}" /> 48 49 <ec:PathListBox x:Name="ShortTick" IsHitTestVisible="False" ItemsSource="{TemplateBinding ShortTicksInternal}"> 50 <ec:PathListBox.ItemTemplate> 51 <DataTemplate> 52 <Border Width="{Binding ShortTickWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Height="{Binding ShortTickHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Background="{Binding ShortTickColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" SnapsToDevicePixels="True" UseLayoutRounding="False" /> 53 </DataTemplate> 54 </ec:PathListBox.ItemTemplate> 55 <ec:PathListBox.LayoutPaths> 56 <ec:LayoutPath Orientation="OrientToPath" SourceElement="{Binding ElementName=ShortTickPath}" Distribution="Even"/> 57 </ec:PathListBox.LayoutPaths> 58 </ec:PathListBox> 59 //圆弧路径控件用于绑定刻度数值：位置、起始、终止角度绑定到可设置的依赖属性（其他处理同长刻度） 60 <ed:Arc x:Name="NumberPath" Margin="{Binding NumberMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
ArcThickness="0" ArcThicknessUnit="Pixel" Stretch="None" StartAngle="{TemplateBinding StartAngle}" EndAngle="{TemplateBinding EndAngle}" /> 61 <ec:PathListBox x:Name="Number" IsHitTestVisible="False" ItemsSource="{TemplateBinding NumberListInternal}"> 62 <ec:PathListBox.ItemTemplate> 63 <DataTemplate> 64 <TextBlock Text="{Binding Mode=OneWay}" FontSize="{Binding NumberFontSize, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Foreground="{Binding NumberColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" /> 65 </DataTemplate> 66 </ec:PathListBox.ItemTemplate> 67 <ec:PathListBox.LayoutPaths> 68 <ec:LayoutPath Distribution="Even" Orientation="None" SourceElement="{Binding ElementName=NumberPath}" /> 69 </ec:PathListBox.LayoutPaths> 70 </ec:PathListBox> 71 //圆弧路径控件用于给进度条圆弧路径控件作为坐标基准 72 <ed:Arc x:Name="PART_IncreaseCircle" Margin="130" ArcThickness="10" ArcThicknessUnit="Pixel" 73 RenderTransformOrigin="0.5,0.5" Stretch="None" StrokeThickness="1" 74 StartAngle="{TemplateBinding StartAngle}" EndAngle="{TemplateBinding Angle}" Fill="#FFE8DADA"/> //路径控件用于绑定进度条角度变化动画 77 <Path x:Name="Finger" Stroke="{Binding FingerBar, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
StrokeThickness="{Binding FingerThickness, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" RenderTransformOrigin="0.5,1"> 78 <Path.Data> 79 <LineGeometry StartPoint="{Binding FingerStartPoint, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
EndPoint="{Binding FingerEndPoint, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"/> 80 </Path.Data> 81 <Path.RenderTransform> 82 <TransformGroup> 83 <ScaleTransform /> 84 <SkewTransform /> 85 <RotateTransform Angle="{Binding EndAngle, ElementName=PART_IncreaseCircle}" /> 86 <TranslateTransform Y="-130.5" X="0" /> 87 </TransformGroup> 88 </Path.RenderTransform> 89 </Path> 90 //圆弧路径控件用于绑定进度条 91 <ed:Arc x:Name="PART_Process" ArcThickness="{Binding ProcessThickness, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
ArcThicknessUnit="Pixel" Margin="{Binding ProcessMargin , RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" 92 RenderTransformOrigin="0.5,0.5" Stretch="None" 93 StartAngle="{TemplateBinding StartAngle}" EndAngle="{TemplateBinding Angle}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Fill="{Binding ProcessBar, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" /> 94 95 <Border Background="{TemplateBinding LogoPicture}" Height="{Binding LogoHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Width="{Binding LogoWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{Binding LogoMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"/> 96 <TextBlock Text="{TemplateBinding TextUnit}" Foreground="{TemplateBinding TextBar}" HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="{Binding TextFontSize, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Margin="{Binding TextMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"/> 97 <TextBlock Text="{Binding TextLogo, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Foreground="{Binding TextLogoPicture, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
FontSize="{Binding TextFontSize, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}" HorizontalAlignment="Center"
VerticalAlignment="Center" Margin="{Binding TextLogoMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"/> 98 <TextBlock x:Name="textValue" Text="{TemplateBinding StringValue}" Foreground="{Binding StringValueColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{Binding StringValueFontSize, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"
Margin="{Binding StringValueMargin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Gauge_OnlyPointe}}}"/> 99 100 </Grid> 101 </Viewbox> 102 103 <ControlTemplate.Triggers> 104 <DataTrigger> 105 <DataTrigger.Binding> 106 <MultiBinding Converter="{StaticResource VTC}"> 107 <Binding Path="StartAngle" RelativeSource="{x:Static RelativeSource.Self}"/> 108 <Binding Path="EndAngle" RelativeSource="{x:Static RelativeSource.Self}"/> 109 <Binding Path="Angle" RelativeSource="{x:Static RelativeSource.Self}"/> 110 </MultiBinding> 111 </DataTrigger.Binding> 112 <DataTrigger.Value>true</DataTrigger.Value> 113 <DataTrigger.Setters> 116 </DataTrigger.Setters> 117 </DataTrigger> 118 </ControlTemplate.Triggers> 119 </ControlTemplate> 120 </Setter.Value> 121 </Setter> 122 </Style>
