WPF 自定义标尺控件

直接上代码

 public class Ruler : System.Windows.Controls.Control
    {
        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); }
        }

        /// <summary>
        /// 当前值
        /// </summary>
        public static readonly DependencyProperty CurrentValueProperty = DependencyProperty.Register("CurrentValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(180.0));

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

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

        /// <summary>
        /// 步长
        /// </summary>
        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); }
        }

        /// <summary>
        /// 间隔步长
        /// </summary>
        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); }
        }

        /// <summary>
        /// 中线标记
        /// </summary>
        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); }
        }

        /// <summary>
        /// 当前值的图形坐标点
        /// </summary>
        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); }
        }
         
        /// <summary>
        /// 构造函数
        /// </summary>
        static Ruler()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Ruler), new FrameworkPropertyMetadata(typeof(Ruler)));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            PaintPath();
        }

        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("Source Han Sans CN"), 10, Brushes.White); //当前数值

                drawingContext.DrawText(numberText, new Point(i * one_Width - 8, 0));//每个大格子的数值和坐标 -8是为了居中

                drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1), new Point(i * one_Width, 25), new Point(i * one_Width, ActualHeight - 2));

                Console.WriteLine($"{(StartValue + (i * Interval))}的坐标" + (i * one_Width).ToString());

                var cnt = Interval / SpanInterval;

                for (int j = 1; j <= cnt; j++) //每个大格子中间有多少个小格子
                {
                    Console.WriteLine($"{(j * (one_Width / cnt) + nextLineValue)}的坐标" + ((one_Width / cnt) + nextLineValue).ToString());

                    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;
            }

            // PaintCurrentValue(drawingContext);
        }

        /// <summary>
        /// 画当前值 静态
        /// </summary>
        /// <param name="drawingContext"></param>
        //private void PaintCurrentValue(DrawingContext drawingContext)
        //{

        //    //计算当前值的横坐标
        //    var d_Value = CurrentValue - 120d;

        //    //每5个数值的占用宽度为21
        //    var one_Value = 460d / 120d;

        //    var x_Point = one_Value * d_Value + 8d;

        //    //画当前值的三角形 

        //    drawingContext.DrawGeometry(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ED538A")),
        //        new Pen(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ED538A")), 1),
        //         Geometry.Parse($"M {x_Point},0 {x_Point},25 {x_Point + 7},49 {x_Point - 7},49 {x_Point},25"));
        //}

        /// <summary>
        /// 动态计算当前值图形坐标点
        /// </summary>
        private void PaintPath()
        {
            //计算当前值的横坐标
            var d_Value = CurrentValue - 120d;

            //每5个数值的占用宽度为21
            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");
        }
    }

 

效果

 

 

 前端代码

<Grid Background="#58607B" Width="514" Height="51" Margin="0,10,0,0">
    <Path x:Name="Layout_Controls_Path" Stroke="#ED538A" StrokeThickness="1" Fill="#ED538A" Data="{Binding ElementName=Layout_Controls_Ruler, Path=CurrentGeometry,Mode=TwoWay}" />
    <control:Ruler x:Name="Layout_Controls_Ruler" Width="489" HorizontalAlignment="Center"/>
</Grid>

本文原创出处：http://www.cnblogs.com/SFlyers/

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利!