走进WPF之自定义温度计

2024-07-13 14:25| 来源: 网络整理| 查看: 265

WPF中的控件不再具有固定的形象，仅仅是算法内容或数据内容的载体，你可以把控件看成为一组操作穿上了一套衣服，换一个控件就相当于换另外一套衣服。本文主要用WPF的控件模板自定义一个温度计，简述WPF的控件模板的用法，仅供学习分享使用，如有不足之处，还请指正。

模板分类

WPF引入模板，将数据和算法的内容与形式解耦，模板主要分为两大类：

控件模板：是算法内容的体现形式，一个控件怎样组织内部结构才能更符合业务逻辑，让用户操作起来更舒服，控件模板决定了控件“长成什么样子”。数据模板：是数据内容的表现形式，一条数据显示成什么样子，是简单的文本，还是直观的图表，由数据模板决定。示例截图

本例主要用过ProgressBar控件，设计成温度计的样式，如下所示：

示例步骤创建控件模板副本，生成样式资源修改默认资源样式，添加对应内容。绑定数据到文本框

关于如何创建模板副本，可参考前面相关文章。

示例源码 1. 窗口布局

本例使用了两个进度条，分别展示不同样式的温度计，UI代码如下所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

注意：默认情况下，进度条是水平方向的，本例为了模拟温度计，需要设置成垂直方向。

2. 模板样式

ControlTemplate，主要用于设置模板，其中默认生成模板中定义x:Name的内容不可以删除，否则会报错【如：x:Name="TemplateRoot"，x:Name="PART_Indicator"等】。具体如下所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 3. 数据转换

在模板数据绑定的过程中，有些数据需要进行格式化【如：数字转换成带单位的字符串，数值转换成Margin类型等】，所以需要定义数据转换类，如下所示：

1 public class WidthToMarginConvert : IValueConverter 2 { 3 public Double rate { get; set; } 4 5 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 6 { 7 Double width = (Double)value; 8 Double pwidth = width * rate; 9 pwidth = pwidth < 300 ? pwidth : 300; 10 return new Thickness(pwidth, 0, 0, 0); 11 } 12 13 //没有用到 14 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 15 { 16 throw new NotImplementedException(); 17 } 18 } 19 20 public class TempToStringConvert : IValueConverter 21 { 22 23 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 24 { 25 return string.Format("{0}°C", value.ToString()); 26 } 27 28 //没有用到 29 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 30 { 31 throw new NotImplementedException(); 32 } 33 } 备注

以上就是自定义温度计的全部内容，旨在抛砖引玉，共同学习，一起进步。

【本文地址】

公司简介

联系我们