iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >WPF使用DrawingContext实现绘制刻度条
  • 782
分享到

WPF使用DrawingContext实现绘制刻度条

2024-04-02 19:04:59 782人浏览 八月长安
摘要

WPF 使用 DrawingContext 绘制刻度条 框架使用大于等于.net40;Visual Studio 2022;项目使用 MIT 开源许可协议;定义I

WPF 使用 DrawingContext 绘制刻度条

  • 框架使用大于等于.net40
  • Visual Studio 2022;
  • 项目使用 MIT 开源许可协议;
  • 定义Interval步长、SpanInterval间隔步长、MiddleMask中间步长。
  • 当步长/ 间隔步长= 需要绘制的小刻度。
  • 循环绘制小刻度,判断当前j并取中间步长的模,如果模!=零就绘制中高线。
  • StartValue 开始绘制刻度到EndValue 结束刻度。
  • CurrentGeometry 重新绘制当前刻度的Path值。
  • CurrentValue 当前值如果发生变化时则去重新CurrentGeometry 。

1) 准备Ruler.cs如下:

using System;
using System.windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WPFDevelopers.Controls
{
    public class Ruler : Control
    {
        public static readonly DependencyProperty IntervalProperty =
            DependencyProperty.ReGISter("Interval", typeof(double), typeof(Ruler), new UIPropertyMetadata(30.0));


        public static readonly DependencyProperty SpanIntervalProperty =
            DependencyProperty.Register("SpanInterval", typeof(double), typeof(Ruler), new UIPropertyMetadata(5.0));


        public static readonly DependencyProperty MiddleMaskProperty =
            DependencyProperty.Register("MiddleMask", typeof(int), typeof(Ruler), new UIPropertyMetadata(2));

        public static readonly DependencyProperty CurrentValueProperty =
            DependencyProperty.Register("CurrentValue", typeof(double), typeof(Ruler),
                new UIPropertyMetadata(OnCurrentValueChanged));

        public static readonly DependencyProperty StartValueProperty =
            DependencyProperty.Register("StartValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(120.0));

        public static readonly DependencyProperty EndValueProperty =
            DependencyProperty.Register("EndValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(240.0));

        public static readonly DependencyProperty CurrentGeometryProperty =
            DependencyProperty.Register("CurrentGeometry", typeof(Geometry), typeof(Ruler),
                new PropertyMetadata(Geometry.Parse("M 257,0 257,25 264,49 250,49 257,25")));

        static Ruler()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Ruler), new FrameworkPropertyMetadata(typeof(Ruler)));
        }

        public Ruler()
        {
            Loaded += Ruler_Loaded;
        }

        public double Interval
        {
            get => (double)GetValue(IntervalProperty);

            set => SetValue(IntervalProperty, value);
        }

        public double SpanInterval
        {
            get => (double)GetValue(SpanIntervalProperty);

            set => SetValue(SpanIntervalProperty, value);
        }

        public int MiddleMask
        {
            get => (int)GetValue(MiddleMaskProperty);

            set => SetValue(MiddleMaskProperty, value);
        }

        public double CurrentValue
        {
            get => (double)GetValue(CurrentValueProperty);

            set
            {
                SetValue(CurrentValueProperty, value);
                PaintPath();
            }
        }

        public double StartValue
        {
            get => (double)GetValue(StartValueProperty);

            set => SetValue(StartValueProperty, value);
        }

        public double EndValue
        {
            get => (double)GetValue(EndValueProperty);

            set => SetValue(EndValueProperty, value);
        }

        public Geometry CurrentGeometry
        {
            get => (Geometry)GetValue(CurrentGeometryProperty);

            set => SetValue(CurrentGeometryProperty, value);
        }

        private static void OnCurrentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var ruler = d as Ruler;
            ruler.CurrentValue = Convert.ToDouble(e.NewValue);
        }

        protected override void OnRender(DrawinGContext drawingContext)
        {
            RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
            var nextLineValue = 0d;
            var one_Width = ActualWidth / ((EndValue - StartValue) / Interval);

            for (var i = 0; i <= (EndValue - StartValue) / Interval; i++)
            {
                var numberText = DrawingContextHelper.GetFORMattedText((StartValue + i * Interval).ToString(),
                    (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#FFFFFF"), FlowDirection.LeftToRight,
                    10);
                drawingContext.DrawText(numberText, new Point(i * one_Width - 8, 0));
                drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1), new Point(i * one_Width, 25),
                    new Point(i * one_Width, ActualHeight - 2));
                var cnt = Interval / SpanInterval;
                for (var j = 1; j <= cnt; j++)
                    if (j % MiddleMask == 0)
                        drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1),
                            new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 2),
                            new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 10));
                    else
                        drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1),
                            new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 2),
                            new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 5));

                nextLineValue = i * one_Width;
            }
        }

        private void Ruler_Loaded(object sender, RoutedEventArgs e)
        {
            PaintPath();
        }

        private void PaintPath()
        {
            var d_Value = CurrentValue - StartValue;
            var one_Value = ActualWidth / (EndValue - StartValue);
            var x_Point = one_Value * d_Value + ((double)Parent.GetValue(ActualWidthProperty) - ActualWidth) / 2d;
            CurrentGeometry =
                Geometry.Parse($"M {x_Point},0 {x_Point},25 {x_Point + 7},49 {x_Point - 7},49 {x_Point},25");
        }
    }
}

2) 使用RulerControlExample.xaml.cs如下:

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.RulerControlExample"
             xmlns="Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
             xmlns:wpfdev="https://GitHub.com/WPFDevelopersOrg/WPFDevelopers"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Slider x:Name="PART_Slider" IsSnapToTickEnabled="True"
                Value="40"
                Minimum="10"
                Maximum="210"/>
        <UniformGrid Rows="3">
            <Grid Background="{StaticResource CircularDualSolidColorBrush}" Height="51" Margin="40,0">
                <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                  Data="{Binding ElementName=PART_Ruler, Path=CurrentGeometry,Mode=TwoWay}" />
                <wpfdev:Ruler x:Name="PART_Ruler" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                          CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
            </Grid>
            <Grid Background="{StaticResource DangerPressedSolidColorBrush}" Height="51" Margin="40,0">
                <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                  Data="{Binding ElementName=PART_Ruler1, Path=CurrentGeometry,Mode=TwoWay}" />
                <wpfdev:Ruler x:Name="PART_Ruler1" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                          CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
            </Grid>
            <Grid Background="{StaticResource WarningPressedSolidColorBrush}" Height="51" Margin="40,0">
                <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                  Data="{Binding ElementName=PART_Ruler2, Path=CurrentGeometry,Mode=TwoWay}" />
                <wpfdev:Ruler x:Name="PART_Ruler2" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                          CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
            </Grid>
        </UniformGrid>
        
        
    </Grid>
</UserControl>

以上就是WPF使用DrawingContext实现绘制刻度条的详细内容,更多关于WPF刻度条的资料请关注编程网其它相关文章!

--结束END--

本文标题: WPF使用DrawingContext实现绘制刻度条

本文链接: https://www.lsjlt.com/news/167589.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • WPF使用DrawingContext实现绘制刻度条
    WPF 使用 DrawingContext 绘制刻度条 框架使用大于等于.NET40;Visual Studio 2022;项目使用 MIT 开源许可协议;定义I...
    99+
    2022-11-13
  • WPF利用DrawingContext实现绘制温度计
    WPF 使用 DrawingContext 绘制温度计 框架使用大于等于.NET40; Visual Studio 2022; 项目使用 MIT 开源许可协议; ...
    99+
    2022-11-13
  • WPF使用DrawingContext实现二维绘图
    DrawingContext比较类似WinForm中的Graphics 类,是基础的绘图对象,用于绘制各种图形,它主要API有如下几种: 绘图API 绘图API一般形为Dr...
    99+
    2022-11-13
  • WPF怎么使用DrawingContext实现二维绘图
    这篇文章主要介绍“WPF怎么使用DrawingContext实现二维绘图”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“WPF怎么使用DrawingContext实现二维绘图”文章能帮助大家解决问题。...
    99+
    2023-07-02
  • 使用Ajax实现进度条的绘制
    使用:Easy Mock创建api接口 注意:若弹出该invalid or unexpected token错误提示信息,说明编写的数据格式有问题,修改为正确格式即可创建成。随后可...
    99+
    2022-11-13
  • 怎么使用Ajax实现进度条的绘制
    本篇内容主要讲解“怎么使用Ajax实现进度条的绘制”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用Ajax实现进度条的绘制”吧!使用:Easy Mock创建api接口注意:若弹出该inva...
    99+
    2023-06-29
  • python使用matplotlib绘制图片时x轴的刻度处理
    在使用matplotlib绘制图片时,x轴的刻度可能比较密集,特别是以日期作为x轴时,则最后会显示不出来。 数据如下,速度V的数组与时间字符串Date的数组: 绘制随时间变化的值的...
    99+
    2022-11-12
  • Python 实现绘制子图及子图刻度的变换等问题
    1、涉及到图的对比会用到子图形式展示,先看看效果 2、绘制代码如下 accuracy_alexnet_clef = [78.05, 78.43, 78.65, 78.61, 78.69] accuracy_re...
    99+
    2022-06-02
    Python 绘制子图 子图刻度变换
  • Android使用Canvas绘制圆形进度条效果
    前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制。本文从以下三个方面对Canvas绘图机制进行讲...
    99+
    2022-06-06
    进度条 canvas Android
  • JavaScript利用el-table实现绘制热度表
    实现效果 实现代码 <div class="gray w-full h-100 mt-4 table" v-if="props.brandId"> ...
    99+
    2023-03-19
    JavaScript el-table绘制热度表 JavaScript 热度表 JavaScript el-table
  • 使用Canvas怎么绘制一个未闭合的带进度条圆环
    这期内容当中小编将会给大家带来有关使用Canvas怎么绘制一个未闭合的带进度条圆环,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、定义变量定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色let&n...
    99+
    2023-06-09
  • JavaScript如何用el-table实现绘制热度表
    本篇内容介绍了“JavaScript如何用el-table实现绘制热度表”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现效果实现代码<...
    99+
    2023-07-05
  • 使用Qt怎么实现进度条
    本篇文章为大家展示了使用Qt怎么实现进度条,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、前言  有时我们需要在表格(QTableWidget)、树状栏(QTreeWidget)中直观显示任务进度...
    99+
    2023-06-15
  • 如何使用CSS制作旋转进度条的实现步骤
    CSS是一种用于设计和布局网页的样式表语言,它提供了丰富的属性和功能。其中之一是可以使用CSS制作旋转进度条。这个特效可以用于展示页面加载或任务进度等情况。以下是具体的实现步骤和代码示例:第一步:HTML结构首先,我们需要在HTML中创建一...
    99+
    2023-10-21
    CSS 制作 旋转进度条
  • C#使用winform实现进度条效果
    本文实例为大家分享了C#使用winform实现进度条效果的具体代码,供大家参考,具体内容如下 1.例子 2.点击查询按钮代码 private void button8_Click(...
    99+
    2022-11-13
  • 如何使用CSS实现圆形进度条
    这篇文章主要介绍了如何使用CSS实现圆形进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   首先一个父级div设置相对定位,内部含有...
    99+
    2022-10-19
  • 怎么使用Shell脚本实现进度条
    这篇文章主要介绍“怎么使用Shell脚本实现进度条”,在日常操作中,相信很多人在怎么使用Shell脚本实现进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用Shell脚本实现进度条”的疑惑有所帮助!...
    99+
    2023-07-05
  • Python中怎么使用Flask实现进度条
    本篇内容主要讲解“Python中怎么使用Flask实现进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python中怎么使用Flask实现进度条”吧!使用Flask实现进度条问题描述Pyth...
    99+
    2023-06-30
  • 如何使用CSS制作网页加载进度条的实现步骤
    如何使用CSS制作网页加载进度条的实现步骤在现代网页设计中,加载速度对于用户体验至关重要。为了提升用户体验,可以使用CSS制作网页加载进度条,让用户清晰地了解网页加载进度。本文将介绍使用CSS制作网页加载进度条的实现步骤,并提供具体的代码示...
    99+
    2023-10-26
    进度条 CSS 网页
  • 如何使用HTML/CSS实现各类进度条
    这篇文章主要讲解了“如何使用HTML/CSS实现各类进度条”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用HTML/CSS实现各类进度条”吧!HTML...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作