Comprar
Prueba gratis
Comprar

' Volver al blog

Enlace de datos en DataGrid de WPF en C#: 4 patrones que todo desarrollador debería conocer

El DataGrid integrado de WPF maneja el enlace simple lo suficientemente bien, pero la agrupación, el filtrado y las actualizaciones en tiempo real requieren una infraestructura seria. Esta guía muestra cuatro patrones de enlace que realmente funcionan en producción, con una demostración de Xceed DataGrid ejecutable en .NET 10.

Cada WPF DataGrid El proyecto comienza de la misma manera. Creas un modelo, enlazas una colección y las columnas aparecen automáticamente. Luego llegan los requisitos: agrupar filas por departamento, filtrar sobre la marcha, permitir a los usuarios editar celdas y que los cambios persistan. De repente, el simple enlace ya no es suficiente.

Esta guía recorre cuatro wpf datagrid enlace de datos patrones, desde lo básico hasta escenarios listos para producción. Cada ejemplo proviene de un proyecto de demostración funcional que puedes descargar y ejecutar hoy mismo. Usaremos Xceed DataGrid para WPF porque su DataGridCollectionView te ofrece agrupamiento, ordenamiento y filtrado sin tener que escribir una implementación personalizada de ICollectionView desde cero.

Lo que necesitas antes de empezar

Instala el paquete NuGet en cualquier proyecto WPF .NET 10 (o posterior):

<PackageReference Include="Xceed.Products.Wpf.DataGrid.Full"
                  Version="7.3.26166.7869" />

Luego, agregue el espacio de nombres XAML de Xceed a su ventana:

xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"

Eso es todo. Sin referencias a DLL manuales, sin archivo de licencia para dejar en una carpeta. Durante la prueba de 45 días, ni siquiera necesitas una clave.

Patrón 1: Vincular una ObservableCollection

Lo más común ejemplo de DataGrid de WPF Todo empieza aquí. Solo tienes que exponer una colección desde tu ventana o modelo de vista, y el DataGridControl toma automáticamente las propiedades como columnas.

El Modelo

public class Employee : INotifyPropertyChanged
{
    private string _firstName = string.Empty;
    private string _department = string.Empty;
    private decimal _salary;

    public string FirstName
    {
        get => _firstName;
        set { _firstName = value; OnPropertyChanged(nameof(FirstName)); }
    }

    public string Department
    {
        get => _department;
        set { _department = value; OnPropertyChanged(nameof(Department)); }
    }

    public decimal Salary
    {
        get => _salary;
        set { _salary = value; OnPropertyChanged(nameof(Salary)); }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string name) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

Implementar INotifyPropertyChanged es importante porque el WPF DataGrid necesita notificaciones de cambio de propiedad para actualizar las celdas cuando sus datos cambian. Sin él, las ediciones no se reflejarán en la interfaz de usuario.

El XAML

<xcdg:DataGridControl ItemsSource="{Binding Employees}">
    <xcdg:DataGridControl.View>
        <xcdg:TableflowView>
            <xcdg:TableflowView.Theme>
                <tp5:Windows10Theme />
            </xcdg:TableflowView.Theme>
        </xcdg:TableflowView>
    </xcdg:DataGridControl.View>
    <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="FirstName" Title="First Name" />
        <xcdg:Column FieldName="LastName" Title="Last Name" />
        <xcdg:Column FieldName="Department" Title="Department" />
        <xcdg:Column FieldName="Title" Title="Title" />
        <xcdg:Column FieldName="Salary" Title="Salary" />
    </xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>

Observa que Xceed utiliza DataGridControl en lugar del DataGrid integrado. El enlace ItemsSource funciona de manera idéntica, pero obtienes TableFlowView con desplazamiento fluido y un sistema de temas listo para usar. Si omites por completo la definición de columnas, la cuadrícula genera automáticamente columnas a partir de las propiedades de tu modelo, lo cual es útil para la creación rápida de prototipos.

WPF DataGrid binding example showing employee data in Xceed DataGridControl with TableflowView

Patrón 2: Agrupar y ordenar con DataGridCollectionViewSource

La vinculación de ObservableCollection sin procesar se queda corta en el momento en que necesitas agrupaciones u ordenamientos integrados en la vista. El enfoque integrado de WPF requiere CollectionViewSource más plantillas personalizadas de GroupStyle, una gran cantidad de XAML para un requisito común. DataGridCollectionViewSource de Xceed maneja esto declarativamente.

El XAML

<Window.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="GroupedEmployees"
        Source="{Binding Employees}">
        <xcdg:DataGridCollectionViewSource.GroupDescriptions>
            <xcdg:DataGridGroupDescription PropertyName="Department" />
        </xcdg:DataGridCollectionViewSource.GroupDescriptions>
        <xcdg:DataGridCollectionViewSource.SortDescriptions>
            <scm:SortDescription PropertyName="LastName"
                                 Direction="Ascending" />
        </xcdg:DataGridCollectionViewSource.SortDescriptions>
    </xcdg:DataGridCollectionViewSource>
</Window.Resources>

<xcdg:DataGridControl
    ItemsSource="{Binding Source={StaticResource GroupedEmployees}}">
    <xcdg:DataGridControl.View>
        <xcdg:TableflowView IsAlternatingRowStyleEnabled="True">
            <xcdg:TableflowView.Theme>
                <tp5:Windows10Theme />
            </xcdg:TableflowView.Theme>
        </xcdg:TableflowView>
    </xcdg:DataGridControl.View>
</xcdg:DataGridControl>

Agrega el espacio de nombres scm para SortDescription: xmlns:scm=”clr-namespace:System.ComponentModel;assembly=WindowsBase”.

Con solo tres líneas de XAML puedes obtener filas agrupadas con encabezados que se pueden contraer, ordenadas alfabéticamente dentro de cada grupo. En cambio, la función integrada WPF DataGrid requiere una plantilla GroupStyle, un control de expansión y un estilo manual para lograr el mismo resultado. DataGridGroupDescription también admite la agrupación multinivel; solo agregue más descripciones a la colección.

WPF DataGrid grouped and sorted by department using DataGridCollectionViewSource

Patrón 3: Edición en tiempo real con ObservableCollection

Las aplicaciones reales necesitan que los usuarios agreguen, editen y eliminen filas mientras la cuadrícula se mantiene sincronizada. Dado que ObservableCollection genera eventos CollectionChanged, la WPF DataGrid se actualiza automáticamente cuando los artículos entran y salen. Aquí tienes el wpf datagrid enlace de datos patrón que admite CRUD completo.

El Código Subyacente

public ObservableCollection<Employee> Employees { get; }

public MainWindow()
{
    InitializeComponent();
    DataContext = this;
    Employees = SampleData.GetEmployees();
}

private void AddEmployee_Click(object sender, RoutedEventArgs e)
{
    Employees.Add(new Employee
    {
        FirstName = "New",
        LastName = "Employee",
        Department = "Engineering",
        Title = "Developer",
        HireDate = DateTime.Today,
        Salary = 80000m
    });
}

private void RemoveEmployee_Click(object sender, RoutedEventArgs e)
{
    if (editableGrid.SelectedItem is Employee emp)
        Employees.Remove(emp);
}

El XAML

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="8">
        <Button Content="Add Employee" Click="AddEmployee_Click"
                Padding="12,6" Margin="0,0,8,0" />
        <Button Content="Remove Selected" Click="RemoveEmployee_Click"
                Padding="12,6" />
    </StackPanel>
    <xcdg:DataGridControl x:Name="editableGrid"
                          ItemsSource="{Binding Employees}">
        <xcdg:DataGridControl.View>
            <xcdg:TableflowView IsAlternatingRowStyleEnabled="True">
                <xcdg:TableflowView.Theme>
                    <tp5:Windows10Theme />
                </xcdg:TableflowView.Theme>
            </xcdg:TableflowView>
        </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
</DockPanel>

Haz clic en “Agregar empleado” y aparece una nueva fila en la parte inferior. Selecciona una fila y haz clic en “Eliminar seleccionado”, la fila desaparece al instante. También puedes hacer doble clic en cualquier celda para editarla en el lugar. Dado que Empleado implementa INotifyPropertyChanged, cada edición de celda se propaga inmediatamente al objeto subyacente. Esto es lo mismo wpf datagrid enlace de datos patrón que usarías en una arquitectura MVVM: simplemente mueve la colección y los comandos a un view model.

Patrón 4: Filtrar datos con DataGridCollectionView en código

El filtrado es donde el DataGrid integrado de WPF te pone en una situación complicada. O bien usas CollectionViewSource.Filter con una función de retorno de predicado, o bien reconstruyes toda la colección. DataGridCollectionView de Xceed ofrece un enfoque más sencillo a través de los objetos FilterCriterion.

La configuración

private DataGridCollectionView? _filteredView;

private void SetupFilteredGrid()
{
    _filteredView = new DataGridCollectionView(Employees);
    filteredGrid.ItemsSource = _filteredView;
}

Aplicando un filtro

private void FilterCombo_Changed(object sender, SelectionChangedEventArgs e)
{
    if (_filteredView == null)
        return;

    string dept = /* selected department from ComboBox */;
    _filteredView.FilterCriteriaMode = FilterCriteriaMode.And;
    _filteredView.ItemProperties["Department"].FilterCriterion = null;

    if (dept != "All")
    {
        _filteredView.ItemProperties["Department"].FilterCriterion =
            new EqualToFilterCriterion(dept);
    }
}

Establece el criterio en nulo y todas las filas reaparecen. Establécelo en un valor específico y la cuadrícula se filtra al instante. Puedes combinar varios objetos FilterCriterion en diferentes columnas: usa FilterCriteriaMode.And para exigir que todos los criterios coincidan, o la lógica de coincidencia de FilterCriteriaMode.Or para cualquier coincidencia. WPF DataGrid La función integrada en .NET no tiene nada comparable sin tener que escribir lógica de predicados personalizada.

EqualToFilterCriterion es una de varias opciones integradas. Xceed también ofrece GreaterThanFilterCriterion, ContainsFilterCriterion y otras en el espacio de nombres Xceed.Wpf.DataGrid.FilterCriteria. Para requisitos complejos, puede crear filtros compuestos con AndFilterCriterion y OrFilterCriterion.

WPF DataGrid filtered by department using DataGridCollectionView

¿Qué patrón deberías usar?

La elección correcta depende de tus necesidades. Sin embargo, la mayoría de las aplicaciones de producción combinan varios de estos patrones.

Escenario Patrón Por qué
Lista simple de solo lectura Patrón 1 — ObservableCollection Configuración mínima, columnas generadas automáticamente
Informes agrupados Patrón 2 — DataGridCollectionViewSource Agrupación y ordenación declarativas en XAML
Pantallas CRUD Patrón 3 — Edición en vivo Two-way binding with add/remove support
Search or filter UI Pattern 4 — FilterCriterion Type-safe filtering without custom predicates
All of the above Combine patterns 2 + 3 + 4 DataGridCollectionView supports all three simultaneously

For a quick prototype, Pattern 1 gets you running in under a minute — it’s the simplest ejemplo de DataGrid de WPF to copy and adapt. For anything destined for production, start with DataGridCollectionView (Pattern 4) because you can always layer grouping and sorting on top later.

Why Not Just Use the Built-In DataGrid?

The standard WPF DataGrid that ships with .NET works for basic tables. Nevertheless, it hasn’t received a feature update since 2010. Here’s where Xceed pulls ahead specifically for binding scenarios:

  • DataGridCollectionView replaces the clunky ICollectionView pattern with purpose-built grouping, sorting, and filtering
  • Container recycling keeps memory flat even when binding collections with millions of rows
  • Desplazamiento suave through TableflowView makes large bound datasets feel responsive
  • 18 built-in themes eliminate the need for custom DataGrid styling
  • Master-detail binding works through DataRelation objects — no manual templates required

The built-in DataGrid can technically do grouping and filtering, but you’ll write significantly more boilerplate code. Xceed wraps these patterns into a cohesive API that works consistently across all four patterns shown above.

Get the Demo Project

The complete XceedDataGridBindingDemo project includes all four patterns in a tabbed interface. Clone the repo, restore NuGet packages, and run it on .NET 10:

<PackageReference Include="Xceed.Products.Wpf.DataGrid.Full"
                  Version="7.3.26166.7869" />

Every XAML and C# snippet in this article comes directly from that demo. Insert your license key in App.xaml.cs before running — or use the 45-day trial with no key at all.

Try Xceed DataGrid for WPF

Bind, group, filter, and edit millions of rows with smooth scrolling and 18 built-in themes. One NuGet package, zero custom plumbing.

Descargar prueba gratuita Ver en NuGet

¿Sigue usándose el DataGrid de WPF en 2026?

Yes — WPF ships with every .NET release including .NET 10, and Microsoft uses Xceed’s WPF DataGrid in Visual Studio itself. WPF remains the standard for data-heavy desktop apps on Windows, especially in finance, healthcare, and manufacturing.

En WPF, la principal diferencia entre `DataGrid` y `DataGridControl` radica en su origen y propósito. * **`DataGrid`:** Este es el control de tabla de datos moderno y preferido en WPF. Se encuentra en el ensamblado `PresentationFramework.dll` y es parte de las clases principales de UI de WPF. `DataGrid` es más flexible, extensible y ofrece más características integradas para la presentación y manipulación de datos en formato de tabla. Incluye funcionalidades como agrupación, filtrado, ordenación (generalmente a través de enlazar datos a colecciones que lo soporten), edición en línea, nuevos elementos, etc. Es el control que prácticamente siempre querrás usar hoy en día para mostrar datos tabulares. * **`DataGridControl`:** Este es un control más antiguo y menos común. Se encuentra en el ensamblado `System.Windows.Controls.Data.dll` (que es parte de la tecnología de ADO.NET Data Services utilizada en versiones anteriores y con tecnologías como Silverlight). Su propósito era similar, pero `DataGrid` ha suplantado a `DataGridControl` en la mayoría de los escenarios de WPF debido a su arquitectura más moderna y a su mayor conjunto de características. Generalmente, si te encuentras con `DataGridControl`, es probable que sea en proyectos más antiguos o si estás trabajando con una dependencia específica que aún lo utiliza. En resumen, **`DataGrid` es la implementación moderna y más completa para mostrar datos tabulares en WPF, mientras que `DataGridControl` es una versión anterior y menos utilizada**. Deberías usar `DataGrid` a menos que tengas una razón muy específica para usar `DataGridControl`.

DataGrid is the built-in control from Microsoft, included in the System.Windows.Controls namespace. DataGridControl is Xceed’s replacement, offering TableflowView, built-in grouping, smooth scrolling, and 18 themes. Both support wpf datagrid enlace de datos to collections, but DataGridControl provides a richer API for production use.

¿Cómo enlazo un DataGrid de WPF a una lista de objetos?

Set the ItemsSource property to any IEnumerable, ideally an ObservableCollection. For the best experience, implement INotifyPropertyChanged on your model class so cell edits update automatically. This ejemplo de DataGrid de WPF pattern works identically with both the built-in DataGrid and Xceed’s DataGridControl.

¿Puedo agrupar y filtrar un DataGrid de WPF sin código subyacente?

Con Xceed, sí. Usa DataGridCollectionViewSource en los recursos de tu XAML y añade entradas DataGridGroupDescription para agrupar. La ordenación funciona a través de objetos SortDescription estándar. El filtrado requiere una pequeña cantidad de código detrás o lógica de vista de modelo, ya que los criterios de filtro dependen de los valores en tiempo de ejecución.

¿Cómo manejar millones de filas en un DataGrid de WPF?

El integrado WPF DataGrid struggles beyond 100,000 rows due to limited virtualization. Xceed DataGrid provides UI virtualization with container recycling, asynchronous data virtualization, and column virtualization — handling millions of rows without memory spikes. Bind your large dataset normally and the grid manages paging internally.

¿Xceed DataGrid funciona con MVVM?

Absolutely. Expose your ObservableCollection and DataGridCollectionView from a view model, bind ItemsSource in XAML, and use ICommand for add/remove operations. Every wpf datagrid enlace de datos pattern shown in this article translates directly to MVVM — just replace the code-behind event handlers with commands.

Echa un vistazo a la biblioteca de palabras y PDF de Xceed paquete