Monday, May 3, 2010

Silverlight Datgrid control customization

This is a very good introduction to customization in Silverlight datagrid customization by Martin Mihaylov.
Basic customizations of the DataGrid.
Another interesting article is from Scott Morrison
Defining Silverlight DataGrid Columns at Runtime
The template information is put in the App.XAML file as a resource and then used by the Datagrid as a StaticResource. Example given below will color alternating rows with Bisque and NavajoWhite colors :
in App.Xaml file
<Application.Resources>
<Style x:Key="DataGridStyle"  TargetType="data:DataGrid">
<Setter Property="RowBackground" Value="Bisque" />
<Setter Property="AlternatingRowBackground" Value="NavajoWhite"/>
</Style>
</Application.Resources>
and in the Main.Xaml file
<data:DataGrid x:Name="DataGrid1" AutoGenerateColumns="False" Style="{StaticResource DataGridStyle}" >
Another web site which has an excellent color chart is
Web colors from Wikipedia.
This is a very trivial example but can be extended to various parts of the Datagrid for special effects including animation.
For example this header effect

will be produced by the code given below.
App.XAML
<Style x:Key="ImageHeaderStyle" TargetType="prim:DataGridColumnHeader" >
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template"  >
<Setter.Value >
<ControlTemplate TargetType="prim:DataGridColumnHeader"   >
<Canvas Width="100" Height="34" Background="BurlyWood">
<Border BorderThickness="5" BorderBrush="Black"
VerticalAlignment="Center"   >
<TextBlock Width="90" Height="24"  
Text="{TemplateBinding Content}" 
FontSize="16"  Foreground="Black" 
TextAlignment="Center
>
 
</TextBlock>
</Border>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

No comments:

Post a Comment