WPF 使用 DrawingContext 绘制温度计

WPF 使用 DrawingContext 绘制温度计

控件名：Thermometer

作者：WPFDevelopersOrg

原链接： https://github.com/WPFDevelopersOrg/WPFDevelopers

• 框架使用大于等于.NET40；
• Visual Studio 2022;
• 项目使用 MIT 开源许可协议；
• 定义Interval步长、MaxValue最大温度值、MinValue最小温度值。
• CurrentGeometry 重新绘制当前刻度的Path值。
• CurrentValue 当前值如果发生变化时则去重新CurrentGeometry 。
• OnRender 绘制如下
  • RoundedRectangle温度计的外边框。
  • 使用方法DrawText 单字绘制 华氏温度文本Y轴变化。
  • 使用方法DrawText 单字绘制 摄氏温度文本Y轴变化。
  • 使用方法DrawText 绘制温度计两侧的刻度数值。
  • 使用方法DrawLine 绘制温度计两侧的刻度线。

1 ） 准备Thermometer.cs如下：

using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace WPFDevelopers.Controls { public class Thermometer : Control { public static readonly DependencyProperty MaxValueProperty = DependencyProperty.Register("MaxValue", typeof(double), typeof(Thermometer), new UIPropertyMetadata(40.0)); public static readonly DependencyProperty MinValueProperty = DependencyProperty.Register("MinValue", typeof(double), typeof(Thermometer), new UIPropertyMetadata(-10.0)); /// <summary> /// 当前值 /// </summary> public static readonly DependencyProperty CurrentValueProperty = DependencyProperty.Register("CurrentValue", typeof(double), typeof(Thermometer), new UIPropertyMetadata(OnCurrentValueChanged)); /// <summary> /// 步长 /// </summary> public static readonly DependencyProperty IntervalProperty = DependencyProperty.Register("Interval", typeof(double), typeof(Thermometer), new UIPropertyMetadata(10.0)); /// <summary> /// 当前值的图形坐标点 /// </summary> public static readonly DependencyProperty CurrentGeometryProperty = DependencyProperty.Register("CurrentGeometry", typeof(Geometry), typeof(Thermometer), new PropertyMetadata( Geometry.Parse(@"M 2 132.8 a 4 4 0 0 1 4 -4 h 18 a 4 4 0 0 1 4 4 v 32.2 a 4 4 0 0 1 -4 4 h -18 a 4 4 0 0 1 -4 -4 z"))); /// <summary> /// 构造函数 /// </summary> static Thermometer() { DefaultStyleKeyProperty.OverrideMetadata(typeof(Thermometer), new FrameworkPropertyMetadata(typeof(Thermometer))); } public double MaxValue { get => (double)GetValue(MaxValueProperty); set => SetValue(MaxValueProperty, value); } public double MinValue { get => (double)GetValue(MinValueProperty); set => SetValue(MinValueProperty, value); } public double CurrentValue { get => (double)GetValue(CurrentValueProperty); set { SetValue(CurrentValueProperty, value); PaintPath(); } } public double Interval { get => (double)GetValue(IntervalProperty); set => SetValue(IntervalProperty, value); } public Geometry CurrentGeometry { get => (Geometry)GetValue(CurrentGeometryProperty); set => SetValue(CurrentGeometryProperty, value); } private static void OnCurrentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var thermometer = d as Thermometer; thermometer.CurrentValue = Convert.ToDouble(e.NewValue); } public override void OnApplyTemplate() { base.OnApplyTemplate(); PaintPath(); } protected override void OnRender(DrawingContext drawingContext) { var brush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#82848A")); var rect = new Rect(); rect.Width = 30; rect.Height = 169; drawingContext.DrawRoundedRectangle(Brushes.Transparent, new Pen(brush, 2d), rect, 8d, 8d); #region 华氏温度 drawingContext.DrawText( DrawingContextHelper.GetFormattedText("华", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), textSize: 14D), new Point(-49, 115)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("氏", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), textSize: 14D), new Point(-49, 115 + 14)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("温", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), textSize: 14D), new Point(-49, 115 + 28)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("度", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), textSize: 14D), new Point(-49, 115 + 42)); #endregion #region 摄氏温度 drawingContext.DrawText( DrawingContextHelper.GetFormattedText("摄", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), FlowDirection.LeftToRight, 14D), new Point(75, 115)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("氏", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), FlowDirection.LeftToRight, 14D), new Point(75, 115 + 14)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("温", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), FlowDirection.LeftToRight, 14D), new Point(75, 115 + 28)); drawingContext.DrawText( DrawingContextHelper.GetFormattedText("度", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), FlowDirection.LeftToRight, 14D), new Point(75, 115 + 42)); #endregion #region 画刻度 var total_Value = MaxValue - MinValue; var cnt = total_Value / Interval; var one_value = 161d / cnt; for (var i = 0; i <= cnt; i++) { var formattedText = DrawingContextHelper.GetFormattedText($"{MaxValue - i * Interval}", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), FlowDirection.LeftToRight, 14D); drawingContext.DrawText(formattedText, new Point(43, i * one_value - formattedText.Height / 2d)); //减去字体高度的一半 formattedText = DrawingContextHelper.GetFormattedText($"{(MaxValue - i * Interval) * 1.8d + 32d}", (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#82848A"), textSize: 14D); drawingContext.DrawText(formattedText, new Point(-13, i * one_value - formattedText.Height / 2d)); if (i != 0 && i != 5) { drawingContext.DrawLine(new Pen(Brushes.Black, 1d), new Point(4, i * one_value), new Point(6, i * one_value)); drawingContext.DrawLine(new Pen(Brushes.Black, 1d), new Point(24, i * one_value), new Point(26, i * one_value)); } } #endregion } /// <summary> /// 动态计算当前值图形坐标点 /// </summary> private void PaintPath() { var one_value = 161d / ((MaxValue - MinValue) / Interval); var width = 26d; var height = 169d - (MaxValue - CurrentValue) * (one_value / Interval); var x = 2d; var y = 169d - (169d - (MaxValue - CurrentValue) * (one_value / Interval)); CurrentGeometry = Geometry.Parse($@"M 2 {y + 4} a 4 4 0 0 1 4 -4 h {width - 8} a 4 4 0 0 1 4 4 v {height - 8} a 4 4 0 0 1 -4 4 h -{width - 8} a 4 4 0 0 1 -4 -4 z"); } } } 

2 ） 使用ThermometerExample.xaml.cs如下：

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.ThermometerExample" 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:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers" xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Border Background="{DynamicResource BackgroundSolidColorBrush}" CornerRadius="12" Width="400" Height="400" Effect="{StaticResource NormalShadowDepth}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Slider x:Name="PART_Slider" IsSnapToTickEnabled="True" Value="10" Minimum="-10" Maximum="40" Orientation="Vertical" Height="300"/> <Grid VerticalAlignment="Center" Margin="160,0,0,0"> <Path Fill="{StaticResource PrimaryMouseOverSolidColorBrush}" Stroke="{StaticResource PrimaryMouseOverSolidColorBrush}" StrokeThickness="1" Opacity=".6" Data="{Binding ElementName=PART_Thermometer, Path=CurrentGeometry,Mode=TwoWay}"/> <wpfdev:Thermometer x:Name="PART_Thermometer" CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/> </Grid> <TextBlock Text="{Binding ElementName=PART_Thermometer,Path=CurrentValue,StringFormat={}{0}℃}" FOntSize="24" Grid.Column="1" Foreground="{StaticResource PrimaryPressedSolidColorBrush}" FOntFamily="Bahnschrift" HorizOntalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Border> </Grid> </UserControl> 

鸣谢 - 帅嘉欣

Github|ThermometerExample
码云|ThermometerExample