Compartir a través de


Uso de datos de muestra en tiempo de diseño con el Diseñador XAML en Visual Studio

Algunos controles dependientes de datos, como ListView, ListBoxy DataGrid, son difíciles de visualizar sin datos. En este artículo, revisaremos un nuevo enfoque que hace posible a los desarrolladores que trabajan en proyectos de .NET Core de Windows Presentation Foundation (WPF) o proyectos de .NET Framework de WPF con el Diseñador XAML en Visual Studio habilitar datos de ejemplo para estos controles.

Requisitos

La característica Datos de ejemplo requiere la versión de Visual Studio 2019 16.10 o posterior. La característica admite proyectos de escritorio de Windows que tienen como destino WPF para .NET Core o .NET Framework cuando se usa el nuevo diseñador.

Aspectos básicos de la característica Datos de ejemplo

La característica Datos de muestra es solo para la visualización en tiempo de diseño. Solo aparece en el diseñador XAML, no en la aplicación en ejecución. Por lo tanto, se aplica a la versión en tiempo de diseño de la propiedad ItemsSourced:ItemsSource. Los datos de muestra necesitan que el espacio de nombres en tiempo de diseño funcione.

Nota

Para más información sobre las propiedades en tiempo de diseño en XAML, consulte Propiedades en tiempo de diseño de XAML.

Para empezar, agregue las siguientes líneas de código al encabezado del documento XAML si aún no están presentes:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Después de agregar los espacios de nombres, puede usar d:ItemsSource="{d:SampleData}" para habilitar los datos de muestra en el control ListView, Listbox o DataGrid. Por ejemplo:

<DataGrid d:ItemsSource="{d:SampleData}"/>

Captura de pantalla que muestra datos de ejemplo en una cuadrícula de datos.

En este ejemplo, sin d:ItemsSource="{d:SampleData}", el Diseñador XAML mostraría una cuadrícula de datos vacía. En su lugar, con d:SampleData, ahora muestra los datos de ejemplo predeterminados generados.

De forma predeterminada, se muestran cinco elementos. Sin embargo, puede usar la propiedad ItemCount para especificar cuántos elementos desea mostrar. Por ejemplo: d:ItemsSource="{d:SampleData ItemCount=2}".

Datos de ejemplo con plantillas de datos

La característica Datos de ejemplo funciona para los controles ListBox, ListViewo DataGrid cuando se usan plantillas de datos. La característica analizará el control DataTemplate e intentará generar los datos adecuados para él.

Los datos de ejemplo solo se generarán para los elementos de las plantillas de datos que usan enlaces. Los datos de ejemplo se generarán incluso si los enlaces aún no tienen un origen. Por ejemplo:

<ListView d:ItemsSource="{d:SampleData ItemCount=3}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="50" Source="{Binding ProfilePicture}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding FirstName}" Margin="5"/>
                    <Label Content="{Binding LastName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Captura de pantalla que muestra datos de ejemplo en una vista de lista con una plantilla de datos.

Datos de ejemplo con acciones sugeridas

Para habilitar o deshabilitar fácilmente datos de ejemplo para un control del diseñador, puede usar la característica Acciones sugeridas. Acciones sugeridas se muestra como un icono de bombilla en el diseñador, que aparece en la esquina superior derecha al seleccionar un control. Puede habilitar los datos de ejemplo seleccionando el control, seleccionando la bombilla y seleccionando Mostrar datos de ejemplo. Por ejemplo:

Captura de pantalla que muestra datos de ejemplo con acciones sugeridas.

Datos de ejemplo con la interfaz IValueConverter

La característica Datos de ejemplo no admite completamente convertidores ni la interfaz IValueConverter. Sin embargo, puede hacer que funcione haciendo una o ambas de las siguientes acciones:

  • Asegúrese de que la función Convert puede controlar un escenario en el que el valor ya es el tipo de destino.
  • Implemente la función ConvertBack que convertirá su valor al tipo original.

Solución de problemas

Si los datos de ejemplo no muestran nada o no muestran el tipo correcto, puede intentar actualizar el diseñador o cerrar y volver a abrir la página.

Si experimenta un problema que no aparece en esta sección o que no se puede corregir actualizando la página, háganoslo saber con la herramienta Notificar un problema.