教你如何用Silverlight做一个仪表盘

使用Silverlight做一个仪表盘控件，最好是借助Expression blend来实现。先看看这个控件的效果：

 

 

首先需要创建一个自定义控件：

 

它需要继承方法：OnApplyTemplate()。代码如下：

public override void OnApplyTemplate()

    {

      base.OnApplyTemplate();

 

      Grid root = GetTemplateChild("LayoutRoot") as Grid;

      root.DataContext = this;

    }

 

我们创建了一个可视化的控件Grid,并把当前这个控件GaugeControl作为Grid的DataContext。

接下来需要完成的是自定义几个依赖属性：

显示的值(Value),最大值(Maximum)和最小值(Minimum)，以及不同的量度区间(QualitativeRanges)。

 

例如，Value的代码：

public double Value
    {
      get { return (double)GetValue(ValueProperty); }
      set { SetValue(ValueProperty, value); }
    }
 
    DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double),
      typeof(GaugeControl), new PropertyMetadata(50.0, OnValuePropertyChanged));
 
    private static void OnValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      ((GaugeControl)d).OnPropertyChanged("Value");
    }

 

接下来需要做的是创建一个Rsource文件，添加一个Style并给它设置一个名字为LayoutRoot的控件模板。

 

接下来是我们来用Expression Blend来打开项目，编辑这个控件模板。

首先是添加一个Grid，并在这个Grid中添加一个圆：

 

通过Fill和Stroke来设置圆的显示：

 

在圆中添加一个ItemControl,因为我们要使用数据绑定来给显示小的标记点，所以需要一个ViewModel来为这些标记点提供数据绑定：

 

例如：

 

  
    

   
     
   
     <
   
     ItemsControl 
   
     ItemsSource
   
     ="
   
     {Binding MinorTicks}
   
     "
   
     

 VerticalAlignment
   
     ="Center"
   
      HorizontalAlignment
   
     ="Center"
   
     >
   
     

 
   
     <
   
     ItemsControl.ItemsPanel
   
     >
   
     

 
   
     <
   
     ItemsPanelTemplate
   
     >
   
     

 
   
     <
   
     Canvas
   
     />
   
     

 
   
     </
   
     ItemsPanelTemplate
   
     >
   
     

 
   
     </
   
     ItemsControl.ItemsPanel
   
     >
   
     

 
   
     <
   
     ItemsControl.ItemTemplate
   
     >
   
     

 
   
     <
   
     DataTemplate
   
     >
   
     

 
   
     <
   
     Ellipse 
   
     Fill
   
     ="Black"
   
      Width
   
     ="3"
   
      Height
   
     ="3"
   
     >
   
     

 
   
     <
   
     Ellipse.RenderTransform
   
     >
   
     

 
   
     <
   
     TransformGroup
   
     >
   
     

 
   
     <
   
     TranslateTransform 
   
     X
   
     ="-1.5"
   
      Y
   
     ="-1.5"
   
     />
   
     

 
   
     <
   
     TranslateTransform 
   
     X
   
     ="0"
   
     

 Y
   
     ="
   
     {Binding Parent.GridHeight, ConverterParameter=-0.37, Converter={StaticResource ScaleFactorConverter}}
   
     "
   
     />
   
     

 
   
     <
   
     RotateTransform 
   
     Angle
   
     ="
   
     {Binding Angle}
   
     "
   
     />
   
     

 
   
     </
   
     TransformGroup
   
     >
   
     

 
   
     </
   
     Ellipse.RenderTransform
   
     >
   
     

 
   
     </
   
     Ellipse
   
     >
   
     

 
   
     </
   
     DataTemplate
   
     >
   
     

 
   
     </
   
     ItemsControl.ItemTemplate
   
     >
   
     

 
   
     </
   
     ItemsControl
   
     >
   
     


  
    

 

 

需要绑定的就是MinorTicks.它都有ViewModel提供值。

同理可以绑定大的标记点：

 

接下来就是指针的创建：

首先需要创建一个Grid：

然后使用Path元素来创建一个菱形并未它加上效果：

可以看这个例子学习使用path来画图：http://www.c-sharpcorner.com/UploadFile/mahesh/PathInSL03252009005946AM/PathInSL.aspx

 

最后一步是添加阴影效果显得更酷:

 

完成啦。

对于数据转换还是需要一些转换函数，比如，颜色转化为Brush:

 

 

Cheers

Nic