Silverlight自定义控件开发：仪表盘

在项目中，由于使用到了活动积温运算，也就是指当日平均气温稳定上升到10℃以上时，大多数农作物才能活跃生长。把大于等于10℃持续期内的日平均气温累加起来，得到的气温总和，叫做活动积温。所以我决定采用dojo的原生仪表盘的图片素材进行封装，作出一个silverlight版本来。下面是其界面截图和具体的调用方法：

调用方法如下：

   1:                  Data d = new Data();

   2:                  d.Val = 40;

   3:   

   4:                  var uc = new ChartControl(d);

   5:                  Test.Children.Add(uc);

由于本控件做的比较仓促，所以XAML代码并未加以清理，还请各位看官凑合这看吧。

   1:  <UserControl x:Class="TinyFrame.Silverlight.ChartControl"

   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:      xmlns:converter="clr-namespace:TinyFrame.Silverlight"   

   7:      mc:Ignorable="d"

   8:      Loaded="UserControl_Loaded"

   9:      d:DesignHeight="248" d:DesignWidth="400">

  10:      

  11:      <UserControl.Resources>

  12:          <converter:RotationConverter x:Name="RConverter" />

  13:      </UserControl.Resources>

  14:      

  15:      <Grid Background="White" x:Name="Grid" Height="236" Width="385">

  16:          <Border BorderBrush="Green" CornerRadius="5" BorderThickness="3">

  17:              <Grid>

  18:          <Image HorizontalAlignment="Left" Margin="17,19,0,0" Width="200" Source="Image/chart.png" Stretch="Fill" Height="200" VerticalAlignment="Top" />

  19:          <Image x:Name="RImg"  HorizontalAlignment="Left" Margin="112,52,0,0" Width="9" Source="Image/chart-pointer.png" Stretch="Fill" Height="132" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">

  20:              <Image.RenderTransform>

  21:                  <TransformGroup>

  22:                      <ScaleTransform/>

  23:                      <SkewTransform/>

  24:                      <RotateTransform x:Name="MyRotation" Angle="{Binding Val, Converter={StaticResource RConverter}}"/>

  25:                      <TranslateTransform/>

  26:                  </TransformGroup>

  27:              </Image.RenderTransform>

  28:          </Image>

  29:          <TextBlock Text="{Binding Val}" Height="17" HorizontalAlignment="Left" Margin="92,166,0,0" Name="textBlock1"  VerticalAlignment="Top" Width="50" TextAlignment="Center" />

  30:          <Border BorderBrush="#BCCBD7" BorderThickness="1" Height="200" CornerRadius="5,5,0,0" Margin="223,19,13,0" Name="border1" VerticalAlignment="Top">

  31:              <Grid Width="142">

  32:                  <Border BorderBrush="#BCCBD7" BorderThickness="0,0,0,1" CornerRadius="5,5,0,0" Height="24" HorizontalAlignment="Left" Margin="-1,0,0,0" Name="border2" VerticalAlignment="Top" Width="148">

  33:                      <Border.Background>

  34:                          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  35:                              <GradientStop Color="#BCCBD7"/>

  36:                              <GradientStop Color="#FFFFFF" Offset="1"/>

  37:                          </LinearGradientBrush>

  38:                      </Border.Background>

  39:                      <TextBlock Height="23"  Name="textBlock2" Text="活动积温" TextAlignment="Center" VerticalAlignment="Center" Foreground="Green" FontSize="14" FontWeight="Bold" Width="102" />

  40:                  </Border>

  41:                  <TextBlock Height="98" Foreground="Green" HorizontalAlignment="Left"  Margin="6,30,0,0" Name="textBlock3" Text="当日平均气温稳定上升到10℃以上时，大多数农作物才能活跃生长。把大于等于10℃持续期内的日平均气温累加起来，得到的气温总和，叫做活动积温。" VerticalAlignment="Top" Width="135" TextWrapping="Wrap" />

  42:                  <Button Content="同比活动积温" Height="23" Foreground="Green" HorizontalAlignment="Left" Margin="6,140,0,0" Name="button1" VerticalAlignment="Top" Width="130" />

  43:                          <Button Content="环比活动积温" Height="23" Foreground="Green" HorizontalAlignment="Left" Margin="6,169,0,0" Name="button2" VerticalAlignment="Top" Width="130" />

  44:              </Grid>

  45:          </Border>

  46:              </Grid>

  47:          </Border>

  48:      </Grid>

  49:  </UserControl>

后台代码如下：

   1:  using System.Windows.Controls;

   2:  using System.ComponentModel;

   3:  using System.Windows.Threading;

   4:   

   5:  namespace TinyFrame.Silverlight

   6:  {

   7:      public partial class ChartControl : UserControl

   8:      {

   9:          public ChartControl(Data data)

  10:          {

  11:              InitializeComponent();

  12:              this.data = data;

  13:              Grid.DataContext = data;

  14:          }

  15:   

  16:          private Data data;

  17:          private DispatcherTimer timer;

  18:          private static double temp;

  19:      }

  20:   

  21:      public class Data:INotifyPropertyChanged

  22:      {

  23:          /*转30゜的角，表盘上的区间是 动了10

  24:          0  刻度对应的角是 -150゜

  25:          10 刻度对应的角是 -120゜

  26:          20 刻度对应的角是 -90゜

  27:          ...

  28:          100刻度对应的角是  150゜

  29:          刻度数(x)转角度数(y): x = -150+3y;

  30:          角度数(y)转刻度数(x): y = x/3 +50;

  31:          */

  32:          private double val = 0;

  33:          public double Val

  34:          {

  35:              get

  36:              {

  37:                  return val;

  38:              }

  39:              set

  40:              {

  41:                  if(val!=value)

  42:                  {

  43:                      preVal = val;

  44:   

  45:                      val=value;

  46:                      Notify("Val");

  47:                  }

  48:              }

  49:          }

  50:   

  51:          private double preVal;

  52:          public double PreVal

  53:          {

  54:              get

  55:              {

  56:                  return preVal;

  57:              }

  58:              set

  59:              {

  60:                  if (preVal != value)

  61:                  {

  62:                      preVal = value;

  63:                      Notify("PreVal");

  64:                  }

  65:              }

  66:          }

  67:   

  68:          public event PropertyChangedEventHandler PropertyChanged;

  69:   

  70:          public void Notify(string propertyName)

  71:          {

  72:              if (PropertyChanged != null)

  73:                  PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

  74:          }

  75:      }

  76:  }

由于用户输入的当前积温值（X）和刻度值（Y）有如下的对应关系：X=-150+3*Y，所以这里我们需要进行一下值的转换，就是让用户输入当前积温值的时候，能够自动转换为表盘需要转的度数，这里我们采用Value Converter来实现：

   1:  using System;

   2:  using System.Windows.Data;

   3:  using System.Globalization;

   4:   

   5:  namespace TinyFrame.Silverlight

   6:  {

   7:      public class RotationConverter:IValueConverter

   8:      {

   9:          public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

  10:          {

  11:              if (value != null)

  12:                  return -150 + 3 * double.Parse(value.ToString());

  13:              return null;

  14:          }

  15:   

  16:          public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

  17:          {

  18:              return null;

  19:          }

  20:      }

  21:  }

在XAML中，我们这样使用，就可以了：

   1:  <Image.RenderTransform>

   2:     <TransformGroup>

   3:         <ScaleTransform/>

   4:         <SkewTransform/>

   5:         <RotateTransform x:Name="MyRotation" Angle="{Binding Val, Converter={StaticResource RConverter}}"/>

   6:         <TranslateTransform/>

   7:      </TransformGroup>

   8:  </Image.RenderTransform>

最后附上代码下载：

点击这里下载