WPF DataGrid control is available in Toolbox in Visual Studio 2010. If you are using Visual Studio 2008, you must first install .NET Framework 3.5 and then download WPF Toolkit and install it and add reference to the assembly.
- Install the .NET Framework 3.5 SP1.
- Download the WPF Toolkit - either source or binaries (the toolkit is entirely open source).
- Run WPFToolkit.msi to install the WPFToolkit.dll and the WPF Toolkit design-time binaries to your Program Files folder.
- Reference the WPFToolkit.dll in your project.
Create a Windows application in WPF add this code:
<ScrollViewer VerticalScrollBarVisibility="Auto" BorderThickness="0">
<StackPanel Margin="10,10,10,10">
<TextBlock Text="DataGrid Demonstration" Margin="0,20,10,20"
FontFamily="Verdana" FontSize="18" FontWeight="Bold"
Foreground="#FF5C9AC9" />
<TextBlock Text="DataGrid with autogenerated columns:"/>
<data:DataGrid x:Name="dataGrid1"
Height="140" Margin="0,5,0,10"
AutoGenerateColumns="True" />
<TextBlock Text="DataGrid with row details sections:"/>
<data:DataGrid x:Name="dataGrid3"
Height="140" Margin="0,5,0,10"
RowDetailsVisibilityMode="VisibleWhenSelected" >
<data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="Address: " />
<TextBlock FontSize="12" Text="{Binding Address}"/>
</StackPanel>
</DataTemplate>
</data:DataGrid.RowDetailsTemplate>
</data:DataGrid>
<TextBlock Text="DataGrid with configured columns:"/>
<data:DataGrid x:Name="dataGrid4"
Height="160" Margin="0,5,0,10"
RowHeight="40" AutoGenerateColumns="False" >
<data:DataGrid.Columns>
<data:DataGridTextColumn
Header="First Name"
Width="SizeToHeader"
Binding="{Binding FirstName}"
FontSize="20" />
<data:DataGridTextColumn
Header="Last Name"
Width="SizeToCells"
Binding="{Binding LastName}"
FontSize="20" />
<data:DataGridTextColumn
Header="Address"
Width="150"
Binding="{Binding Address}" >
<data:DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</data:DataGridTextColumn.ElementStyle>
<data:DataGridTextColumn.EditingElementStyle>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Blue"/>
</Style>
</data:DataGridTextColumn.EditingElementStyle>
</data:DataGridTextColumn>
<data:DataGridCheckBoxColumn
Header="New?"
Width="40"
Binding="{Binding IsNew}" />
<data:DataGridCheckBoxColumn
Header="Subscribed?"
Width="Auto"
Binding="{Binding IsSubscribed}"
IsThreeState="True" />
</data:DataGrid.Columns>
</data:DataGrid>
<TextBlock Text="DataGrid with template column and custom alternating row backgrounds:"/>
<data:DataGrid x:Name="dataGrid5"
Height="125" Margin="0,5,0,10"
AutoGenerateColumns="False"
RowBackground="Azure"
AlternatingRowBackground="LightSteelBlue">
<data:DataGrid.Columns>
<!-- Name Column -->
<data:DataGridTemplateColumn Header="Name">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="5,0,5,0"
Text="{Binding FirstName}"/>
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
<data:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Padding="5,0,5,0"
Text="{Binding FirstName}"/>
<TextBox Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>
<!-- Address Column -->
<data:DataGridTextColumn
Header="Address" Width="300"
Binding="{Binding Address}" />
</data:DataGrid.Columns>
</data:DataGrid>
</StackPanel>
</ScrollViewer>
Here is code behind look like:
using System;
using System.Collections.Generic;
using System.Windows.Controls;
namespace DataGridSnippets
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
// Set the ItemsSource to autogenerate the columns.
dataGrid1.ItemsSource = Customer.GetSampleCustomerList();
dataGrid3.ItemsSource = Customer.GetSampleCustomerList();
dataGrid4.ItemsSource = Customer.GetSampleCustomerList();
dataGrid5.ItemsSource = Customer.GetSampleCustomerList();
}
}
public class Customer
{
public String FirstName { get; set; }
public String LastName { get; set; }
public String Address { get; set; }
public Boolean IsNew { get; set; }
// A null value for IsSubscribed can indicate
// "no preference" or "no response".
public Boolean? IsSubscribed { get; set; }
public Customer(String firstName, String lastName,
String address, Boolean isNew, Boolean? isSubscribed)
{
this.FirstName = firstName;
this.LastName = lastName;
this.Address = address;
this.IsNew = isNew;
this.IsSubscribed = isSubscribed;
}
public static List<Customer> GetSampleCustomerList()
{
return new List<Customer>(new Customer[4] {
new Customer("A.", "Zero",
"12 North Third Street, Apartment 45",
false, true),
new Customer("B.", "One",
"34 West Fifth Street, Apartment 67",
false, false),
new Customer("C.", "Two",
"56 East Seventh Street, Apartment 89",
true, null),
new Customer("D.", "Three",
"78 South Ninth Street, Apartment 10",
true, true)
});
}
}
}