How to Use Silverlight to create a dashboard

Use Silverlight to create a dashboard control, preferably through expression blend. First, let's take a look at the effect of this control:

 

 

First, you must create a custom control:

 

It must inherit the onapplytemplate () method (). The Code is as follows:

public override void OnApplyTemplate()    {      base.OnApplyTemplate();       Grid root = GetTemplateChild("LayoutRoot") as Grid;      root.DataContext = this;    }

 

We created a visual control grid and used the current control gaugecontrol as the datacontext of the grid.

Next, you need to customize several dependency attributes:

The displayed values, maximum, minimum, and qualitativeranges ).

 

For example, the value code:

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");
    }

 

Next, create an rsource file, add a style, and set a control template named layoutroot.

 

Next we will use expression blend to open the project and edit the control template.

First, add a grid and add a circle to the grid:

 

Use fill and stroke to set the circle display:

 

Add an itemcontrol to the circle. Because we need to use data binding to display small tag points, we need a viewmodel to provide data binding for these tag points:

 

For example:

 

 <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>

 

 

You need to bind minicks icks. It has the value provided by viewmodel.

Similarly, you can bind a large tag point:

 

Next we will create a pointer:

First, create a grid:

Then use the path element to create a diamond without adding the effect:

You can see this example to learn to use path to draw: http://www.c-sharpcorner.com/UploadFile/mahesh/PathInSL03252009005946AM/PathInSL.aspx

 

The last step is to add a shadow to make it cool:

 

Complete.

Some conversion functions are required for data conversion, such as converting colors to Brushes:

 

 

Cheers

Nic