首页 > 代码库 > Silverlight自定义控件开发：温度计
Silverlight自定义控件开发：温度计
由于在实际项目中需要实时显示采集到的空气温湿度，土壤温湿度值，需要用比较显眼并且清楚明了的方式来展示，这里我们准备采用温度计的方式来进行。一方面是因为大家都熟悉这个，知道怎么去看；同时，温度计本身也比较好封装。以下就是封装好的效果及其调用代码（水银柱和刻度线都是有动画效果的，看上去比较逼真）：
调用代码如下：
1: var data = http://www.mamicode.com/new DataNotify();
2: data.MaxData = http://www.mamicode.com/30; 3: data.MinData = http://www.mamicode.com/-15; 4: 5: data.MinRange = -15; 6: data.MaxRange = 75; 7: 8: data.CurrentData = http://www.mamicode.com/40; 9: 10: data.Title = "空气温度";
11: data.Unit = "℃";
12: data.ThemeSet = Theme.Red; 13: 14: var uc = new TemperatureControl(data);
15: uc.Margin = new Thickness(-620, 0, 10, 10);
16: Test.Children.Add(uc); 17: 18: 19: var data1 = new DataNotify();
20: data1.MaxData = http://www.mamicode.com/100; 21: data1.MinData = http://www.mamicode.com/0; 22: data1.MinRange = 0; 23: data1.MaxRange = 100; 24: data1.CurrentData = http://www.mamicode.com/83;25: data1.Title = "空气湿度";
26: data1.Unit = "%";
27: data1.ThemeSet = Theme.Blue; 28: 29: var uc1 = new TemperatureControl(data1);
30: uc1.Margin = new Thickness(-207, 0, 10, 10);
31: Test.Children.Add(uc1); 32: 33: var data2 = new DataNotify();
34: data2.MaxData = http://www.mamicode.com/60; 35: data2.MinData = http://www.mamicode.com/-10; 36: data2.MinRange = -10; 37: data2.MaxRange = 100; 38: data2.CurrentData = http://www.mamicode.com/36;39: data2.Title = "土壤温度";
40: data2.Unit = "℃";
41: data2.ThemeSet = Theme.Orange; 42: 43: var uc2 = new TemperatureControl(data2);
44: uc2.Margin = new Thickness(213, 0, 10, 10);
45: Test.Children.Add(uc2); 46: 47: var data3 = new DataNotify();
48: data3.MaxData = http://www.mamicode.com/60; 49: data3.MinData = http://www.mamicode.com/-10; 50: data3.MinRange = -10; 51: data3.MaxRange = 100; 52: data3.CurrentData = http://www.mamicode.com/36;53: data3.Title = "土壤湿度";
54: data3.Unit = "％";
55: data3.ThemeSet = Theme.Mo; 56: 57: var uc3 = new TemperatureControl(data3);
58: uc3.Margin = new Thickness(633, 0, 10, 10);
59: Test.Children.Add(uc3);由于调用代码相当简单，我就不再这里赘述了，下面着重讲解其实现方式。
首先在Silverlight项目中创建一个用户控件，我们命名为“TemperatureControl.xaml”，然后创建一个“ResData.xaml”资源文件项目，用于放置样式定义。
然后开始对项目进行布局，组织xaml代码，得到的页面显示如下：
XAML文件代码如下：
1: <UserControl
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d"
7: x:Class="TinyFrame.Silverlight.TemperatureControl"
8: Loaded="UserControl_Loaded"
9: Width="200" Height="227">
10: 11: <Border Style="{StaticResource GridBorder}">
12: <Grid x:Name="LayoutRoot" Background="White">
13: <Grid.RowDefinitions>
14: <RowDefinition Height="30"/>
15: <RowDefinition/>
16: </Grid.RowDefinitions>
17: <Border Grid.Row="0" Style="{StaticResource TopBorder}">
18: <TextBlock Style="{StaticResource TxtTitle}" Text="{Binding Title}" />
19: </Border>
20: <Border Grid.Row="1">
21: <Grid>
22: <Grid.ColumnDefinitions>
23: <ColumnDefinition Width="40"/>
24: <ColumnDefinition/>
25: <ColumnDefinition/>
26: </Grid.ColumnDefinitions>
27: <Border Name="bRange" Style="{StaticResource RangeBorder}" BorderBrush="{Binding LineColor}" VerticalAlignment="Bottom">
28: <Grid>
29: <Grid.RowDefinitions>
30: <RowDefinition/>
31: <RowDefinition/>
32: </Grid.RowDefinitions>
33: <TextBlock Grid.Row="0" Style="{StaticResource TxtCommon}" Name="txtMax" Foreground="{Binding lineColor}" VerticalAlignment="Top" ></TextBlock>
34: <TextBlock Grid.Row="1" Style="{StaticResource TxtCommon}" Name="txtMin" Foreground="{Binding lineColor}" VerticalAlignment="Bottom"></TextBlock>
35: </Grid>
36: </Border>
37: <Image Margin="-14,18,0,0" Source="{Binding BgImg}" Grid.Column="1"/>
38: <Border Grid.Column="2">
39: <Grid>
40: <TextBlock Margin="20,40,6,0" Text="{Binding CurrentData}" Foreground="{Binding IsOK}" Style="{StaticResource TxtValue}" ></TextBlock>
41: <TextBlock Margin="20,65,6,0" Text="{Binding MaxData}" Style="{StaticResource TxtValue}"></TextBlock>
42: <TextBlock Margin="20,90,6,0" Text="{Binding MinData}" Style="{StaticResource TxtValue}"></TextBlock>
43: <TextBlock Style="{StaticResource TxtIntro}" Text="当前值:" Margin="-20,40,0,0" Name="i1" />
44: <TextBlock Style="{StaticResource TxtIntro}" Text="最大值:" Margin="-20,65,0,0" Name="i2" />
45: <TextBlock Style="{StaticResource TxtIntro}" Text="最小值:" Margin="-20,90,0,0" Name="i3" />
46: </Grid>
47: </Border>
48: <Border Style="{StaticResource BorderUnit}" Grid.Column="1" Margin="22,24,0,0">
49: <TextBlock Name="t" Text="{Binding Unit}" />
50: </Border>
51: <Image x:Name="bStep" Style="{StaticResource ImgStep}" Source="{Binding BgStep}" Margin="11,0,0,27" Grid.Column="1" />
52: <Canvas Height="120" Background="White" HorizontalAlignment="Left" Margin="24,47,0,0" Name="canvas1" VerticalAlignment="Top" Width="32" OpacityMask="Black" Grid.Column="1" />
53: </Grid>
54: </Border>
55: </Grid>
56: </Border>
57: </UserControl>
通过第一副图的对比，我们能轻易的知道上图中那些空白的位置放什么东西。
由于在XAML中我采用了Binding来进行数据绑定，那么就展示下我用于数据绑定的类：
1: public class DataNotify : INotifyPropertyChanged
2: {3: private double minData = http://www.mamicode.com/0; //最小值
4: public double MinData
5: { 6: get 7: {8: return minData;
9: } 10: set 11: {12: if (value != minData)
13: {14: minData = http://www.mamicode.com/value;
15: Notify("MinData");
16: } 17: } 18: } 19: 20: private double maxData = http://www.mamicode.com/1; //最大值
21: public double MaxData
22: { 23: get 24: {25: return maxData;
26: } 27: set 28: {29: if (value != maxData)
30: {31: maxData = http://www.mamicode.com/value;
32: Notify("MaxData");
33: } 34: } 35: } 36: 37: private double minRange = 0; //刻度最小范围
38: public double MinRange
39: {40: get { return minRange; }
41: set 42: {43: if (minRange != value)
44: {45: minRange = value;
46: Notify("MinRange");
47: } 48: } 49: } 50: 51: private double maxRange = 90; //刻度最大范围
52: public double MaxRange
53: {54: get { return maxRange; }
55: set 56: {57: if (maxRange != value)
58: {59: maxRange = value;
60: Notify("MaxRange");
61: } 62: } 63: } 64: 65: private double currentData; //当前值
66: public double CurrentData
67: { 68: get 69: {70: return currentData;
71: } 72: set 73: {74: if (value != currentData)
75: {76: currentData = http://www.mamicode.com/value;
77: Notify("CurrentData");
78: } 79: } 80: } 81: 82: private Brush isOK; //指标是否正常
83: public Brush IsOK
84: { 85: get 86: {87: if (currentData >= minData && currentData <= maxData)
88: return new SolidColorBrush(Colors.Black);
89: else
90: return new SolidColorBrush(Colors.Red);
91: } 92: } 93: 94: private string title; //标题
95: public string Title
96: { 97: get 98: {99: return title;
100: } 101: set 102: {103: if (value != title)
104: {105: title = value;
106: Notify("Title");
107: } 108: } 109: } 110: 111: private string unit; //单位
112: public string Unit
113: { 114: get 115: {116: return unit;
117: 118: } 119: set 120: {121: if (value != unit)
122: {123: unit = value;
124: Notify("Unit");
125: } 126: } 127: } 128: 129: private Theme themeSet;
130: public Theme ThemeSet
131: { 132: get 133: {134: return themeSet;
135: } 136: set 137: {138: if (value != themeSet)
139: {140: themeSet = value;
141: Notify("ThemeSet");
142: } 143: } 144: } 145: 146: private string bgImg; //背景默认值
147: public string BgImg
148: { 149: get 150: {151: return bgImg;
152: } 153: set 154: {155: if (value != bgImg)
156: {157: bgImg = value;
158: Notify("BgImg");
159: } 160: } 161: } 162: 163: private string bgStep; //水银柱块默认值
164: public string BgStep
165: { 166: get 167: {168: return bgStep;
169: } 170: set 171: {172: if (value != bgStep)
173: {174: bgStep = value;
175: Notify("BgStep");
176: } 177: } 178: } 179: 180: private string lineColor; //刻度范围条的颜色
181: public string LineColor
182: { 183: get 184: {185: return lineColor;
186: } 187: set 188: {189: if (lineColor != value)
190: {191: lineColor = value;
192: Notify("LineColor");
193: } 194: } 195: } 196: 197: public event PropertyChangedEventHandler PropertyChanged;
198: 199: public void Notify(string propertyName)
200: {201: if (PropertyChanged != null)
202: PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
203: } 204: }上面的代码中，封装了温度计的所有需要的属性，包括刻度值，最大最小范围值，当前值，主题，标题，指标正常与否等。
最后就是具体的事件组织方法:
1: public partial class TemperatureControl : UserControl
2: {3: public TemperatureControl(DataNotify dataNotify)
4: { 5: InitializeComponent();6: this.dataNotify = dataNotify;
7: 8: //绑定数据上下文
9: this.DataContext = dataNotify;
10: 11: //左侧刻度线的最大值最小值
12: double tempMinData = http://www.mamicode.com/dataNotify.MinData;
13: if (timer == null)
14: timer = new DispatcherTimer();
15: timer.Interval = new TimeSpan(100);
16: timer.Tick += (sender, e) => 17: { 18: tempMinData++; 19: bRange.Dispatcher.BeginInvoke((Action)(() => 20: { 21: bRange.Margin = GetThicknessByMaxMin(); 22: bRange.Height = (tempMinData - dataNotify.MinData) * THeight / (dataNotify.MaxRange - dataNotify.MinRange);23: txtMax.Text = tempMinData.ToString("0.0");
24: txtMin.Text = dataNotify.MinData.ToString("0.0");
25: }));26: if (tempMinData =http://www.mamicode.com/= dataNotify.MaxData)
27: timer.Stop(); 28: }; 29: timer.Start(); 30: 31: //当前值的显示
32: double tempMinRange = dataNotify.MinRange;
33: if (timerStep == null)
34: timerStep = new DispatcherTimer();
35: timerStep.Interval = new TimeSpan(100);
36: timerStep.Tick += (sender, e) => 37: { 38: tempMinRange++;39: double value;
40: if (dataNotify.MinRange < 0)
41: value = (THeight / (dataNotify.MaxRange - dataNotify.MinRange)) * tempMinRange + (Math.Abs(dataNotify.MinRange)) * (120 / (dataNotify.MaxRange - dataNotify.MinRange));
42: else
43: value = (THeight / (dataNotify.MaxRange - dataNotify.MinRange)) * tempMinRange;
44: if (value < 0)
45: value = 0;
46: bStep.Height = value;
47: if (Math.Abs(tempMinRange - dataNotify.CurrentData) < 0.6)
48: { 49: timerStep.Stop(); 50: } 51: }; 52: timerStep.Start(); 53: } 54: 55: private readonly DispatcherTimer timer = null;
56: private readonly DispatcherTimer timerStep = null;
57: public DataNotify dataNotify;
58: 59: private const int THeight = 120; //水银柱高度为120
60: private const int FHeight = 30; //水银球高度为30
61: 62: //动态设置水银柱的Margin属性，以便于适应 带有正负值的场景
63: private Thickness GetThicknessByMaxMin()
64: {65: double range = dataNotify.MaxRange - dataNotify.MinRange;
66: if (dataNotify.MinRange < 0)
67: return new Thickness(0, 0, 0, FHeight + Math.Abs(dataNotify.MinRange)*THeight/range + (dataNotify.MinData) * THeight / range);
68: else
69: return new Thickness(0, 0, 0, FHeight + (dataNotify.MinData) * THeight / range);
70: } 71: 72: private void UserControl_Loaded(object sender, RoutedEventArgs e)
73: {74: //设置温度计的主题
75: switch (dataNotify.ThemeSet)
76: {77: case Theme.Red:
78: dataNotify.BgImg = "Image/tem-red.png";
79: dataNotify.BgStep = "Image/step-red.png";
80: dataNotify.LineColor = "Red";
81: break;
82: case Theme.Blue:
83: dataNotify.BgImg = "Image/tem-blue.png";
84: dataNotify.BgStep = "Image/step-blue.png";
85: dataNotify.LineColor = "Blue";
86: break;
87: 88: case Theme.Mo:
89: dataNotify.BgImg = "Image/tem-mo.png";
90: dataNotify.BgStep = "Image/step-mo.png";
91: dataNotify.LineColor = "#00ACAE";
92: break;
93: 94: case Theme.Yellow:
95: dataNotify.BgImg = "Image/tem-yellow.png";
96: dataNotify.BgStep = "Image/step-yellow.png";
97: dataNotify.LineColor = "#849C00";
98: break;
99: 100: case Theme.Orange:
101: dataNotify.BgImg = "Image/tem-orange.png";
102: dataNotify.BgStep = "Image/step-orange.png";
103: dataNotify.LineColor = "#C88600";
104: break;
105: 106: case Theme.Green:
107: dataNotify.BgImg = "Image/tem-green.png";
108: dataNotify.BgStep = "Image/step-green.png";
109: dataNotify.LineColor = "#178A00";
110: break;
111: 112: default:
113: dataNotify.BgImg = "Image/tem-red.png";
114: dataNotify.BgStep = "Image/step-red.png";
115: dataNotify.LineColor = "Red";
116: break;
117: } 118: 119: Draw(dataNotify.MinRange,dataNotify.MaxRange); 120: } 121: 122: //根据用户输入的最大刻度值，最小刻度值，来划刻度线
123: private void Draw(double minRange,double maxRange)
124: { 125: var step = (maxRange - minRange) / 120;126: Line redLine = new Line();
127: redLine.X1 = 0; 128: redLine.Y1 = 0; 129: redLine.X2 = 0; 130: redLine.Y2 = 120; 131: redLine.StrokeThickness = 1;132: redLine.Stroke = new SolidColorBrush(Colors.Black);
133: canvas1.Children.Add(redLine);134: int j = 6;
135: for (int i = 0; i <= 6; i++)
136: {137: Line line = new Line();
138: line.X1 = 0; 139: line.Y1 = i * 20; 140: 141: line.X2 =10; 142: line.Y2 = i * 20; 143: 144: TextBlock tb = new TextBlock();
145: tb.Margin = new Thickness(12,i*20-8,0,0);
146: tb.FontSize = 9;147: tb.Text = (((maxRange - minRange) / 6) * j + minRange).ToString("0");
148: 149: line.StrokeThickness = 1;150: line.Stroke = new SolidColorBrush(Colors.Black);
151: canvas1.Children.Add(line); 152: canvas1.Children.Add(tb);153: for (int x = 0; x < 30; x++)
154: {155: Line lineInner = new Line();
156: lineInner.X1 = 0; 157: lineInner.Y1 = (x + 1) * 4; 158: 159: lineInner.X2 = 6; 160: lineInner.Y2 = (x + 1) * 4; 161: 162: lineInner.StrokeThickness = 1;163: lineInner.Stroke = new SolidColorBrush(Colors.Black);
164: canvas1.Children.Add(lineInner); 165: } 166: 167: j--; 168: } 169: } 170: 171: }
上面我加了一部分注释，解释的比较清楚了。由于写这个温度计的时候，我们时刻需要测量好屏幕上的水银柱高度和当前值的对应关系，所以里面有比较多的运算，具体的运算方式还希望能够自己推敲。代码我将在下一篇中附上。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。