思享工具箱

c# wpf 条状刻度线，仪表盘的做法

摘要：
--通过半径为500且角度为60度的圆弧计算--˃˂！

c# wpf 条状刻度线，仪表盘的做法第1张

网上看到 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

c# wpf 条状刻度线，仪表盘的做法第2张c# wpf 条状刻度线，仪表盘的做法第3张
<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

c# wpf 条状刻度线，仪表盘的做法第4张c# wpf 条状刻度线，仪表盘的做法第5张
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

标签：#xmlns#wpf#ec | 浏览：356 | 发布日期：

免责声明：文章转载自《c# wpf 条状刻度线，仪表盘的做法》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Linux之防火墙配置weblogic 解决线程阻塞下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

WPF入门教程系列一——基础

WPF入门教程系列目录 WPF入门教程系列二——Application介绍 WPF入门教程系列三——Application介绍(续) WPF入门教程系列四——Dispatcher介绍 WPF入门教程系列五——Window 介绍 WPF入门教程系列六——布局介绍与Canvas（一） WPF入门教程系列七——布局之WrapPanel与StackPanel（二）...

WPF线程

跨线程调用控件 WPF应用程序都至少有两个线程，一个用于UI绘制，其隐藏于后台，另一个用于管理UI。WPF中UI元素只能由创建该元素的线程来访问。Dispatcher类来负责线程的组织和维护。通用的解决方法是使用提供的Dispatcher.Invoke方法来调用一个Delegate，从而安全地跨线程调用。（在winform中，是Control.Invoke...

WPF基础到企业应用系列6——布局全接触

转自：http://www.cnblogs.com/KnightsWarrior/archive/2010/08/02/1790131.html 2010-08-02 05:21        by        圣殿骑士,        11455阅读,        89评论,        收藏,        编辑 一. 摘要 　　首先很高兴这个...

Android基础——intent的ComponentName

intent通过ComponentName指定要执行的组件名字，创建一个Activity时就可以用这个方式进行指定 通过Main启动Detail 两个活动的布局 Detail <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas...

WPF 2D绘图(3)PathGeometry

PathGeometry可以创建任意的2D图形形状。 其内部通过PathSegment集合来实现 如画2个三角形 <Path Stroke="Black" StrokeThickness="1"> <Path.Data> <PathGeometry>...

WPF 附加属性的用法 (一)

public class MDCTest { public static DependencyProperty MouseDoubleClickCommandProperty = DependencyProperty.RegisterAttached( "MouseDoubleClick",...

最新文章

随机推荐

思享工具箱导航