WPF制作标尺

     由于在WPF中没有现成的刻度尺控件，所以我们自己实现一个。

PS：有更好的方式欢迎推荐。

01

—

代码如下

一、创建 Ruler.cs 继承 Control代码如下。

Ruler.cs实现思路如下

1、与前几篇思路几乎一致，不做阐述。

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
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 double Interval
        {
            get { return (double)GetValue(IntervalProperty); }


            set { SetValue(IntervalProperty, value); }
        }


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


        public double SpanInterval
        {
            get { return (double)GetValue(SpanIntervalProperty); }


            set { SetValue(SpanIntervalProperty, value); }
        }


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


        public int MiddleMask
        {
            get { return (int)GetValue(MiddleMaskProperty); }


            set { SetValue(MiddleMaskProperty, value); }
        }


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


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


        public double CurrentValue
        {
            get { return (double)GetValue(CurrentValueProperty); }


            set
            {
                SetValue(CurrentValueProperty, value);
                PaintPath();
            }
        }
        public static readonly DependencyProperty StartValueProperty = 
            DependencyProperty.Register("StartValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(120.0));


        public double StartValue
        {
            get { return (double)GetValue(StartValueProperty); }


            set { SetValue(StartValueProperty, value); }
        }


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


        public double EndValue
        {
            get { return (double)GetValue(EndValueProperty); }


            set { SetValue(EndValueProperty, value); }
        }
       
        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")));


        public Geometry CurrentGeometry
        {
            get { return (Geometry)GetValue(CurrentGeometryProperty); }


            set { SetValue(CurrentGeometryProperty, value); }
        }
        static Ruler()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Ruler), new FrameworkPropertyMetadata(typeof(Ruler)));
        }
        protected override void OnRender(DrawingContext drawingContext)
        {
            RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
            double nextLineValue = 0d; 
            var one_Width = ActualWidth / ((EndValue - StartValue) / Interval);


            for (int i = 0; i <= ((EndValue - StartValue) / Interval); i++) 
            {
                var numberText = new FormattedText((StartValue + (i * Interval)).ToString(),
                    CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, new Typeface("Microsoft YaHei"), 10, Brushes.White);
                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 (int 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;
            }


        }
        public Ruler()
        {
            this.Loaded += Ruler_Loaded;
        }


        private void Ruler_Loaded(object sender, RoutedEventArgs e)
        {
            PaintPath();
        }
        
        private void PaintPath()
        {
            var d_Value = CurrentValue - StartValue;
            var one_Value = ActualWidth / (EndValue - StartValue);
            double 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");
        }


    }
}

二、创建RulerControlExample.xaml代码如下

<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/yanjinhuagood/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>

02

—

效果预览

鸣谢素材提供者 - 帅嘉欣

源码地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood

技术群：添加小编微信并备注进群

小编微信：mm1552923   

公众号：dotNet编程大全