Uso de datos de ejemplo en tiempo de diseño con la Diseñador XAML en Visual Studio

  • Artículo
  • Tiempo de lectura: 2 minutos

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

Requisitos

La característica Datos de ejemplo requiere Visual Studio versión 16.10 o posterior de 2019.

La característica admite Windows de escritorio 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 Características en > versión > preliminar del > entorno.
  2. Seleccione Nuevo wpf Diseñador XAML para .NET Framework y, a continuación, reinicie Visual Studio.

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

La característica Datos de ejemplo 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 ItemsSource propiedad d:ItemsSource . Los datos de ejemplo necesitan que el espacio de nombres en tiempo de diseño funcione.

Nota

Para obtener más información sobre las propiedades en tiempo de diseño en XAML, vea 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 para habilitar los datos de d:ItemsSource="{d:SampleData}" ejemplo en el control , o ListView Listbox 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, d:SampleData con , ahora muestra los datos de ejemplo predeterminados generados.

De forma predeterminada, se muestran cinco elementos. Sin embargo, puede usar la ItemCount propiedad 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 ListBox los controles , o cuando se usan plantillas de ListView DataGrid datos. La característica analizará el DataTemplate control 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 los datos de ejemplo de un control desde el diseñador, puede usar la característica Acciones sugeridas. Acciones sugeridas es una 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, a continuación, 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 IValueConverter interfaz . Sin embargo, puede hacer que funcione haciendo una o ambas de las siguientes acciones:

  • Asegúrese de que la Convert función puede controlar un escenario en el que el valor ya es el tipo de destino.
  • Implemente ConvertBack la función que convertirá el 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 solucionar actualizando la página, háganoslo saber mediante la herramienta Notificar un problema.

Consulte también