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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步