Tutorial: Crear un diseño dinámico controlado por datos

Windows Presentation Foundation (WPF) proporciona controles que admiten diseños dinámicos controlados por datos. El uso de estos controles con WPF Designer for Visual Studio facilita la creación de estos tipos de diseños. Puede utilizar los controles siguientes en las aplicaciones:

El control ListView proporciona la infraestructura necesaria para mostrar un conjunto de elementos de datos en distintos diseños. GridView se suele utilizar junto con el control ListView para mostrar datos en columnas. Para obtener más información, vea Información general sobre ListView y Información general sobre GridView.

En este tutorial realizará las siguientes tareas:

  • Preparar un origen de datos.

  • Crear una aplicación de WPF.

  • Configurar el control de panel Grid predeterminado.

  • Agregar y configurar un control ListView.

  • Agregar y configurar un control GridView en XAML.

  • Agregar y configurar un control Button.

  • Agregar código de enlace de datos.

  • Probar la aplicación.

En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.

Diseño dinámico controlado por datos

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

Preparar el origen de datos

Para este tutorial, necesitará un origen de datos de ejemplo con el que realizar el enlace. Creará un origen de datos en un archivo CSV simple.

Para preparar el origen de datos

  1. Cree una nueva carpeta con el nombre Data.

  2. En la carpeta Data, cree un nuevo archivo de texto con el nombre employees.csv.

    Nota

    Para crear el archivo puede utilizar cualquier editor de texto como, por ejemplo, el Bloc de notas.

  3. Agregue lo siguiente al archivo de texto:

    LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

  4. Guarde y cierre el archivo.

    SugerenciaSugerencia

    Puede abrir el archivo en Excel y confirmar que los datos separados por comas aparecen en columnas independientes.

  5. En la carpeta Data, cree un nuevo archivo de texto con el nombre schema.ini. El archivo de esquema describe el formato de los archivos de texto de la carpeta de datos.

  6. Agregue lo siguiente al archivo de texto:

    [employees.csv]
Format=CSVDelimited
ColNameHeader=True
    SugerenciaSugerencia

    En este tutorial, el archivo CSV tiene encabezados de columna. Para enlazar a un archivo CSV que no tenga encabezados de columna, cambie ColNameHeader=True por ColNameHeader=False.

  7. Guarde y cierre el archivo.

Creación del proyecto

El procedimiento siguiente consiste en crear el proyecto de Visual Studio para la aplicación.

Para crear el proyecto

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

    MainWindow.xaml se abrirá en WPF Designer.

  2. En el menú Archivo, haga clic en Guardar todo.

Configurar el control de panel de cuadrícula predeterminado

De forma predeterminada, la nueva aplicación de WPF contiene un Window con un panel Grid. En este procedimiento se agregan dos filas a la cuadrícula. El alto de una fila se establece en Auto, para que su tamaño se ajuste al contenido. El alto de la otra fila se establece en *, para que use el alto disponible restante.

Para configurar el control de panel de cuadrícula predeterminado

  1. En la Vista de diseño, seleccione Grid. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

  2. En la ventana Propiedades, busque la propiedad RowDefinitions y haga clic en el botón de puntos suspensivos en la columna de valores de propiedad.

    Aparecerá el Editor de colecciones.

  3. Haga clic en Agregar dos veces para agregar dos filas.

  4. Establezca la propiedad Height de la primera fila en *.

  5. Establezca la propiedad Height de la segunda fila en Auto.

  6. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer.

    Ahora hay dos filas en la cuadrícula, pero sólo aparece una. La fila cuya propiedad Height está establecida en Auto se oculta temporalmente porque no tiene contenido. Para el propósito de este tutorial, esto está bien. Pero para evitarlo en el futuro, puede utilizar el ajuste del tamaño mediante asterisco mientras trabaja, y cambiar a Auto cuando haya terminado.

  7. En el menú Archivo, haga clic en Guardar todo.

Agregar y configurar un control ListView

En este procedimiento se agrega un control ListView. Se da un nombre a ListView para que pueda hacer referencia a él desde el archivo de código subyacente. Se configuran sus propiedades de diseño.

Para agregar y configurar un control ListView

  1. En la Vista de diseño, seleccione Grid.

  2. En el Cuadro de herramientas, en el grupo Controles, arrastre un control ListView hasta Grid.

  3. En la ventana Propiedades, establezca las siguientes propiedades de ListView:

    Propiedad

    Valor

    Name

    lvEmployees

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Automático

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. En el menú Archivo, haga clic en Guardar todo.

Agregar y configurar un control GridView

En este procedimiento se agrega un control GridView con tres columnas para mostrar los datos del archivo de texto. Se asignan nombres de las columnas porque se hará referencia a ellas desde el código subyacente para enlazar los datos a las columnas individualmente. Para obtener más información, vea Cómo: Mostrar el contenido de ListView mediante un control GridView.

Para agregar y configurar un control GridView

  1. En el editor XAML, busque el elemento ListView. Tiene la apariencia siguiente:

    <ListView <ATTRIBUTES> />
    SugerenciaSugerencia

    Para resaltar con facilidad los elementos en la vista XAML, haga clic en el control en la Vista de diseño o utilice la ventana Esquema del documento.

  2. Reemplace el elemento ListView con lo siguiente:

    <ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

  3. En el menú Archivo, haga clic en Guardar todo.

Agregar y configurar un control de botón

En este procedimiento, se agrega un control Button y se especifica su evento Click.

Para agregar y configurar un control de botón

  1. En la Vista de diseño, seleccione Grid.

    SugerenciaSugerencia

    Dado que ListView cubre Grid, podría resultar difícil seleccionar Grid. Puede utilizar la tecla TAB o la ventana Esquema del documento para seleccionar Grid.

  2. En el Cuadro de herramientas, en el grupo Controles, arrastre un control Button hasta Grid.

  3. En la ventana Propiedades, establezca las siguientes propiedades de Button:

    Propiedad

    Valor

    Name

    btnGetData

    Content

    Get Data

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Right

    VerticalAlignment

    Bottom

    Margin

    5

  4. En el editor XAML, busque el elemento Button. Tiene la apariencia siguiente:

    <Button <ATTRIBUTES>>Button</Button>
    SugerenciaSugerencia

    Para resaltar con facilidad los elementos en la vista XAML, haga clic en el control en la Vista de diseño o utilice la ventana Esquema del documento.

  5. Edite el XAML para agregar un atributo del evento Click. Debe tener este aspecto:

    <Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>

  6. En el menú Archivo, haga clic en Guardar todo.

Agregar el código de enlace a datos

En este procedimiento se agrega el código para el evento Click de Button. En tiempo de ejecución, se hace clic en el botón para obtener los datos y enlazarlos a los controles ListView y GridView.

Para agregar el código de enlace de datos

  1. Abra el archivo de código subyacente; MainWindow.xaml.cs o MainWindow.xaml.vb, según el lenguaje que seleccionó para su proyecto.

  2. En la parte superior del editor de código, agregue el código siguiente. Para enlazar a los datos, es preciso tener acceso a los espacios de nombres System.Data y System.Data.OleDb.

    Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

    using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

  3. Agregue el código siguiente en la clase MainWindow. Se utiliza un DataTable para almacenar los datos.

    Dim dtEmployees As DataTable

    DataTable dtEmployees;

  4. Agregue el código siguiente en la clase MainWindow. Cuando el usuario haga clic en el botón, se obtendrán los datos y, a continuación, se enlazarán a ListView.

    Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

    private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

  5. En la clase MainWindow, agregue el código siguiente y especifique la ruta de acceso a la carpeta Data. Para obtener los datos, se utiliza un OleDbDataAdapter.

    Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

    DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

  6. Agregue el código siguiente en la clase MainWindow. Para enlazar los datos a ListView, se establece su propiedad DataContext en DataTable. Las columnas de datos se muestran en las columnas del GridView.

    Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

    void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

  7. En el menú Archivo, haga clic en Guardar todo.

Establecer la ventana para que ajuste su tamaño dinámicamente

La propiedad SizeToContent especifica cómo cambia el tamaño de Window cuando cambia el tamaño de su contenido. De manera predeterminada, esta propiedad está establecida en Manual, lo que significa que el usuario puede cambiar manualmente el tamaño de la ventana para ajustarla al contenido. En este procedimiento se establece esta propiedad en WidthAndHeight, de manera que el tamaño de la ventana se ajuste dinámicamente cuando cambie su contenido.

Para establecer la ventana de modo que ajuste su tamaño dinámicamente

  1. Abra MainWindow.xaml en el diseñador.

  2. En la vista Diseño, seleccione Window.

  3. En la ventana Propiedades, establezca las siguientes propiedades de Window:

    Propiedad

    Valor

    SizeToContent

    WidthAndHeight

    Width

    Auto

    Height

    Auto

  4. En el menú Archivo, haga clic en Guardar todo.

Probar la aplicación

Para probar la aplicación

  1. En el menú Depurar, haga clic en Iniciar depuración.

    La aplicación se inicia y aparece la ventana. Dado que la propiedad SizeToContent se establece en WidthAndHeight, la ventana tiene el tamaño justo para los encabezados de GridView y el control Button.

  2. Haga clic en Get Data.

    La aplicación obtiene los datos y los enlaza a GridView. Los controles GridView y ListView, y la ventana Window cambian de tamaño dinámicamente para ajustarse al nuevo contenido.

  3. Cierre la ventana.

Resultado final

A continuación se muestra el archivo MainWindow.xaml completo:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Pasos siguientes

En este tutorial se utilizó un control GridView con tres columnas para mostrar datos. Se enlazaron directamente los datos a cada columna de manera individual. También puede utilizar plantillas de datos para organizar los datos de los controles ListView o GridView y aplicarles estilos. Para obtener más información, vea Información general sobre plantillas de datos.

Puede experimentar con el uso de plantillas de datos en este tutorial. Por ejemplo, puede crear una plantilla como la siguiente:

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

A continuación, utilice la plantilla de datos en GridView con un código como el siguiente:

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Quite o marque como comentario lo siguiente del código subyacente:

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

Vea también

Tareas

Cómo: Crear un diseño dinámico controlado por datos

Conceptos

Sistema de diseño

Información general sobre WPF y Silverlight Designer

Otros recursos

Tutoriales sobre diseño

Trabajar con WPF Designer

  • Last updated on