Tutorial: Crear un enlace de datos mediante WPF Designer

Artículo
08/10/2011

En este tutorial se muestra cómo usar WPF Designer for Visual Studio para crear enlaces de datos que conectan los datos a un control.

En este tutorial realizará las siguientes tareas:

Crear el proyecto.
Crear una clase Student y una colección StudentList.
Crear un control ListBox que muestra la colección StudentList a través de un enlace de datos.
Crear un objeto DataTemplate personalizado que usa un IValueConverter para personalizar la apariencia de una propiedad Boolean.

Cuando haya terminado, tendrá un cuadro de lista que se enlaza a una lista de estudiantes. Para cada uno de los elementos de dicho cuadro, se muestra un cuadrado coloreado que indica si el estudiante está inscrito actualmente.

Nota

Para enlazar a los datos de una conexión de datos, use la ventana Orígenes de datos. Para obtener más información, vea Enlazar controles WPF a datos en Visual Studio.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Visual Studio 2010.

Crear el proyecto

El primer paso consiste en crear el proyecto de aplicación WPF y agregar el origen de datos. El origen de datos es un objeto ObservableCollection<T> que contiene instancias de una clase Student simple. El proyecto también tiene un objeto IValueConverter y un objeto DataTemplate personalizado para aplicar estilo al control ListBox.

Para crear el proyecto

Cree un nuevo proyecto de aplicación WPF en Visual Basic o en Visual C# denominado DataBindingDemo. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

MainWindow.xaml se abre en WPF Designer.
Agregue al proyecto una nueva clase denominada Student. Para obtener más información, vea Cómo: Agregar nuevos elementos de proyecto.

Reemplace el código generado automáticamente por el código siguiente.

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

' Student is a simple class that stores a name and an 
' IsEnrolled value. 
Public Class Student

    ' The default constructor is required for creation from XAML. 
    Public Sub New()
    End Sub

    ' The StudentName property is a string that holds the first and last name. 
    Public Property StudentName As String

    ' The IsEnrolled property gets or sets a value indicating whether 
    ' the student is currently enrolled. 
    Public Property IsEnrolled As Boolean

End Class

' The StudentList collection is declared for convenience, 
' because declaring generic types in XAML is inconvenient. 
Public Class StudentList
    Inherits ObservableCollection(Of Student)
End Class

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataBindingDemo
{
    // Student is a simple class that stores a name and an
    // IsEnrolled value.
    public class Student 
    {   
        // The default constructor is required for creation from XAML.
        public Student()
        {
        }

        // The StudentName property is a string that holds the first and last name.
        public string StudentName { get; set; }

        // The IsEnrolled property gets or sets a value indicating whether
        // the student is currently enrolled.
        public bool IsEnrolled { get; set; }
    }

    // The StudentList collection is declared for convenience,
    // because declaring generic types in XAML is inconvenient.
    public class StudentList : ObservableCollection<Student>
    {

    }
}

Agregue al proyecto una nueva clase denominada BoolToBrushConverter.

Reemplace el código generado automáticamente por el código siguiente.

Imports System
Imports System.Globalization
Imports System.Windows.Data
Imports System.Windows.Media

' The BoolToBrushConverter class is a value converter 
' that helps to bind a bool value to a brush property. 
<ValueConversion(GetType(Boolean), GetType(Brush))> _
Public Class BoolToBrushConverter
    Implements IValueConverter

    Public Function Convert( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert

        Dim b As Brush = Nothing

        ' Only apply the conversion if value is assigned and 
        ' is of type bool. 
        If value IsNot Nothing AndAlso value.[GetType]() Is GetType(Boolean) Then
            ' true is painted with a green brush, 
            ' false with a red brush. 
            b = If(CBool(value), Brushes.Green, Brushes.Red)
        End If

        Return b
    End Function

    ' Not used. 
    Public Function ConvertBack( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
        Return Nothing
    End Function

End Class

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;

namespace DataBindingDemo
{
    // The BoolToBrushConverter class is a value converter
    // that helps to bind a bool value to a brush property.
    [ValueConversion(typeof(bool), typeof(Brush))]
    public class BoolToBrushConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            Brush b = null;

            // Only apply the conversion if value is assigned and
            // is of type bool.
            if (value != null &&
                value.GetType() == typeof(bool))
            {
                // true is painted with a green brush, 
                // false with a red brush.
                b = (bool)value ? Brushes.Green : Brushes.Red;
            }

            return b;
        }

        // Not used.
        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            return null;
        }
    }
}

Compile el proyecto.
Abra MainWindow.xaml en WPF Designer.

Reemplace el XAML generado automáticamente por el siguiente XAML.

    <Window x:Class="DataBindingDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingDemo"
        Title="Databinding Demo" Height="300" Width="300">
    <Window.Resources>

        <local:StudentList x:Key="studentCollection" >
            <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
            <local:Student StudentName="Lori Kane" IsEnrolled="true" />
            <local:Student StudentName="Steve Masters" IsEnrolled="false" />
            <local:Student StudentName="Tai Yee" IsEnrolled="true" />
            <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        </local:StudentList>

        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />

        <DataTemplate x:Key="listBoxTemplate">
            <StackPanel Orientation="Horizontal" >
                <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                           Height="10" 
                           Width="10" 
                           Margin="0,0,5,0" />
                <TextBlock Text="{Binding Path=StudentName}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid></Grid>

</Window>

Asignar un enlace de datos

Use el objeto Binding para mostrar el elemento studentCollection en el control ListBox. WPF Designer habilita el enlace de datos sin escribir código o XAML.

Para enlazar el control ListBox al origen de datos

Desde el Cuadro de herramientas, arrastre un control ListBox hasta Window.
En la ventana Propiedades, desplácese a la propiedad ItemsSource.
En el borde de la columna izquierda, haga clic en el marcador de propiedad ().

Aparece un menú.

Sugerencia

También puede hacer clic con el botón secundario en la fila para mostrar el menú.
Haga clic en Aplicar enlace de datos.

Aparece el generador de enlace de datos.
En el recuadro Origen, en el panel izquierdo, haga clic en StaticResource.
En el panel intermedio, haga clic en Window.Resources.
En el panel derecho, haga clic en studentCollection.

El control ListBox se rellena con elementos.
En la ventana Propiedades, desplácese a la propiedad DisplayMemberPath y establezca su valor en StudentName.

El control ListBox muestra la propiedad StudentName para cada instancia de Student en studentCollection.

Sugerencia
También puede hacer clic con el botón secundario en la fila para mostrar el menú.

Crear un enlace de datos con un convertidor de valores

Cree un objeto DataTemplate para dar formato a los datos en el control ListBox. En este proyecto, DataTemplate usa un convertidor de valores para mostrar una propiedad Boolean como un cuadrado coloreado.

Para crear un enlace de datos con un convertidor de valores

En la ventana Propiedades, borre la propiedad DisplayMemberPath.
Desplácese hasta la propiedad ItemTemplate.
Haga clic en el marcador de propiedad ().
Haga clic en Aplicar recurso.

Aparecerá el selector de recursos.
En la sección Local, haga clic en listBoxTemplate.

El control ListBox muestra junto al nombre de cada uno de los estudiantes un cuadrado rojo o verde que indica si el estudiante se ha inscrito.

Pasos siguientes

Para establecer las propiedades de los enlaces de datos, se puede usar el generador de enlaces de datos. Para obtener más información, vea Cómo: Establecer propiedades de enlace de datos con WPF Designer.

Vea también

Compartir a través de