最近在 https://mp.weixin.qq.com/s/3dEO0NZQv5YLqK72atG4Wg 官方公众号看到了 用WPF 制作 标尺
在去年项目上也接到了一个需求，用于排版自定义拖拽控件画布对齐的标尺，当时接到的要求是 需要横纵对齐的表次，并且鼠标滑动，刻度的上方需要跟着有影子划过的效果。
具体实现如下：
创建 标尺控件 RulerControl.cs
1 [TemplatePart(Name = "trackLine", Type = typeof(Line))]
2 internal class RulerControl : Control
3 {
4 public static readonly DependencyProperty DpiProperty = DependencyProperty.Register("Dpi", typeof(Dpi), typeof(RulerControl));
5 public static readonly DependencyProperty DisplayPercentProperty = DependencyProperty.Register("DisplayPercent", typeof(double), typeof(RulerControl));
6 public static readonly DependencyProperty DisplayTypeProperty = DependencyProperty.Register("DisplayType", typeof(RulerDisplayType), typeof(RulerControl));
7 public static readonly DependencyProperty DisplayUnitProperty = DependencyProperty.Register("DisplayUnit", typeof(RulerDisplayUnit), typeof(RulerControl));
8 public static readonly DependencyProperty ZeroPointProperty = DependencyProperty.Register("ZeroPoint", typeof(double), typeof(RulerControl));
9
10 /// <summary>
11 /// 定义静态构造函数
12 /// </summary>
13 static RulerControl()
14 {
15 DefaultStyleKeyProperty.OverrideMetadata(typeof(RulerControl), new FrameworkPropertyMetadata(typeof(RulerControl)));
16 }
17
18 #region 属性
19 /// <summary>
20 /// 屏幕分辨率
21 /// </summary>
22 public Dpi Dpi
23 {
24 get
25 {
26 return ((Dpi)GetValue(DpiProperty));
27 }
28 set
29 {
30 SetValue(DpiProperty, value);
31 }
32 }
33
34 /// <summary>
35 /// 设置0点从哪里开始
36 /// </summary>
37 public double ZeroPoint
38 {
39 get
40 {
41 return ((double)GetValue(ZeroPointProperty));
42 }
43 set
44 {
45 SetValue(ZeroPointProperty, value);
46 InvalidateVisual();
47 }
48 }
49
50 /// <summary>
51 /// 显示的比率（目前支持0-1的选项）
52 /// </summary>
53 public double DisplayPercent
54 {
55 get
56 {
57 return ((double)GetValue(DisplayPercentProperty));
58 }
59 set
60 {
61 if (value > 1)
62 {
63 value = 1;
64 }
65 SetValue(DisplayPercentProperty, value);
66 InvalidateVisual();
67 }
68 }
69
70 /// <summary>
71 /// 显示的类型：枚举类（支持横向或者竖向）
72 /// </summary>
73 public RulerDisplayType DisplayType
74 {
75 get
76 {
77 return ((RulerDisplayType)GetValue(DisplayTypeProperty));
78 }
79 set
80 {
81 SetValue(DisplayTypeProperty, value);
82 }
83 }
84
85 /// <summary>
86 /// 显示的单位：cm和pixel
87 /// </summary>
88 public RulerDisplayUnit DisplayUnit
89 {
90 get
91 {
92 return ((RulerDisplayUnit)GetValue(DisplayUnitProperty));
93 }
94 set
95 {
96 SetValue(DisplayUnitProperty, value);
97 }
98 }
99 #endregion
100
101 #region 常量
102 public const double _inchCm = 2.54; //一英寸为2.54cm
103 private const int _p100StepSpanPixel = 100;
104 private const int _p100StepSpanCm = 2;
105 private const int _p100StepCountPixel = 20;
106 private const int _p100StepCountCm = 20;
107
108 #endregion
109
110 #region 变量
111 private double _minStepLengthCm;
112 private double _maxStepLengthCm;
113 private double _actualLength;
114 private int _stepSpan;
115 private int _stepCount;
116 private double _stepLength;
117 Line mouseVerticalTrackLine;
118 Line mouseHorizontalTrackLine;
119 #endregion
120
121 #region 标尺边框加指针显示
122 public void RaiseHorizontalRulerMoveEvent(MouseEventArgs e)
123 {
124 Point mousePoint = e.GetPosition(this);
125 mouseHorizontalTrackLine.X1 = mouseHorizontalTrackLine.X2 = mousePoint.X;
126 }
127 public void RaiseVerticalRulerMoveEvent(MouseEventArgs e)
128 {
129 Point mousePoint = e.GetPosition(this);
130 mouseVerticalTrackLine.Y1 = mouseVerticalTrackLine.Y2 = mousePoint.Y;
131 }
132
133 public override void OnApplyTemplate()
134 {
135 base.OnApplyTemplate();
136 mouseVerticalTrackLine = GetTemplateChild("verticalTrackLine") as Line;
137 mouseHorizontalTrackLine = GetTemplateChild("horizontalTrackLine") as Line;
138 mouseVerticalTrackLine.Visibility = Visibility.Visible;
139 mouseHorizontalTrackLine.Visibility = Visibility.Visible;
140 }
141 #endregion
142
143 /// <summary>
144 /// 重画标尺数据
145 /// </summary>
146 /// <param name="drawingContext"></param>
147 protected override void OnRender(DrawingContext drawingContext)
148 {
149 try
150 {
151 Pen pen = new Pen(new SolidColorBrush(Colors.Black),0.8d);
152 pen.Freeze();
153 Initialize();
154 GetActualLength();
155 GetStep();
156 base.OnRender(drawingContext);
157
158 this.BorderBrush = new SolidColorBrush(Colors.Black);
159 this.BorderThickness = new Thickness(0.1);
160 this.Background = new SolidColorBrush(Colors.White);
161
162 #region try
163 // double actualPx = this._actualLength / DisplayPercent;
164 Position currentPosition = new Position
165 {
166 CurrentStepIndex = 0,
167 Value = 0
168 };
169
170 switch (DisplayType)
171 {
172 case RulerDisplayType.Horizontal:
173 {
174 /* 绘制前半段 */
175 DrawLine(drawingContext, ZeroPoint, currentPosition, pen, 0);
176 /* 绘制后半段 */
177 DrawLine(drawingContext, ZeroPoint, currentPosition, pen, 1);
178 break;
179 }
180 case RulerDisplayType.Vertical:
181 {
182 /* 绘制前半段 */
183 DrawLine(drawingContext, ZeroPoint, currentPosition, pen, 0);
184 /* 绘制后半段 */
185 DrawLine(drawingContext, ZeroPoint, currentPosition, pen, 1);
186 break;
187 }
188 }
189 #endregion
190 }
191 catch (Exception ex)
192 {
193 Console.WriteLine(ex.Message);
194 }
195 }
196
197 private void DrawLine(DrawingContext drawingContext, double currentPoint, Position currentPosition, Pen pen, int type)
198 {
199 double linePercent = 0d;
200 while (true)
201 {
202 if (currentPosition.CurrentStepIndex == 0)
203 {
204
205 FormattedText formattedText = GetFormattedText((currentPosition.Value / 10).ToString());
206
207
208 switch (DisplayType)
209 {
210 case RulerDisplayType.Horizontal:
211 {
212 var point = new Point(currentPoint + formattedText.Width / 2, formattedText.Height / 3);
213 if (point.X<0)
214 {
215 break;
216 }
217 drawingContext.DrawText(formattedText, point);
218 break;
219 }
220 case RulerDisplayType.Vertical:
221 {
222 Point point = new Point(this.ActualWidth, currentPoint + formattedText.Height / 2);
223 RotateTransform rotateTransform = new RotateTransform(90, point.X, point.Y);
224 if (point.Y<0)
225 {
226 break;
227 }
228 drawingContext.PushTransform(rotateTransform);
229 drawingContext.DrawText(formattedText, point);
230 drawingContext.Pop();
231 break;
232 }
233 }
234
235 linePercent = (int)LinePercent.P100;
236 }
237 else if (IsFinalNum(currentPosition.CurrentStepIndex, 3))
238 {
239 linePercent = (int)LinePercent.P30;
240 }
241 else if (IsFinalNum(currentPosition.CurrentStepIndex, 5))
242 {
243 linePercent = (int)LinePercent.P50;
244 }
245 else if (IsFinalNum(currentPosition.CurrentStepIndex, 7))
246 {
247 linePercent = (int)LinePercent.P30;
248 }
249 else if (IsFinalNum(currentPosition.CurrentStepIndex, 0))
250 {
251 linePercent = (int)LinePercent.P70;
252 }
253 else
254 {
255 linePercent = (int)LinePercent.P20;
256 }
257
258 linePercent = linePercent * 0.01;
259
260 switch (DisplayType)
261 {
262 case RulerDisplayType.Horizontal:
263 {
264 if (currentPoint > 0)
265 {
266 drawingContext.DrawLine(pen, new Point(currentPoint, 0), new Point(currentPoint, this.ActualHeight * linePercent));
267 }
268
269 if (type == 0)
270 {
271 currentPoint = currentPoint - _stepLength;
272 currentPosition.CurrentStepIndex--;
273
274 if (currentPosition.CurrentStepIndex < 0)
275 {
276 currentPosition.CurrentStepIndex = _stepCount - 1;
277 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 0);
278 }
279 else if (currentPosition.CurrentStepIndex == 0)
280 {
281 if (currentPosition.Value % _stepSpan != 0)
282 {
283 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 0);
284 }
285 }
286
287 if (currentPoint <= 0)
288 {
289 return;
290 }
291 }
292 else
293 {
294 currentPoint = currentPoint + _stepLength;
295 currentPosition.CurrentStepIndex++;
296
297 if (currentPosition.CurrentStepIndex >= _stepCount)
298 {
299 currentPosition.CurrentStepIndex = 0;
300 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 1);
301 }
302
303 if (currentPoint >= _actualLength)
304 {
305 return;
306 }
307 }
308 break;
309 }
310 case RulerDisplayType.Vertical:
311 {
312 if (currentPoint > 0)
313 {
314 drawingContext.DrawLine(pen, new Point(0, currentPoint), new Point(this.ActualWidth * linePercent, currentPoint));
315 }
316 if (type == 0)
317 {
318 currentPoint = currentPoint - _stepLength;
319 currentPosition.CurrentStepIndex--;
320
321 if (currentPosition.CurrentStepIndex < 0)
322 {
323 currentPosition.CurrentStepIndex = _stepCount - 1;
324 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 0);
325 }
326 else if (currentPosition.CurrentStepIndex == 0)
327 {
328 if (currentPosition.Value % _stepSpan != 0)
329 {
330 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 0);
331 }
332 }
333
334 if (currentPoint <= 0)
335 {
336 return;
337 }
338 }
339 else
340 {
341 currentPoint = currentPoint + _stepLength;
342 currentPosition.CurrentStepIndex++;
343
344 if (currentPosition.CurrentStepIndex >= _stepCount)
345 {
346 currentPosition.CurrentStepIndex = 0;
347 currentPosition.Value = GetNextStepValue(currentPosition.Value, _stepSpan, 1);
348 }
349
350 if (currentPoint >= _actualLength)
351 {
352 return;
353 }
354 }
355 break;
356 }
357 }
358 }
359 }
360
361 /// <summary>
362 /// 获取下一个步长值
363 /// </summary>
364 /// <param name="value">起始值</param>
365 /// <param name="times">跨度</param>
366 /// <param name="type">半段类型，分为前半段、后半段</param>
367 /// <returns></returns>
368 private int GetNextStepValue(int value, int times, int type)
369 {
370 if (type == 0)
371 {
372 do
373 {
374 value--;
375 }
376 while (value % times != 0);
377 }
378 else
379 {
380 do
381 {
382 value++;
383 }
384 while (value % times != 0);
385 }
386 return (value);
387 }
388
389 [Obsolete]
390 private FormattedText GetFormattedText(string text)
391 {
392 return (new FormattedText(text,
393 //CultureInfo.GetCultureInfo("zh-cn"),
394 CultureInfo.GetCultureInfo("en-us"),
395 FlowDirection.LeftToRight,
396 new Typeface("宋体"),
397 12,
398 Brushes.Black));
399 }
400
401 private bool IsFinalNum(int value, int finalNum)
402 {
403 string valueStr = value.ToString();
404 if (valueStr.Substring(valueStr.Length - 1, 1) == finalNum.ToString())
405 {
406 return (true);
407 }
408 return (false);
409 }
410
411 /// <summary>
412 /// 初始化获取屏幕的DPI
413 /// </summary>
414 private void Initialize()
415 {
416 Dpi dpi = new Dpi();
417 dpi.DpiX = Dpi.DpiX;
418 dpi.DpiY = Dpi.DpiY;
419 if (Dpi.DpiX == 0)
420 {
421 dpi.DpiX = 96;
422 }
423
424 if (Dpi.DpiY == 0)
425 {
426 dpi.DpiY = 96;
427 }
428
429 Dpi = dpi;
430 _minStepLengthCm = 0.1;
431 _maxStepLengthCm = 0.3;
432
433 if (DisplayPercent == 0)
434 DisplayPercent = 1;
435
436 switch (DisplayUnit)
437 {
438 case RulerDisplayUnit.pixel:
439 {
440 _stepSpan = _p100StepSpanPixel;
441 _stepCount = _p100StepCountPixel;
442 break;
443 }
444 case RulerDisplayUnit.cm:
445 {
446 _stepSpan = _p100StepSpanCm;
447 _stepCount = _p100StepCountCm;
448 break;
449 }
450 }
451 int width = 15;
452 switch (DisplayType)
453 {
454 case RulerDisplayType.Horizontal:
455 {
456 if (this.ActualHeight == 0)
457 {
458 Height = width;
459 }
460 break;
461 }
462 case RulerDisplayType.Vertical:
463 {
464 if (this.ActualWidth == 0)
465 {
466 Width = width;
467 }
468 break;
469 }
470 }
471 }
472
473 /// <summary>
474 /// 获取每一个数字间隔的跨度
475 /// </summary>
476 private void GetStep()
477 {
478 switch (DisplayUnit)
479 {
480 case RulerDisplayUnit.pixel:
481 {
482 double stepSpanCm;
483 while (true)
484 {
485 stepSpanCm = _stepSpan / Convert.ToDouble(GetDpi()) * _inchCm * DisplayPercent;
486 double stepLengthCm = stepSpanCm / _stepCount;
487 int type = 0;
488 bool isOut = false;
489 if (stepLengthCm > _maxStepLengthCm)
490 {
491 type = 1;
492 _stepCount = GetNextStepCount(_stepCount, type, ref isOut);
493 }
494
495 if (stepLengthCm < _minStepLengthCm)
496 {
497 type = 0;
498 _stepCount = GetNextStepCount(_stepCount, type, ref isOut);
499 }
500
501 if (stepLengthCm <= _maxStepLengthCm && stepLengthCm >= _minStepLengthCm)
502 {
503 _stepLength = stepSpanCm / _inchCm * Convert.ToDouble(GetDpi()) / _stepCount;
504 break;
505 }
506 /* 已超出或小于最大步进长度 */
507 if (isOut)
508 {
509 _stepSpan = GetNextStepSpan(_stepSpan, type);
510 continue;
511 }
512 }
513 break;
514 }
515 }
516 }
517
518
519 private int GetNextStepCount(int stepCount, int type, ref bool isOut)
520 {
521 int result = stepCount;
522 isOut = false;
523 switch (type)
524 {
525 case 0:
526 {
527 if (stepCount == 20)
528 {
529 result = 10;
530 }
531 else
532 {
533 isOut = true;
534 }
535 break;
536 }
537 case 1:
538 {
539 if (stepCount == 10)
540 {
541 result = 20;
542 }
543 else
544 {
545 isOut = true;
546 }
547
548 break;
549 }
550 }
551 return result;
552 }
553
554
555 private int GetNextStepSpan(int stepSpan, int type)
556 {
557 string stepCountStr = stepSpan.ToString();
558 string resultStr = string.Empty;
559
560 switch (DisplayUnit)
561 {
562 case RulerDisplayUnit.pixel:
563 {
564 switch (type)
565 {
566 case 0:
567 {
568 if (stepCountStr.IndexOf('5') > -1)
569 {
570 resultStr = GetNumberAndZeroNum(1, stepCountStr.Length);
571 }
572 else if (stepCountStr.IndexOf('2') > -1)
573 {
574 resultStr = GetNumberAndZeroNum(5, stepCountStr.Length - 1);
575 }
576 else if (stepCountStr.IndexOf('1') > -1)
577 {
578 resultStr = GetNumberAndZeroNum(2, stepCountStr.Length - 1);
579 }
580 break;
581 }
582 case 1:
583 {
584 if (stepCountStr.IndexOf('5') > -1)
585 {
586 resultStr = GetNumberAndZeroNum(2, stepCountStr.Length - 1);
587 }
588 else if (stepCountStr.IndexOf('2') > -1)
589 {
590 resultStr = GetNumberAndZeroNum(1, stepCountStr.Length - 1);
591 }
592 else if (stepCountStr.IndexOf('1') > -1)
593 {
594 resultStr = GetNumberAndZeroNum(5, stepCountStr.Length - 2);
595 }
596 break;
597 }
598 }
599 break;
600 }
601 }
602
603 int result = 0;
604 if (string.IsNullOrWhiteSpace(resultStr))
605 {
606 return 0;
607 }
608
609 if (int.TryParse(resultStr, out result))
610 {
611 return result;
612 }
613 return result;
614 }
615
616
617 private string GetNumberAndZeroNum(int num, int zeroNum)
618 {
619 string result = string.Empty;
620 result += num;
621 for (int i = 0; i < zeroNum; i++)
622 {
623 result += "0";
624 }
625 return (result);
626 }
627
628
629 private int GetDpi()
630 {
631 switch (DisplayType)
632 {
633 case RulerDisplayType.Horizontal:
634 {
635 return (Dpi.DpiX);
636 }
637 case RulerDisplayType.Vertical:
638 {
639 return (Dpi.DpiY);
640 }
641 default:
642 {
643 return (Dpi.DpiX);
644 }
645 }
646 }
647
648 private void GetActualLength()
649 {
650 switch (DisplayType)
651 {
652 case RulerDisplayType.Horizontal:
653 {
654 _actualLength = this.ActualWidth;
655 break;
656 }
657 case RulerDisplayType.Vertical:
658 {
659 _actualLength = this.ActualHeight;
660 break;
661 }
662 }
663 }
664 }
665
666 public enum RulerDisplayType
667 {
668 Horizontal, Vertical
669 }
670
671 public enum RulerDisplayUnit
672 {
673 pixel, cm
674 }
675
676 public enum LinePercent
677 {
678 P20 = 20, P30 = 30, P50 = 50, P70 = 70, P100 = 100
679 }
680
681 public struct Dpi
682 {
683 public int DpiX
684 {
685 get; set;
686 }
687 public int DpiY
688 {
689 get; set;
690 }
691 }
692
693 public struct Position
694 {
695 public int Value
696 {
697 get; set;
698 }
699 public int CurrentStepIndex
700 {
701 get; set;
702 }
703 }
控件的引用：
1 <UserControl x:Class="Hjmos.DataPainter.Controls.CanvaseCoreEditor" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Hjmos.DataPainter.Controls" 7 mc:Ignorable="d" 8 x:Name="CanvaseEditor" 9 d:DesignHeight="450" d:DesignWidth="800"> 10 <Grid> 11 12 <Grid.ColumnDefinitions> 13 <ColumnDefinition Width="20"/> 14 <ColumnDefinition/> 15 </Grid.ColumnDefinitions> 16 <Grid.RowDefinitions> 17 <RowDefinition Height="20"/> 18 <RowDefinition/> 19 </Grid.RowDefinitions> 20 <!--横向标尺--> 21 <local:RulerControl DisplayUnit="pixel" DisplayType="Horizontal" Grid.Row="0" Grid.Column="1" x:Name="ucPanleHor"/> 22 <!--纵向标尺--> 23 <local:RulerControl DisplayUnit="pixel" DisplayType="Vertical" Grid.Row="1" Grid.Column="0" x:Name="ucPanleVer"/> 24 25 26 </Grid> 27 </UserControl>
鼠标在画布移动的时候触发标尺上的刻度阴影移动
/// <summary>
/// 鼠标在画布移动的时候触发标尺上的刻度阴影移动
/// </summary>
/// <param name="obj"></param>
private void _diagramView_MouseMove(MouseEventArgs e)
{
ucPanleHor.RaiseHorizontalRulerMoveEvent(e);
ucPanleVer.RaiseVerticalRulerMoveEvent(e);
}
总结：技术点主要是用到了WPF 内部的渲染机制，调用 OnRender的方法，实现对线条绘制；通过计算总长度从而得出步长，绘制不同的长度线的标尺刻度。