Building a DataGrid with Custom Columns in Silverlight 4.0

I thought it would be fun to build a DataGrid tha contains a list of starting hads in poker. If you have ever watched poker on TV, you most likely heard the players refer to things like "pocket rockets" and "cowboys". These are smply nicknames they have given to starting hands.

1. Create a new silverlight called DataGridCustomColumns in VS 2010. And all VS to create a web project to host your application.

2. After the project is loaded, right-click the DataGridCustomColumns project and select add new item. In the add new item dialog box, select Code File for template, and name the class StartingHands.cs.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace SilverlightApplication1
{
    public class StartingHands
    {
        public string Nickname { get; set; }
        public string Notes { get; set; }
        public string Card1 { get; set; }
        public string Card2 { get; set; }

        public static ObservableCollection<StartingHands> GetHands()
        {
            ObservableCollection<StartingHands> hands = new ObservableCollection<StartingHands>();
            hands.Add(new StartingHands(){Nickname="Big Slick", Notes="Also refered to as Anna Kournikova." ,Card1="As",Card2="Ks"});
            hands.Add(
                    new StartingHands()
                    {
                        Nickname = "Pocket Rockets",
                        Notes = "Also refered to as BUllets.",
                        Card1 = "As",
                        Card2 = "Ks"
                    }
                );
            hands.Add(
                    new StartingHands()
                    {
                        Nickname = "BlackJack",
                        Notes = "The casino game blackjack.",
                        Card1 = "As",
                        Card2 = "Js"
                    }
                );
            hands.Add(
                    new StartingHands()
                    {
                        Nickname = "Cowboys",
                        Notes = "Also refered to as King Kong.",
                        Card1 = "As",
                        Card2 = "Kd"
                    }
                );
            hands.Add(
                    new StartingHands()
                    {
                        Nickname = "Doyle Brunson",
                        Notes = "Named after poker great Doyle Brunson.",
                        Card1 = "Ts",
                        Card2 = "2s"
                    }
                );
            return hands;
        }
    }
}

4. Now that the class is built, in the mainpage.xaml file, change the width of the UserControl to be 500 and add a DataGrid named grdData to the root Grid by double-clicking the DataGrid control in the Toolbox. Add a 15-pixel margin around the DataGrid for some spacing, and set the AutoGenerateColumns property to False. The colde Follows:

<Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">

</Grid>

5. Next, define the columns in the DataGrid. To do this, add the DataGrid.Columns collection, as follows:

<Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">

　　　　　　<sdk:DataGrid.Columns>                
            　　</sdk:DataGrid.Columns>
        </sdk:DataGrid>

</sdk:DataGrid.Columns>

Define the first column in Grid contains the two cards in the hand. To build this, you use DataGridTemplateColumn. Within the DataGridTemplateColumn, add the CellTemplate containing a Grid with two columns, each containing a Border, Rectanble, and TextBlock, which will overladp each other. Binding the Two TextBlock controls to the Card1 and card2 properties from the data Source. Enter the following code:

<sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn Header="Hand">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Border Margin="2" CornerRadius="4" BorderBrush="Black" BorderThickness="1" />
                                <Rectangle Margin="4" Fill="White" Grid.Column="0" />
                                <Border Margin="2" CornerRadius="4" BorderBrush="Black" BorderThickness="1" Grid.Column="1" />
                                <Rectangle Margin="4" Fill="White" Grid.Column="1"  />
                                <TextBlock Text="{Binding Card1}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" />
                                <TextBlock Text="{Binding Card2}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" />
                            </Grid>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTextColumn Header="NickName" Binding="{Binding Nickname}" />
                <sdk:DataGridTextColumn Header="Notes" Binding="{Binding Notes}" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>