Silverlight Dashboard

I  have found a dashboard control from Microsoft expression website (created by infragistics.com) which  inspired me to create a  dashboard control.

Click here to watch live   |   Click here to Download

In this article I’m going to explain the types of controls used to create a interactive dashboard.

1. Grid based layout
2. Customer Master / Detail  list
3. Chart control
4. Bing Map control
5. Custom Splash screen

Grid based layout

A simple grid  layout with 2/2 row column.

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"/>
<RowDefinition Height="85"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>

Customer Master / Detail  list

For master detail scenario ListBox control is the right choice to build.. The control will list the customer name and location, once you click the detail link its going to take you to a popup window for more information.
<ListBox x:Name="lbCustomer" Style="{StaticResource ListBoxBackground}" SelectionChanged="CustomerChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel>
<TextBlock Text="{Binding Name}" Foreground="YellowGreen" FontSize="14" />
<HyperlinkButton Content="Detail" Foreground="DarkRed" Name="lnkDetailCustomer" Click="CustomerDetailClick" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Chart Controls

Bar Chart

<toolkit:Chart Style="{StaticResource ChartBackground}" Name="chartCoulumn" Width="490" Height="290">
<toolkit:Chart.Series>
<toolkit:ColumnSeries SelectionChanged="ColumnSeriesChanged" Name="chart1" Title="Sales" DependentValuePath="Profit"
IndependentValuePath="Month"
AnimationSequence="Simultaneous"
IsSelectionEnabled="True">
<toolkit:ColumnSeries.DataPointStyle>
<Style TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background" Value="YellowGreen"/>
<Setter Property="BorderBrush" Value="YellowGreen"/>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
</toolkit:ColumnSeries>
</toolkit:Chart.Series>
</toolkit:Chart>

Pie chart

<toolkit:Chart Style="{StaticResource ChartBackground}" x:Name="chartPie" VerticalAlignment="Top" Width="340" Height="290">
<toolkit:Chart.Series>
<toolkit:PieSeries Margin="0,0,0,0" Padding="0,0,0,0" IndependentValuePath="Month"
DependentValuePath="Profit" AnimationSequence="Simultaneous"/>
</toolkit:Chart.Series>
</toolkit:Chart>

Map

<bing:Map Width="600" Grid.Row="2" Margin="2,2,2,2" HorizontalAlignment="Center" VerticalAlignment="Stretch"
CredentialsProvider="<Replace your credential here" Name="map" LogoVisibility="Collapsed" Culture="en-US" >
</bing:Map>

Click here to watch live   |   Click here to Download

Hope this helps and If you have any comments, please feel free to write your feedback.
Thanks
Deepu