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

Algunos diseños son difíciles de visualizar sin datos. En este documento, revisaremos uno de los enfoques que los desarrolladores que trabajan en proyectos de escritorio pueden usar para simular datos en el diseñador XAML. Este enfoque se realiza mediante el espacio de nombres "d:" ignorable existente. Con este enfoque, puede agregar rápidamente datos en tiempo de diseño a las páginas o controles sin necesidad de crear un ViewModel ficticio completo, o simplemente probar cómo un cambio de propiedad podría afectar a la aplicación sin preocuparse de que estos cambios afectarán a las compilaciones de versión. Todos los datos d: solo los usa el Diseñador XAML y no se compilan valores de espacio de nombres ignorables en la aplicación.

Conceptos básicos de datos de tiempo de diseño

Los datos en tiempo de diseño son datos ficticios que estableces para que los controles sean más fáciles de visualizar en el Diseñador 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, puedes colocar d: delante de cualquier atributo o control para mostrarlo solo en el Diseñador XAML, pero no en tiempo de ejecución.

Por ejemplo, puede agregar texto a un TextBlock que normalmente tiene datos enlazados a él.

<TextBlock Text="{Binding Name}" d:Text="Name!" />

En este ejemplo, sin d:Text, el Diseñador XAML no mostraría nada para TextBlock. En su lugar, muestra "Name!" donde TextBlock tendrá datos reales en tiempo de ejecución.

Puedes usar d: con atributos para cualquier control de UWP o WPF .NET Core, como colores, tamaños de fuente y espaciado. Incluso puede agregarlo al propio control.

<d:Button Content="Design Time Button" />

En este ejemplo, el botón solo aparece en tiempo de diseño. Use este método para colocar un marcador de posición en para un control personalizado o para probar controles diferentes. Todos los d: atributos y controles se omitirán durante el tiempo de ejecución.

Vista previa de imágenes en tiempo de diseño

Puede establecer un origen en tiempo de diseño para imágenes enlazadas a la página o cargadas dinámicamente. Agrega la imagen que quieres mostrar en el Diseñador XAML al proyecto. A continuación, puedes mostrar esa imagen en el Diseñador XAML en tiempo de diseño:

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Datos en tiempo de diseño para ListViews

ListViews es una manera popular de mostrar datos en la aplicación de escritorio. Sin embargo, son difíciles de visualizar sin datos. Puede usar esta característica para crear un elemento itemSource o elementos en tiempo de diseño insertados. El Diseñador XAML muestra lo que hay en esa matriz en listView en tiempo de diseño.

Ejemplo de .NET Core de WPF

Para usar el tipo system:String, asegúrate de incluir xmlns:system="clr-namespace:System;assembly=mscorlib en el encabezado XAML.

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type system:String}">
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </x:Array>
        </d:ListView.ItemsSource>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
        </DataTemplate>
    </ListView.ItemTemplate>
   </ListView>
</StackPanel>

En este ejemplo anterior se muestra un control ListView con tres TextBlocks en el Diseñador XAML.

También puede crear una matriz de objetos de datos. Por ejemplo, las propiedades públicas de un City objeto de datos se pueden construir como datos en tiempo de diseño.

namespace Cities.Models
{
    public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

Para usar la clase en XAML, debes importar el espacio de nombres en el nodo raíz.

xmlns:models="clr-namespace:Cities.Models"

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:City}">
                <models:City Name="Seattle" Country="United States"/>
                <models:City Name="London" Country="United Kingdom"/>
                <models:City Name="Panama City" Country="Panama"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
                    <TextBlock Text="{Binding Country}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

La ventaja aquí es que puede enlazar los controles a una versión estática en tiempo de diseño del modelo.

Ejemplo de UWP

x:Array no se admite en UWP. Por lo tanto, podemos usar <d:ListView.Items> en su lugar. Para usar el tipo system:String, asegúrate de incluir http://schemas.microsoft.com/winfx/2009/xaml en el encabezado XAML.

    <StackPanel>
        <ListView>
            <d:ListView.Items>
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </d:ListView.Items>
        </ListView>
    </StackPanel>

Uso de datos en tiempo de diseño con propiedades y tipos personalizados

Esta característica solo funciona de forma predeterminada con propiedades y controles de plataforma. En esta sección se describen los pasos necesarios para permitirle usar sus propios controles personalizados como controles en tiempo de diseño, una nueva funcionalidad disponible para los clientes que usan Visual Studio 2019 versión 16.8 o posterior. Hay tres requisitos para habilitar esto:

• Un espacio de nombres xmlns personalizado

  xmlns:myControls="http://MyCustomControls"
  

• Una versión en tiempo de diseño del espacio de nombres. Esto se puede lograr simplemente anexando /design al final.

  xmlns:myDesignTimeControls="http://MyCustomControls/design"
  

• Adición del prefijo en tiempo de diseño al mc:Ignoreable

  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d myDesignTimeControls"
  

Después de realizar todos estos pasos, puede usar el myDesignTimeControls prefijo para crear los controles en tiempo de diseño.

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

Creación de un espacio de nombres xmlns personalizado

Para crear un espacio de nombres xmlns personalizado en WPF .NET Core, debe asignar el espacio de nombres XML personalizado al espacio de nombres CLR en el que se encuentran los controles. Para ello, agregue el atributo de nivel de ensamblado en el XmlnsDefinitionAssemblyInfo.cs archivo. El archivo se encuentra en la jerarquía raíz del proyecto.

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

Solución de problemas

Si experimenta un problema que no aparece en esta sección, háganoslo saber mediante la herramienta Notificar un problema .

El Diseñador XAML dejó de funcionar

Intente cerrar y volver a abrir el archivo XAML y limpie y recompile el proyecto.

Consulte también

• Datos en tiempo de diseño con el previewer de Xamarin.Forms
• XAML en aplicaciones de WPF
• XAML en aplicaciones de UWP
• XAML en aplicaciones de Xamarin.Forms
• XAML en aplicaciones .NET MAUI