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

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

调用方法如下：

                Data d = new Data();
                d.Val = 40;

                var uc = new ChartControl(d);
                Test.Children.Add(uc);

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

<UserControl x:Class="TinyFrame.Silverlight.ChartControl"
    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"
    xmlns:converter="clr-namespace:TinyFrame.Silverlight"
    mc:Ignorable="d"
    Loaded="UserControl_Loaded"
    d:DesignHeight="248" d:DesignWidth="400">

    <UserControl.Resources>
        <converter:RotationConverter x:Name="RConverter" />
    </UserControl.Resources>

    <Grid Background="White" x:Name="Grid" Height="236" Width="385">
        <Border BorderBrush="Green" CornerRadius="5" BorderThickness="3">
            <Grid>
        <Image HorizontalAlignment="Left" Margin="17,19,0,0" Width="200" Source="Image/chart.png" Stretch="Fill" Height="200" VerticalAlignment="Top" />
        <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">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform x:Name="MyRotation" Angle="{Binding Val, Converter={StaticResource RConverter}}"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <TextBlock Text="{Binding Val}" Height="17" HorizontalAlignment="Left" Margin="92,166,0,0" Name="textBlock1"  VerticalAlignment="Top" Width="50" TextAlignment="Center" />
        <Border BorderBrush="#BCCBD7" BorderThickness="1" Height="200" CornerRadius="5,5,0,0" Margin="223,19,13,0" Name="border1" VerticalAlignment="Top">
            <Grid Width="142">
                <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">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#BCCBD7"/>
                            <GradientStop Color="#FFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Height="23"  Name="textBlock2" Text="活动积温" TextAlignment="Center" VerticalAlignment="Center" Foreground="Green" FontSize="14" FontWeight="Bold" Width="102" />
                </Border>
                <TextBlock Height="98" Foreground="Green" HorizontalAlignment="Left"  Margin="6,30,0,0" Name="textBlock3" Text="当日平均气温稳定上升到10℃以上时，大多数农作物才能活跃生长。把大于等于10℃持续期内的日平均气温累加起来，得到的气温总和，叫做活动积温。" VerticalAlignment="Top" Width="135" TextWrapping="Wrap" />
                <Button Content="同比活动积温" Height="23" Foreground="Green" HorizontalAlignment="Left" Margin="6,140,0,0" Name="button1" VerticalAlignment="Top" Width="130" />
                        <Button Content="环比活动积温" Height="23" Foreground="Green" HorizontalAlignment="Left" Margin="6,169,0,0" Name="button2" VerticalAlignment="Top" Width="130" />
            </Grid>
        </Border>
            </Grid>
        </Border>
    </Grid>
</UserControl>

后台代码如下：

using System.Windows.Controls;
using System.ComponentModel;
using System.Windows.Threading;

namespace TinyFrame.Silverlight
{
    public partial class ChartControl : UserControl
    {
        public ChartControl(Data data)
        {
            InitializeComponent();
            this.data = data;
            Grid.DataContext = data;
        }

        private Data data;
        private DispatcherTimer timer;
        private static double temp;
    }

    public class Data:INotifyPropertyChanged
    {
        /*转30゜的角，表盘上的区间是 动了10
        0  刻度对应的角是 -150゜
        10 刻度对应的角是 -120゜
        20 刻度对应的角是 -90゜
        ...
        100刻度对应的角是  150゜
        刻度数(x)转角度数(y): x = -150+3y;
        角度数(y)转刻度数(x): y = x/3 +50;
        */
        private double val = 0;
        public double Val
        {
            get
            {
                return val;
            }
            set
            {
                if(val!=value)
                {
                    preVal = val;

                    val=value;
                    Notify("Val");
                }
            }
        }

        private double preVal;
        public double PreVal
        {
            get
            {
                return preVal;
            }
            set
            {
                if (preVal != value)
                {
                    preVal = value;
                    Notify("PreVal");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

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

using System;
using System.Windows.Data;
using System.Globalization;

namespace TinyFrame.Silverlight
{
    public class RotationConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
                return -150 + 3 * double.Parse(value.ToString());
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

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

<Image.RenderTransform>
   <TransformGroup>
       <ScaleTransform/>
       <SkewTransform/>
       <RotateTransform x:Name="MyRotation" Angle="{Binding Val, Converter={StaticResource RConverter}}"/>
       <TranslateTransform/>
    </TransformGroup>
</Image.RenderTransform>

最后附上代码下载：

点击这里下载