c# wpf 条状刻度线，仪表盘的做法
网上看到 https://www.cnblogs.com/congqiandehoulai/p/12733245.html
照着例子做，一直不行，最后发现了问题。
1 需要添加两个引用
Microsoft.Expression.Controls
Microsoft.Expression.Drawing
这两个dll需要引用到项目里，可以在自己的电脑里查到
2 在MainWindow里引入命名空间
xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
3 需要定义两个动态资源
<Window.Resources>
<RadialGradientBrush x:Key="heading_tickmark_color">
<GradientStop Color="White" />
</RadialGradientBrush>
<RadialGradientBrush x:Key="heading_pointer_color">
<GradientStop Color="DodgerBlue" />
</RadialGradientBrush>
</Window.Resources>
然后运行效果就出来了！
详细源码
1 xml
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp1" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <RadialGradientBrush x:Key="heading_tickmark_color"> <GradientStop Color="White" /> </RadialGradientBrush> <RadialGradientBrush x:Key="heading_pointer_color"> <GradientStop Color="DodgerBlue" /> </RadialGradientBrush> </Window.Resources> <Grid x:Name="myGrid" VerticalAlignment="Center" HorizontalAlignment="Center"> <Viewbox Stretch="Uniform"> <Grid Width="500" Height="162.26"> <!--按半径为500 角度为60度的圆弧计算--> <Grid Width="1000" Margin="-250,0,0,0" Height="1000" Background="Black" > <Grid.Clip> <PathGeometry> <PathFigure StartPoint="250 67"> <ArcSegment Point="750 67" Size="500 500" SweepDirection="Clockwise"/> <LineSegment Point="695 162.26" /> <ArcSegment Point="305 162.26" Size="390 390" SweepDirection="Counterclockwise"/> </PathFigure> </PathGeometry> </Grid.Clip> <!--指针--> <Path HorizontalAlignment="Center" Margin=" 0 10 0 0" Data="M0 100 A20 20 0 0 1 10 82.68 L 20 0 L 30 82.68 A20 20 0 0 1 40 100 A20 20 0 0 0 0 100" Stroke="Red" StrokeThickness="2" Fill="Red"/> <Grid Width="1000" Height="1000" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform x:Name="rootGridRotate" /> <TranslateTransform /> </TransformGroup> </Grid.RenderTransform> <!--短刻度线--> <ec:PathListBox x:Name="lbshort" IsHitTestVisible="False" > <ec:PathListBox.ItemTemplate> <DataTemplate> <Rectangle Width="2" Height="23" Fill="{DynamicResource heading_tickmark_color}"/> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=shortArc}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <ed:Arc x:Name="shortArc" Width="970" Height="970" HorizontalAlignment="Center" VerticalAlignment="Center" ArcThicknessUnit="Pixel" EndAngle="360" StartAngle="0" Stretch="None"/> <!--中刻度线--> <ec:PathListBox x:Name="lbmedium" IsHitTestVisible="False" > <ec:PathListBox.ItemTemplate> <DataTemplate> <Rectangle Width="2" Height="32" Fill="{DynamicResource heading_tickmark_color}"/> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=mediumArc}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <ed:Arc x:Name="mediumArc" Width="950" Height="950" HorizontalAlignment="Center" VerticalAlignment="Center" ArcThicknessUnit="Pixel" EndAngle="360" StartAngle="0" Stretch="None" /> <!--长刻度线--> <ec:PathListBox x:Name="lblong" IsHitTestVisible="False" > <ec:PathListBox.ItemTemplate> <DataTemplate> <Rectangle Width="2" Height="56" Fill="{DynamicResource heading_tickmark_color}"/> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=longArc}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <ed:Arc x:Name="longArc" Width="930" Height="930" HorizontalAlignment="Center" VerticalAlignment="Center" ArcThicknessUnit="Pixel" EndAngle="360" StartAngle="0" Stretch="None" Visibility="Hidden" /> <!--数字--> <ec:PathListBox x:Name="lbtext" IsHitTestVisible="False" > <ec:PathListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" Foreground="{DynamicResource heading_tickmark_color}"/> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=textArc}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <ed:Arc x:Name="textArc" Width="860" Height="860" HorizontalAlignment="Center" VerticalAlignment="Center" ArcThicknessUnit="Pixel" EndAngle="360" StartAngle="0" Stretch="None" Stroke="Red" StrokeThickness="3" /> </Grid> </Grid> <!--绘制边框--> <Path Stretch="Fill" Stroke="{DynamicResource heading_pointer_color}" StrokeThickness="4"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" StartPoint="0 67"> <ArcSegment Point="500 67" Size="500 500" SweepDirection="Clockwise"/> <LineSegment Point="445 162.26" /> <ArcSegment Point="55 162.26" Size="390 390" SweepDirection="Counterclockwise"/> </PathFigure> </PathGeometry> </Path.Data> </Path> </Grid> </Viewbox> <RepeatButton Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/> </Grid> </Window>
2 cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApp1 { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { private List<int> ShortTicks; private List<int> MiddleTicks; private List<int> LongTicks; private List<string> TextLists; public MainWindow() { InitializeComponent(); this.ShortTicks = new List<int>(); this.MiddleTicks = new List<int>(); this.LongTicks = new List<int>(); this.TextLists = new List<string>(); for (int i = 0; i < 360; i++) { ShortTicks.Add(i); } for (int i = 0; i < 72; i++) { MiddleTicks.Add(i); } for (int i = 0; i < 36; i++) { LongTicks.Add(i); } for (int i = 0; i < 36; i++) { TextLists.Add((i * 10).ToString()); } lblong.ItemsSource = LongTicks; lbmedium.ItemsSource = MiddleTicks; lbshort.ItemsSource = ShortTicks; lbtext.ItemsSource = TextLists; } private void Button_Click(object sender, RoutedEventArgs e) { rootGridRotate.Angle += 10; } } }
