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>
View Code
复制代码

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;
        }
    }
}
View Code
复制代码

 

posted @   simadi  阅读(797)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示