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 繪制溫度計兩側的刻度線。

ac1c5cbdcabfb8787e0de0cffe2122b6.png

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.8a?4?4?0?0?1?4?-4h?18a?4?4?0?0?1?4?4v?32.2a?4?4?0?0?1?-4?4h?-18a?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?-4h?{width?-?8}a?4?4?0?0?1?4?4v?{height?-?8}a?4?4?0?0?1?-4?4h?-{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>

?鳴謝 - 帥嘉欣

aa6ff06a881ddffd6acced90cc87198f.gif

Github|ThermometerExample[1]
碼云|ThermometerExample[2]

參考資料

[1]

Github|ThermometerExample: https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Samples/ExampleViews/ThermometerExample.xaml

[2]

碼云|ThermometerExample: https://gitee.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Samples/ExampleViews/ThermometerExample.xaml

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/282422.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/282422.shtml
英文地址，請注明出處：http://en.pswp.cn/news/282422.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

MAVEN簡介之——settings.xml

MAVEN簡介之——settings.xml

概述 Maven的settings.xml配置了Maven執行的方式&#xff0c;像pom.xml一樣&#xff0c;但是它是一個通用的配置&#xff0c;不能綁定到任何特殊的項目。它通常包括本地倉庫地址&#xff0c;遠程倉庫服務&#xff0c;認證信息等。 settings.xml存在于兩個位置&#xff1a; mave…
閱讀更多...
裝win10系統

裝win10系統

一、使用U盤介質安裝win10系統&#xff08;官方方式&#xff09; 官方安裝工具下載地址&#xff1a;https://www.microsoft.com/zh-cn/software-download/windows10 1、進入官方安裝工具下載頁面&#xff0c;點擊立即下載工具&#xff0c;下載安裝工具。2、下載完成后&#xff…
閱讀更多...
C#構造函數、操作符重載以及自定義類型轉換

C#構造函數、操作符重載以及自定義類型轉換

構造器 構造器&#xff08;構造函數&#xff09;是將類型的實例初始化的特殊方法。構造器可分為實例構造器和類型構造器&#xff0c;本節將詳細介紹有關內容。 實例構造器 顧名思義&#xff0c;實例構造器的作用就是對類型的實例進行初始化。如果類沒有顯示定義任何構造器&…
閱讀更多...
「Dotnet 工具箱」 自動生成并綁定 Https 證書

「Dotnet 工具箱」 自動生成并綁定 Https 證書

這里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;有用的工具&#xff0c;不要忘記關注。介紹LettuceEncrypt 是一個使用 C# 開發的免費的工具&#xff0c;它和證書頒發機構 &#xff08;CA&#xff09;集成&#xff0c;比如 Lets Encrypt&#xff0c;它使用了…
閱讀更多...
1115: 零起點學算法22——華氏攝氏溫度轉換

1115: 零起點學算法22——華氏攝氏溫度轉換

1115: 零起點學算法22——華氏攝氏溫度轉換 Time Limit: 1 Sec Memory Limit: 64 MB 64bit IO Format: %lldSubmitted: 3522 Accepted: 1456[Submit][Status][Web Board]Description 輸入一個華氏溫度&#xff0c;根據公式C(5/9)(F-32)計算對應的攝氏溫度。 Input 輸入一個…
閱讀更多...
Navicat Premium 12 的安裝破解

Navicat Premium 12 的安裝破解

Navicat 這款軟件可以說 是數據庫可視化操作的神器, 有綠色的 (最原始版本, 好像現在已經不維護了) , 有金色的 (改良收費版 ) , 還有彩色的 (最新版) , 這里 , 推薦使用彩色版 (也就是截止目前最新的版本 12.0.27). 操作的話, 感覺相比于小綠和小金有很大改進 , 很棒 , 在此給…
閱讀更多...
Vuejs——組件——slot內容分發

Vuejs——組件——slot內容分發

2019獨角獸企業重金招聘Python工程師標準>>> ①概述&#xff1a; 簡單來說&#xff0c;假如父組件需要在子組件內放一些DOM&#xff0c;那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示&#xff0c;就是slot分發負責的活。 ②默認情況下 父組件在子組件內套的…
閱讀更多...
turtle庫基礎練習

turtle庫基礎練習

畫一組同切圓 import turtleturtle.shape(turtle)turtle.circle(10) turtle.circle(20) turtle.circle(30) turtle.circle(40) turtle.circle(50) turtle.circle(60) turtle.circle(70) turtle.circle(80)turtle.hideturtle() turtle.done() 畫一組同心圓 import turtleturtle.…
閱讀更多...
檢查你的項目的引用包依賴關系

檢查你的項目的引用包依賴關系

2019獨角獸企業重金招聘Python工程師標準>>> 隨著著開發的進展,你的項目越來越大,引用的第三方包越來越多,但如何查看都依賴了哪些包,甚至傳遞依賴又是怎樣? 首先解決這個問題的前提,你的項目需要是maven項目,然后可以做如下設置: 選中項目&#xff0c;右鍵->ru…
閱讀更多...
git 項目操作

git 項目操作

1 創建本地倉庫,克隆遠程項目代碼到本地倉庫2. 當我們在本地寫了一些代碼之后 , 查看本地倉庫狀態3. 提交改變到待提交區 git add .4. 提交代碼到待推送區 git commit -m "新建項目kuman"5. 將本地代碼推送到遠程代碼倉庫 git push origin master:nanle 注: 將本地m…
閱讀更多...
(二)SpringBoot功能

(二)SpringBoot功能

web開發 spring boot web開發非常的簡單&#xff0c;其中包括常用的json輸出、filters、property、log等 json 接口開發 在以前的spring 開發的時候需要我們提供json接口的時候需要做那些配置呢 就這樣我們會經常由于配置錯誤&#xff0c;導致406錯誤等等&#xff0c;spring bo…
閱讀更多...
----斐波那契數列---eval函數----類遞歸思想 棧 進出 思想

----斐波那契數列---eval函數----類遞歸思想 棧 進出 思想

------------ 斐波那契 數列 ---------------【1&#xff0c;1,2,3,5,8,13,21,34&#xff0c;...】 1 列表方法實現 # l[1,1] # # # while len(l)<20: # # l.append(l[-1]l[-2]) # # print(l) # # while len(l)!4: # l.append(l[-1]l[-2]) # print(l) # 2 …
閱讀更多...
【招聘(上海)】 .NET 后端工程師

【招聘(上海)】 .NET 后端工程師

蟲蟲拜拜&#xff08;https://www.byepest.com/&#xff09;面向城市家庭、連鎖餐飲、醫療機構等提供高品質的蟲害防治業務&#xff0c;已經拓展到了7個城市&#xff0c;2022年前計劃進入22個城市。平臺實現盈利&#xff0c;并且具有獨特的競爭力&#xff0c;已經獲得德國拜耳公…
閱讀更多...
HybridTime - Accessible Global Consistency with High Clock Uncertainty

HybridTime - Accessible Global Consistency with High Clock Uncertainty

Amazon’s Dynamo [9] and Facebook’s Cassandra [13], relax the consistency model&#xff0c;and offer only eventual consistency. Others such as HBase [1] and BigTable [4] offer strong consistency only for operations touching a single partition, but not acr…
閱讀更多...
公司目前實行的git團隊協作方案

公司目前實行的git團隊協作方案

1. git init 新建本地倉庫2. git clone 項目地址 獲取遠程master代碼3. 在本地master代碼上進行開發, 并將修改提交到待推送區4. 開發完, 在本地master分支基礎上創建ready分支5. 在本地ready分支上(本地測試分支), 拉取并合并遠程nanle分支最新代碼(遠程測試分支)6. 將本地re…
閱讀更多...
bzoj3122 [Sdoi2013]隨機數生成器（bsgs+擴歐+數列）

bzoj3122 [Sdoi2013]隨機數生成器（bsgs+擴歐+數列）

Description Input 輸入含有多組數據&#xff0c;第一行一個正整數T&#xff0c;表示這個測試點內的數據組數。 接下來T行&#xff0c;每行有五個整數p&#xff0c;a&#xff0c;b&#xff0c;X1&#xff0c;t&#xff0c;表示一組數據。保證X1和t都是合法的頁碼。 注意&…
閱讀更多...
邊寫 Javascript 代碼邊玩游戲 – WarriorJS

邊寫 Javascript 代碼邊玩游戲 – WarriorJS

在 github 上看到這個有趣的項目 – WarriorJS &#xff0c;項目的內容寫著 – 令人興奮的程序設計和人工智慧游戲&#xff0c;Ok 我坦白我是看到人工智慧被這個專案所吸引&#xff0c;但是玩了兩個關卡&#xff0c;還是不知道這個游戲跟人工智慧有什么關系&#xff0c;不過這個…
閱讀更多...
挑選合適自己的一門編程語言

挑選合適自己的一門編程語言

2019獨角獸企業重金招聘Python工程師標準>>> 導讀想學編程的原因有很多&#xff0c;你也許是想要做一個程序&#xff0c;又或者你只是想投身于這個行業&#xff0c;所以&#xff0c;在選擇你的第一門編程語言之前&#xff0c;問問你自己&#xff1a;你想要在哪里運行…
閱讀更多...
css 實現章節名稱不換行,多余部分用 ... 代替

css 實現章節名稱不換行,多余部分用 ... 代替

修改之前:修改之后: 代碼: <p style "white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"><? $d[name] ?></p> <i><? $d[pen_name] ?></i> <i><?phpforeach ($d[tags] as $t) {echo $t[tag_name];…
閱讀更多...
.NET 反向代理-YARP 部署Https（SSL）

.NET 反向代理-YARP 部署Https（SSL）

相關文章&#xff1a;.NET 反向代理-YARP.NET 反向代理-YARP 根據域名轉發分享一個基于Abp 和Yarp 開發的API網關項目使用 Yarp 做網關YARP&#xff08;Yet Another Reverse Proxy&#xff09;是使用 .NET 構建的高度可定制的反向代理C# 開源一個基于 yarp 的 API 網關 Demo&am…
閱讀更多...
最新文章

Copyright @ 2022~2023