This article is currently in the process of being translated into Spanish (~27% done).

El control DataGrid:

Columnas del DataGrid

En el capítulo anterior, echamos un vistazo a la facilidad con la que puedes poner en marcha un DataGrid en WPF Una de las razones por las que fue fácil es el hecho de que el DataGrid generará automáticamente las columnas apropiadas para usted, basándose en el origen de datos que utilice..

Sin embargo, en algunas situaciones, es posible que desee definir manualmente las columnas que se muestran, ya sea porque no desea todas las propiedades o columnas de la fuente de datos, o porque quiere tener el control de qué editores en línea se utilizan.

Manually defined columns

Let's try an example that looks a lot like the one in the previous chapter, but where we define all the columns manually, for maximum control. You can select the column type based on the data that you wish to display/edit. As of writing, the following column types are available:

  • DataGridTextColumn
  • DataGridCheckBoxColumn
  • DataGridComboBoxColumn
  • DataGridHyperlinkColumn
  • DataGridTemplateColumn

Especially the last one, the DataGridTemplateColumn, is interesting. It allows you to define any kind of content, which opens up the opportunity to use custom controls, either from the WPF library or even your own or 3rd party controls. Here's an example:

<Window x:Class="WpfTutorialSamples.DataGrid_control.DataGridColumnsSample"
        Title="DataGridColumnsSample" Height="200" Width="300">
    <Grid Margin="10">
		<DataGrid Name="dgUsers" AutoGenerateColumns="False">

				<DataGridTextColumn Header="Name" Binding="{Binding Name}" />

				<DataGridTemplateColumn Header="Birthday">
							<DatePicker SelectedDate="{Binding Birthday}" BorderThickness="0" />

using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.DataGrid_control
	public partial class DataGridColumnsSample : Window
		public DataGridColumnsSample()

			List<User> users = new List<User>();
			users.Add(new User() { Id = 1, Name = "John Doe", Birthday = new DateTime(1971, 7, 23) });
			users.Add(new User() { Id = 2, Name = "Jane Doe", Birthday = new DateTime(1974, 1, 17) });
			users.Add(new User() { Id = 3, Name = "Sammy Doe", Birthday = new DateTime(1991, 9, 2) });

			dgUsers.ItemsSource = users;

	public class User
		public int Id { get; set; }

		public string Name { get; set; }

		public DateTime Birthday { get; set; }

In the markup, I have added the AutoGenerateColumns property on the DataGrid, which I have set to false, to get control of the columns used. As you can see, I have left out the ID column, as I decided that I didn't care for it for this example. For the Name property, I've used a simple text based column, so the most interesting part of this example comes with the Birthday column, where I've used a DataGridTemplateColumn with a DatePicker control inside of it. This allows the end-user to pick the date from a calendar, instead of having to manually enter it, as you can see on the screenshot.


By turning off automatically generated columns using the AutoGenerateColumns property, you get full control of which columns are shown and how their data should be viewed and edited. As seen by the example of this article, this opens up for some pretty interesting possibilities, where you can completely customize the editor and thereby enhance the end-user experience.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!