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>