教你如何用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>