首页 > 代码库 > Silverlight自定义控件开发：仪表盘
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 = http://www.mamicode.com/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>
最后附上代码下载：
点击这里下载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。