Silverlight自定义控件开发：温度计

由于在实际项目中需要实时显示采集到的空气温湿度，土壤温湿度值，需要用比较显眼并且清楚明了的方式来展示，这里我们准备采用温度计的方式来进行。一方面是因为大家都熟悉这个，知道怎么去看；同时，温度计本身也比较好封装。以下就是封装好的效果及其调用代码（水银柱和刻度线都是有动画效果的，看上去比较逼真）：

调用代码如下：

            var data = new DataNotify();
            data.MaxData = 30;
            data.MinData = -15;

            data.MinRange = -15;
            data.MaxRange = 75;

            data.CurrentData = 40;

            data.Title = "空气温度";
            data.Unit = "℃";
            data.ThemeSet = Theme.Red;

            var uc = new TemperatureControl(data);
            uc.Margin = new Thickness(-620, 0, 10, 10);
            Test.Children.Add(uc);


            var data1 = new DataNotify();
            data1.MaxData = 100;
            data1.MinData = 0;
            data1.MinRange = 0;
            data1.MaxRange = 100;
            data1.CurrentData = 83;
            data1.Title = "空气湿度";
            data1.Unit = "%";
            data1.ThemeSet = Theme.Blue;

            var uc1 = new TemperatureControl(data1);
            uc1.Margin = new Thickness(-207, 0, 10, 10);
            Test.Children.Add(uc1);

            var data2 = new DataNotify();
            data2.MaxData = 60;
            data2.MinData = -10;
            data2.MinRange = -10;
            data2.MaxRange = 100;
            data2.CurrentData = 36;
            data2.Title = "土壤温度";
            data2.Unit = "℃";
            data2.ThemeSet = Theme.Orange;

            var uc2 = new TemperatureControl(data2);
            uc2.Margin = new Thickness(213, 0, 10, 10);
            Test.Children.Add(uc2);

            var data3 = new DataNotify();
            data3.MaxData = 60;
            data3.MinData = -10;
            data3.MinRange = -10;
            data3.MaxRange = 100;
            data3.CurrentData = 36;
            data3.Title = "土壤湿度";
            data3.Unit = "％";
            data3.ThemeSet = Theme.Mo;

            var uc3 = new TemperatureControl(data3);
            uc3.Margin = new Thickness(633, 0, 10, 10);
            Test.Children.Add(uc3);

由于调用代码相当简单，我就不再这里赘述了，下面着重讲解其实现方式。

首先在Silverlight项目中创建一个用户控件，我们命名为“TemperatureControl.xaml”，然后创建一个“ResData.xaml”资源文件项目，用于放置样式定义。

然后开始对项目进行布局，组织xaml代码，得到的页面显示如下：

XAML文件代码如下：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="TinyFrame.Silverlight.TemperatureControl"
    Loaded="UserControl_Loaded"
    Width="200" Height="227">

    <Border Style="{StaticResource GridBorder}">
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Style="{StaticResource TopBorder}">
                <TextBlock Style="{StaticResource TxtTitle}" Text="{Binding Title}" />
            </Border>
            <Border Grid.Row="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Border Name="bRange" Style="{StaticResource RangeBorder}" BorderBrush="{Binding LineColor}"  VerticalAlignment="Bottom">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Style="{StaticResource TxtCommon}" Name="txtMax" Foreground="{Binding lineColor}" VerticalAlignment="Top" ></TextBlock>
                            <TextBlock Grid.Row="1" Style="{StaticResource TxtCommon}" Name="txtMin" Foreground="{Binding lineColor}" VerticalAlignment="Bottom"></TextBlock>
                    </Grid>
                    </Border>
                    <Image Margin="-14,18,0,0" Source="{Binding BgImg}"  Grid.Column="1"/>
                    <Border Grid.Column="2">
                    <Grid>
                    <TextBlock Margin="20,40,6,0" Text="{Binding CurrentData}" Foreground="{Binding IsOK}" Style="{StaticResource TxtValue}" ></TextBlock>
                    <TextBlock Margin="20,65,6,0" Text="{Binding MaxData}"  Style="{StaticResource TxtValue}"></TextBlock>
                    <TextBlock Margin="20,90,6,0" Text="{Binding MinData}"  Style="{StaticResource TxtValue}"></TextBlock>
                    <TextBlock Style="{StaticResource TxtIntro}" Text="当前值:" Margin="-20,40,0,0" Name="i1"  />
                    <TextBlock Style="{StaticResource TxtIntro}" Text="最大值:" Margin="-20,65,0,0"  Name="i2" />
                    <TextBlock Style="{StaticResource TxtIntro}" Text="最小值:" Margin="-20,90,0,0"  Name="i3" />
                        </Grid>
                    </Border>
                    <Border Style="{StaticResource BorderUnit}" Grid.Column="1" Margin="22,24,0,0">
                    <TextBlock   Name="t" Text="{Binding Unit}"  />
                    </Border>
                    <Image x:Name="bStep" Style="{StaticResource ImgStep}" Source="{Binding BgStep}" Margin="11,0,0,27" Grid.Column="1" />
                    <Canvas Height="120" Background="White" HorizontalAlignment="Left" Margin="24,47,0,0" Name="canvas1" VerticalAlignment="Top" Width="32" OpacityMask="Black" Grid.Column="1" />
                </Grid>
            </Border>
        </Grid>
    </Border>
</UserControl>

通过第一副图的对比，我们能轻易的知道上图中那些空白的位置放什么东西。

由于在XAML中我采用了Binding来进行数据绑定，那么就展示下我用于数据绑定的类：

public class DataNotify : INotifyPropertyChanged
   {
       private double minData = 0;  //最小值
       public double MinData
       {
           get
           {
               return minData;
           }
           set
           {
               if (value != minData)
               {
                   minData = value;
                   Notify("MinData");
               }
           }
       }

       private double maxData = 1;  //最大值
       public double MaxData
       {
           get
           {
               return maxData;
           }
           set
           {
               if (value != maxData)
               {
                   maxData = value;
                   Notify("MaxData");
               }
           }
       }

       private double minRange = 0;  //刻度最小范围
       public double MinRange
       {
           get { return minRange; }
           set
           {
               if (minRange != value)
               {
                   minRange = value;
                   Notify("MinRange");
               }
           }
       }

       private double maxRange = 90; //刻度最大范围
       public double MaxRange
       {
           get { return maxRange; }
           set
           {
               if (maxRange != value)
               {
                   maxRange = value;
                   Notify("MaxRange");
               }
           }
       }

       private double currentData;  //当前值
       public double CurrentData
       {
           get
           {
               return currentData;
           }
           set
           {
               if (value != currentData)
               {
                   currentData = value;
                   Notify("CurrentData");
               }
           }
       }

       private Brush isOK;   //指标是否正常
       public Brush IsOK
       {
           get
           {
               if (currentData >= minData && currentData <= maxData)
                   return new SolidColorBrush(Colors.Black);
               else
                   return new SolidColorBrush(Colors.Red);
           }
       }

       private string title;  //标题
       public string Title
       {
           get
           {
               return title;
           }
           set
           {
               if (value != title)
               {
                   title = value;
                   Notify("Title");
               }
           }
       }

       private string unit;   //单位
       public string Unit
       {
           get
           {
               return unit;

           }
           set
           {
               if (value != unit)
               {
                   unit = value;
                   Notify("Unit");
               }
           }
       }

       private Theme themeSet;
       public Theme ThemeSet
       {
           get
           {
               return themeSet;
           }
           set
           {
               if (value != themeSet)
               {
                   themeSet = value;
                   Notify("ThemeSet");
               }
           }
       }

       private string bgImg;  //背景默认值
       public string BgImg
       {
           get
           {
               return bgImg;
           }
           set
           {
               if (value != bgImg)
               {
                   bgImg = value;
                   Notify("BgImg");
               }
           }
       }

       private string bgStep;  //水银柱块默认值
       public string BgStep
       {
           get
           {
               return bgStep;
           }
           set
           {
               if (value != bgStep)
               {
                   bgStep = value;
                   Notify("BgStep");
               }
           }
       }

       private string lineColor;  //刻度范围条的颜色
       public string LineColor
       {
           get
           {
               return lineColor;
           }
           set
           {
               if (lineColor != value)
               {
                   lineColor = value;
                   Notify("LineColor");
               }
           }
       }

       public event PropertyChangedEventHandler PropertyChanged;

       public void Notify(string propertyName)
       {
           if (PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
       }
   }

上面的代码中，封装了温度计的所有需要的属性，包括刻度值，最大最小范围值，当前值，主题，标题，指标正常与否等。

最后就是具体的事件组织方法:

public partial class TemperatureControl : UserControl
   {
       public TemperatureControl(DataNotify dataNotify)
       {
           InitializeComponent();
           this.dataNotify = dataNotify;

           //绑定数据上下文
           this.DataContext = dataNotify;

           //左侧刻度线的最大值最小值
           double tempMinData = dataNotify.MinData;
           if (timer == null)
               timer = new DispatcherTimer();
           timer.Interval = new TimeSpan(100);
           timer.Tick += (sender, e) =>
           {
               tempMinData++;
               bRange.Dispatcher.BeginInvoke((Action)(() =>
               {
                   bRange.Margin = GetThicknessByMaxMin();
                   bRange.Height = (tempMinData - dataNotify.MinData) * THeight / (dataNotify.MaxRange - dataNotify.MinRange);
                   txtMax.Text = tempMinData.ToString("0.0");
                   txtMin.Text = dataNotify.MinData.ToString("0.0");
               }));
               if (tempMinData == dataNotify.MaxData)
                   timer.Stop();
           };
           timer.Start();

           //当前值的显示
           double tempMinRange = dataNotify.MinRange;
           if (timerStep == null)
               timerStep = new DispatcherTimer();
           timerStep.Interval = new TimeSpan(100);
           timerStep.Tick += (sender, e) =>
           {
               tempMinRange++;
               double value;
               if (dataNotify.MinRange < 0)
                   value = (THeight / (dataNotify.MaxRange - dataNotify.MinRange)) * tempMinRange + (Math.Abs(dataNotify.MinRange)) * (120 / (dataNotify.MaxRange - dataNotify.MinRange));
               else
                   value = (THeight / (dataNotify.MaxRange - dataNotify.MinRange)) * tempMinRange;
               if (value < 0)
                   value = 0;
               bStep.Height = value;
               if (Math.Abs(tempMinRange - dataNotify.CurrentData) < 0.6)
               {
                   timerStep.Stop();
               }
           };
           timerStep.Start();
       }

       private readonly DispatcherTimer timer = null;
       private readonly DispatcherTimer timerStep = null;
       public DataNotify dataNotify;

       private const int THeight = 120;   //水银柱高度为120
       private const int FHeight = 30;    //水银球高度为30

       //动态设置水银柱的Margin属性，以便于适应 带有正负值的场景
       private Thickness GetThicknessByMaxMin()
       {
           double range = dataNotify.MaxRange - dataNotify.MinRange;
           if (dataNotify.MinRange < 0)
               return new Thickness(0, 0, 0, FHeight + Math.Abs(dataNotify.MinRange)*THeight/range + (dataNotify.MinData) * THeight / range);
           else
               return new Thickness(0, 0, 0, FHeight + (dataNotify.MinData) * THeight / range);
       }

       private void UserControl_Loaded(object sender, RoutedEventArgs e)
       {
           //设置温度计的主题
           switch (dataNotify.ThemeSet)
           {
               case Theme.Red:
                   dataNotify.BgImg = "Image/tem-red.png";
                   dataNotify.BgStep = "Image/step-red.png";
                   dataNotify.LineColor = "Red";
                   break;
               case Theme.Blue:
                   dataNotify.BgImg = "Image/tem-blue.png";
                   dataNotify.BgStep = "Image/step-blue.png";
                   dataNotify.LineColor = "Blue";
                   break;

               case Theme.Mo:
                   dataNotify.BgImg = "Image/tem-mo.png";
                   dataNotify.BgStep = "Image/step-mo.png";
                   dataNotify.LineColor = "#00ACAE";
                   break;

               case Theme.Yellow:
                   dataNotify.BgImg = "Image/tem-yellow.png";
                   dataNotify.BgStep = "Image/step-yellow.png";
                   dataNotify.LineColor = "#849C00";
                   break;

               case Theme.Orange:
                   dataNotify.BgImg = "Image/tem-orange.png";
                   dataNotify.BgStep = "Image/step-orange.png";
                   dataNotify.LineColor = "#C88600";
                   break;

               case Theme.Green:
                   dataNotify.BgImg = "Image/tem-green.png";
                   dataNotify.BgStep = "Image/step-green.png";
                   dataNotify.LineColor = "#178A00";
                   break;

               default:
                   dataNotify.BgImg = "Image/tem-red.png";
                   dataNotify.BgStep = "Image/step-red.png";
                   dataNotify.LineColor = "Red";
                   break;
           }

           Draw(dataNotify.MinRange,dataNotify.MaxRange);
       }

       //根据用户输入的最大刻度值，最小刻度值，来划刻度线
       private void Draw(double minRange,double maxRange)
       {
           var step = (maxRange - minRange) / 120;
           Line redLine = new Line();
           redLine.X1 = 0;
           redLine.Y1 = 0;
           redLine.X2 = 0;
           redLine.Y2 = 120;
           redLine.StrokeThickness = 1;
           redLine.Stroke = new SolidColorBrush(Colors.Black);
           canvas1.Children.Add(redLine);
           int j = 6;
           for (int i = 0; i <= 6; i++)
           {
               Line line = new Line();
               line.X1 = 0;
               line.Y1 = i * 20;

               line.X2 =10;
               line.Y2 = i * 20;

               TextBlock tb = new TextBlock();
               tb.Margin = new Thickness(12,i*20-8,0,0);
               tb.FontSize = 9;
               tb.Text = (((maxRange - minRange) / 6) * j + minRange).ToString("0");

               line.StrokeThickness = 1;
               line.Stroke = new SolidColorBrush(Colors.Black);
               canvas1.Children.Add(line);
               canvas1.Children.Add(tb);
               for (int x = 0; x < 30; x++)
               {
                   Line lineInner = new Line();
                   lineInner.X1 = 0;
                   lineInner.Y1 = (x + 1) * 4;

                   lineInner.X2 = 6;
                   lineInner.Y2 = (x + 1) * 4;

                   lineInner.StrokeThickness = 1;
                   lineInner.Stroke = new SolidColorBrush(Colors.Black);
                   canvas1.Children.Add(lineInner);
               }

               j--;
           }
       }

   }

上面我加了一部分注释，解释的比较清楚了。由于写这个温度计的时候，我们时刻需要测量好屏幕上的水银柱高度和当前值的对应关系，所以里面有比较多的运算，具体的运算方式还希望能够自己推敲。代码我将在下一篇中附上。