DataGrid is one of the most important control when it comes to displaying tabular kind of data. We all implement rendering of such data in some of table format. Developers who has been using ASP.Net are very familiar with controls like
DataGrid and
GridView.
Good news is that there is equivalent
DataGrid control for Silverlight as well. And for most part
it is used the same way as you do in ASP.Net but with different syntax and different way of customizing
display of it. In this post I am going to show a very plain and simple use of
DataGrid control
in
Silverlight and then in subsequent posts I will build on top of this post to show some more
advanced uses of
DataGrid control.
Silverlight Tool Kit
You may already know this and already has it on your development machine, but I will mention it for
sake of completness. You are going to need
Silverlight Toolkit to
use DataGrid. Yes, the control is not part of core Silverlight. Microsoft has
developed it as part of the tool kit that has lot of usefull controls. You can read more about this
tool kit and controls on the site. For now, down the toolkit and install it on your machine.
Reference assemblies
In your Silverlight project, you will need to add reference to System.Windows.Controls.Data
assembly. This is the assembly where DataGrid control is defined. Now you can include DataGrid control
on your XAML file. If you tried to add mark up like below on your page, you are going to get error telling you
that DataGrid is not recoganized.
<DataGrid x:Name="MyGrid" />
You have to treat DataGrid control like a UserControl in ASP.Net where you have to specify
a tag prefix and assembly on top of your page to indicate use of that control. In Silverllight you do this
my including xml namespace tag for that silverlight control. In my case I have the following
xmlns entry on my XAML file.
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
This tells the application that I am going to use prefix data for the controls
that are present in assembly System.Windows.Controls.Data. Based on this you can
now add the following like of mark up on XAML file to include DataGrid on your page.
<data:DataGrid
x:Name="CommentsGrid"
Height="300"
AutoGenerateColumns="True"
IsReadOnly="True">
</data:Grid>
Attach To Data Source
Now that we have included DataGrid control on the page, we need to attach it to some
data source to show some results. Very much like ASP.Net, you will attach an enumeration to this
control. The difference is that here it is done through property name ItemSource.
Following line of code shows how it is done for silverlight DataGrid control.
List<Comment> unmoderatedComments = new List<Comment>();
void BindGrid()
{
CommentsGrid.ItemsSource = unmoderatedComments;
}
As you can see that DataGrid is bound to a List of Comment objects. So far so good, very much
like your ASP.Net DataGrid or GridView.
Columns to Display
In the mark of DataGrid above, I have explcitly set AutoGenerateColumn property to
true. This actually is default value. What this means is that when DataGrid is bound to the
collection, it will generate column for each data field or property for the objects in the collection
and display them. Thsi is same behavior you see in ASP.Net data grid.
Explcitly specifying Columns
When you are dealing with some real application most of the time you control the columns
you want to display and how you want to display them. Silverlight DataGrid does allow you to
do so. Fisrt, you will set AutoGenerateColumns property to false. Following
mark up shows how you will specify the columns that you want to display.
<data:DataGrid x:Name="CommentsGrid" Height="300"
AutoGenerateColumns="False" IsReadOnly="True">
<data:DataGrid.CellStyle>
<Style TargetType="data:DataGridCell">
<Setter Property="VerticalAlignment" Value="Top"></Setter>
</Style>
</data:DataGrid.CellStyle>
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Comment Date"
Binding="{Binding CommentDate}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="Comment Text" Binding="{Binding Text}">
<data:DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</data:DataGridTextColumn.ElementStyle>
</data:DataGridTextColumn>
<data:DataGridTemplateColumn>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button x:Name="ApprovedButton" Content="Approved"
Click="ApprovedButton_Click" Height="30" Margin="3"></Button>
<Button x:Name="DeleteButton" Content="Delete"
Click="DeleteButton_Click" Height="30" Margin="3"></Button>
<Button x:Name="SpamButton" Content="Mark Spam"
Click="SpamButton_Click" Height="30" Margin="3"></Button>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
You will need to add Columns section under your DataGrid control definition
and then specify each column that you would want to display. And to bind the column to
particular property or field, you will use Binding property. For this post
I am going to keep the dicussion to simple binding of the column to property of the
object. I will discuss more advanced use in subsequent posts. You can see it is
very similar to how you are used to doing things in ASP.Net.
And to accomodate more customized view of the column, you will use DataGridTemplateColumn
where you can layout the template of the view of that column. This is also
similar to template column in ASP.Net.
More...
For this post I am going to leave this discussion to this simple display of data. I will be discussing more
about use of Silverlight DataGrid in subsequent posts. This post should get you started with use of
it now.
Subscribe
