效果图:
主要代码xaml:
<UserControl x:Class="INSControls._01Conning.Steer.ConningSpeedBar"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:ec="https://schemas.microsoft.com/expression/2010/controls"
xmlns:ed="https://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="80" Focusable="False" FocusVisualStyle="{x:Null}" Loaded="UserControl_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{Binding Title, RelativeSource={RelativeSource AncestorType=UserControl}}"
Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl} }"
FontFamily="微软雅黑"></Label>
<Label HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="0,0,0,5"
Foreground="#cc8800"
FontFamily="微软雅黑"
Content="LOG2"
Grid.Row="1" />
<Border Width="80"
HorizontalAlignment="Left"
Grid.Row="2"
Background="#24325f">
<Grid Margin="1,14,0,14"
x:Name="mainGrid">
<!--具体的值填充的柱状图形-->
<Grid x:Name="graphicGrid"
Height="10"
VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Path Data="M40,0 L80,40 L0,40 z"
Fill="#cc0663c2" Stretch="Fill" x:Name="path" />
<Border Grid.Row="1"
Background="#cc0663c2" />
<Grid.RenderTransform>
<RotateTransform Angle="0" x:Name="polygonRotateAngel" />
</Grid.RenderTransform>
</Grid>
<!--短刻度-->
<ec:PathListBox Background="Transparent"
x:Name="shortTicks"
ItemsSource="{Binding ShortTicks,RelativeSource={RelativeSource AncestorType=UserControl}}"
Focusable="False"
FocusVisualStyle="{x:Null}">
<ec:PathListBox.ItemTemplate>
<DataTemplate>
<Rectangle Width="1"
Height="48"
Margin="0,0,0,49"
Fill="#b5b5b5"
Focusable="False"
FocusVisualStyle="{x:Null}" />
<!--<Border Width="1"
Height="48"
Background="#b5b5b5"
UseLayoutRounding="True"
Margin="0,0,0,49" />-->
</DataTemplate>
</ec:PathListBox.ItemTemplate>
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath Distribution="Even"
Orientation="OrientToPath"
SourceElement="{Binding ElementName=ShortTickPath}" >
</ec:LayoutPath>
</ec:PathListBox.LayoutPaths>
</ec:PathListBox>
<!-- 长刻度 -->
<ec:PathListBox x:Name="LongTick"
IsHitTestVisible="False"
ItemsSource="{Binding LongTicks, RelativeSource={RelativeSource AncestorType=UserControl}}"
Focusable="False"
FocusVisualStyle="{x:Null}" >
<ec:PathListBox.ItemTemplate>
<DataTemplate>
<Rectangle Width="48"
Height="3"
Margin="48,0,0,0"
Fill="White"
Focusable="False"
FocusVisualStyle="{x:Null}" />
<!--<Border Width="3"
Height="48"
Background="White"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
Margin="0,0,0,49">
</Border>-->
</DataTemplate>
</ec:PathListBox.ItemTemplate>
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath Distribution="Even"
Orientation="None"
SourceElement="{Binding ElementName=LongTickPath}" />
</ec:PathListBox.LayoutPaths>
</ec:PathListBox>
<!-- 刻度上显示的数字 -->
<ec:PathListBox IsHitTestVisible="False"
ItemsSource="{Binding TickMarks,RelativeSource={RelativeSource AncestorType=UserControl}}">
<ec:PathListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="tb" HorizontalAlignment="Left" Foreground="White"
Text="{Binding}" RenderTransformOrigin="0,0" Margin="0,50,0,0">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
</DataTemplate>
</ec:PathListBox.ItemTemplate>
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath Distribution="Even"
Orientation="OrientToPath"
SourceElement="{Binding ElementName=NumberPath}" />
</ec:PathListBox.LayoutPaths>
</ec:PathListBox>
<Path x:Name="LongTickPath"
Data="M0,0 v1"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Stretch="Fill" Fill="Red" Stroke="Red" StrokeThickness="2"
Grid.RowSpan="2"
Margin="0,0"
Focusable="False"
FocusVisualStyle="{x:Null}" />
<Path x:Name="ShortTickPath"
Data="M0,0 V1"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Stretch="Fill"
Grid.RowSpan="2"
Margin="0,0"
Focusable="False"
FocusVisualStyle="{x:Null}" />
<Path x:Name="NumberPath"
Data="M0,0 V1"
Margin="45,0,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Stretch="Fill"
Grid.RowSpan="2"
Focusable="False"
FocusVisualStyle="{x:Null}" Stroke="Yellow" StrokeThickness="1"/>
</Grid>
</Border>
<StackPanel Grid.Row="3"
Orientation="Horizontal">
<TextBox Width="90"
Height="35"
IsReadOnly="True"
Foreground="{Binding TextboxColor,RelativeSource={RelativeSource AncestorType=UserControl}}"
VerticalAlignment="Center"
Text="{ Binding CurrentValue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Control}}" />
<Label VerticalAlignment="Center"
Content="km"
Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl}}"></Label>
</StackPanel>
</Grid>
</UserControl>
<UserControl x:Class=