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; } }
<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>
效果图