Compartir a través de

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

  • Artículo

Algunos controles dependientes de datos, como ListView, ListBox y DataGrid, son difíciles de visualizar sin datos. En este artículo, revisaremos un nuevo enfoque que permite a los desarrolladores que están trabajando en proyectos de Windows Presentation Foundation (WPF) para .NET Core o de WPF para .NET Framework con el Diseñador XAML de Visual Studio, habilitar datos de muestra en estos controles.

Requisitos

La característica Datos de muestra requiere Visual Studio 2019, versión 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. Para habilitar el nuevo diseñador para .NET Framework:

  1. Vaya a Herramientas>Opciones>Entorno>Características de la versión preliminar.
  2. Seleccione Nuevo Diseñador XAML de WPF para .NET Framework y reinicie Visual Studio.

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

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 todavía 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}"/>

Screenshot that shows sample data on a data grid.

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 muestra 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 muestra con plantillas de datos

La característica Datos de muestra funciona con los controles ListBox, ListView o 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 muestra solo se generarán para los elementos de las plantillas de datos que usan enlaces. Los datos de muestra 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>

Screenshot that shows sample data in a list view with a data template.

Datos de muestra con acciones sugeridas

Para habilitar o deshabilitar fácilmente datos de muestra para un control desde el 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. Para habilitar los datos de muestra, seleccione el control, seleccione la bombilla y, a continuación, seleccione Ver datos de muestra. Por ejemplo:

Screenshot that shows sample data with Suggested Actions.

Datos de muestra con la interfaz IValueConverter

La característica Datos de ejemplo no admite completamente convertidores ni la interfaz IValueConverter. Sin embargo, puede conseguir que funcione realizando 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á el valor de nuevo 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 resolver actualizando la página, háganoslo saber mediante la herramienta Notificar un problema.

Contenido relacionado