Para ver el artículo en inglés, active la casilla Inglés. También puede ver el texto en inglés en una ventana emergente si pasa el puntero del mouse por el texto.
Traducción
Inglés

Tutorial: Crear un enlace de datos mediante WPF Designer

Visual Studio 2010

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.

NotaNota

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.

NotaNota

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.

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

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

  1. 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.

  2. Agregue al proyecto una nueva clase denominada Student. Para obtener más información, vea Cómo: Agregar nuevos elementos de proyecto.

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

    
    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>
        {
    
        }
    }
    
    
    
  4. Agregue al proyecto una nueva clase denominada BoolToBrushConverter.

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

    
    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;
            }
        }
    }
    
    
    
  6. Compile el proyecto.

  7. Abra MainWindow.xaml en WPF Designer.

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

    
        <Window x:Class="DataBindingDemo.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://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>
    
    
    

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

  1. Desde el Cuadro de herramientas, arrastre un control ListBox hasta Window.

  2. En la ventana Propiedades, desplácese a la propiedad ItemsSource.

  3. En el borde de la columna izquierda, haga clic en el marcador de propiedad (marcador de propiedad).

    Aparece un menú.

    SugerenciaSugerencia

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

  4. Haga clic en Aplicar enlace de datos.

    Aparece el generador de enlace de datos.

    generador de enlace de datos
  5. En el recuadro Origen, en el panel izquierdo, haga clic en StaticResource.

  6. En el panel intermedio, haga clic en Window.Resources.

  7. En el panel derecho, haga clic en studentCollection.

    El control ListBox se rellena con elementos.

  8. 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.

    Enlace de datos para ListBox

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

  1. En la ventana Propiedades, borre la propiedad DisplayMemberPath.

  2. Desplácese hasta la propiedad ItemTemplate.

  3. Haga clic en el marcador de propiedad (marcador de propiedad).

  4. Haga clic en Aplicar recurso.

    Aparecerá el selector de recursos.

  5. 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.

    Enlace de datos para ListBox con un convertidor de valores

Adiciones de comunidad

AGREGAR
Mostrar: