Datos de ejemplo en la superficie de diseño y para la creación de prototipos

Nota:

 El grado en que necesita datos de ejemplo y cuánto le pueden ayudar dependerá de si sus enlaces utilizan la extensión de marcado de {Binding} o la extensión de marcado de {x:Bind}. Las técnicas descritas en este tema se basan en el uso de un DataContext, por lo que solo son adecuados para {Binding}. Pero si usa {x:Bind}, sus enlaces muestran al menos valores de marcador de posición en la superficie de diseño (incluso para los controles de elementos), por lo que no tendrá la misma necesidad de datos de ejemplo.

Puede ser imposible o no deseado (quizá por motivos de privacidad o rendimiento) para que la aplicación muestre datos dinámicos en la superficie de diseño en Microsoft Visual Studio o Blend para Visual Studio. Para que los controles se rellenen con datos (para que puedas trabajar en el diseño, las plantillas y otras propiedades visuales de la aplicación), hay varias maneras en las que puedes usar datos de ejemplo en tiempo de diseño. Los datos de ejemplo también pueden ser verdaderamente útiles y ahorrar tiempo si estás creando una aplicación de boceto (o prototipo). Puede usar datos de ejemplo en su boceto o prototipo en tiempo de ejecución para ilustrar sus ideas sin llegar a conectarse a datos reales en vivo.

Aplicaciones de ejemplo que muestran {Binding}

• Descargue la aplicación Bookstore1.
• Descargue la app Bookstore2.

Nota:

Las capturas de pantalla de este artículo se tomaron de una versión anterior de Visual Studio. Es posible que no coincidan exactamente con tu experiencia de desarrollo si usas Visual Studio 2019.

Configuración de DataContext en marcado

Es una práctica bastante común para desarrolladores usar código imperativo (en código subyacente) para establecer una página o control de usuario DataContext en una instancia de modelo de vista.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Pero si lo haces, la página no es tan "designable" como podría ser. La razón es que cuando se abre la página XAML en Visual Studio o Blend para Visual Studio, el código imperativo que asigna el valor de DataContext nunca se ejecuta (de hecho, no se ejecuta ninguno de tu código subyacente). Por supuesto, las herramientas XAML analizan el marcado y crean instancias de los objetos declarados en él, pero en realidad no crean instancias del propio tipo de la página. El resultado es que no verá ningún dato en los controles o en el cuadro de diálogo Crear enlace de datos, y la página será más difícil de dar estilo y de diseñar.

El primer remedio que puedes intentar es desactivar mediante comentarios la asignación de DataContext y establecer el DataContext en el código de tu página. De este modo, los datos en vivo se muestran tanto en tiempo de diseño como en tiempo de ejecución. Para ello, abra primero la página XAML. A continuación, en la ventana de esquema de documento, haga clic en el elemento raíz que se puede diseñar (normalmente con la etiqueta [Página]) para seleccionarlo. En la ventana Propiedades, busque la propiedad DataContext (dentro de la categoría Common) y modifíquela. Seleccione el tipo de modelo de vista del cuadro de diálogo Seleccionar objeto y, a continuación, haga clic en Aceptar.

Así es el aspecto del marcado resultante.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

Y así es como se ve la superficie de diseño ahora que las vinculaciones pueden resolverse. Tenga en cuenta que el selector ruta de acceso de del cuadro de diálogo Crear enlace de datos está rellenado, en función del tipo de DataContext de y de las propiedades a las que puede enlazar.

El cuadro de diálogo Crear enlace de datos solo necesita un tipo para funcionar, pero los enlaces necesitan que las propiedades se inicialicen con valores. Si no quiere ponerse en contacto con el servicio en la nube en tiempo de diseño (debido al rendimiento, pagar por transferencia de datos, problemas de privacidad, ese tipo de cosa), el código de inicialización puede comprobar si la aplicación se ejecuta en una herramienta de diseño (como Visual Studio o Blend para Visual Studio) y, en ese caso, cargar datos de ejemplo para usarlos solo en tiempo de diseño.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

Puede usar un localizador de modelos de vista si necesita pasar parámetros al código de inicialización. Un localizador de modelos de vista es una clase que se puede colocar en los recursos de la aplicación. Tiene una propiedad que expone el modelo de vista, y el DataContext de la página se enlaza a esa propiedad. Otro patrón que puede usar el localizador o el modelo de vista es la inserción de dependencias, que puede construir un proveedor de datos en tiempo de diseño o en tiempo de ejecución (cada uno de los cuales implementa una interfaz común), según corresponda.

Datos de ejemplo de la clase y atributos en tiempo de diseño

Si por cualquier motivo ninguna de las opciones de la sección anterior funciona para ti, sigues teniendo muchas opciones de datos en tiempo de diseño disponibles a través de características de herramientas XAML y atributos en tiempo de diseño. Una buena opción es la característica Crear datos de ejemplo desde la clase en Blend para Visual Studio. Puede encontrar ese comando en uno de los botones de la parte superior del panel de datos de .

Lo único que debe hacer es especificar una clase para el comando que se va a usar. A continuación, el comando hace dos cosas importantes para usted. En primer lugar, genera un archivo XAML que contiene datos de ejemplo adecuados para hidratar una instancia de la clase elegida y todos sus miembros, recursivamente (de hecho, las herramientas funcionan igualmente bien con archivos XAML o JSON). En segundo lugar, rellena el panel Datos con el esquema de la clase elegida. A continuación, puede arrastrar miembros desde el panel de datos a la superficie de diseño para realizar varias tareas. Dependiendo de lo que arrastre y dónde lo coloque, puede agregar enlaces a controles existentes (mediante {Binding}), o crear nuevos controles y enlazarlos al mismo tiempo. En cualquier caso, la operación también establece un contexto de datos en tiempo de diseño (d:DataContext) para usted (si aún no está establecido) en la raíz de diseño de la página. Ese contexto de datos en tiempo de diseño usa el atributo d:DesignData para obtener sus datos de ejemplo del archivo XAML que se generó (que, por cierto, puedes encontrar en el proyecto y editar para que contenga los datos de ejemplo que quieras).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

Las distintas declaraciones xmlns significan que los atributos con el d: prefijo se interpretan solo en tiempo de diseño y se omiten en tiempo de ejecución. Por lo tanto, el atributo d:DataContext solo afecta al valor de la propiedad DataContext en tiempo de diseño; no tiene ningún efecto en tiempo de ejecución. Incluso puede establecer d:DataContext y dataContext en el marcado si lo desea. d:DataContext se invalidará durante el tiempo de diseño, y DataContext se invalidará durante el tiempo de ejecución. Estas mismas reglas de invalidación se aplican a todos los atributos en tiempo de diseño y en tiempo de ejecución.

El atributo d:DataContext y todos los demás atributos en tiempo de diseño se documentan en el tema de Atributos Design-Time, que sigue siendo válido para las aplicaciones de la Plataforma Universal de Windows (UWP).

CollectionViewSource no tiene una propiedad DataContext, pero sí tiene una propiedad Source. En consecuencia, hay una propiedad d:Source que puede utilizar para establecer datos de ejemplo solo para tiempo de diseño en una CollectionViewSource.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Para que funcione, tendrías una clase denominada Recordings : ObservableCollection<Recording>y editarías el archivo XAML de datos de ejemplo para que solo contenga un objeto Recordings (con objetos Recording dentro de eso), como se muestra aquí.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Si usas un archivo de datos de ejemplo JSON en lugar de XAML, debes establecer la propiedad type .

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

Hasta ahora, hemos estado usando d:DesignData para cargar datos de ejemplo en tiempo de diseño desde un archivo XAML o JSON. Una alternativa a esa es la extensión de marcado d:DesignInstance, que indica que el origen en tiempo de diseño se basa en la clase especificada por la propiedad Type. Este es un ejemplo.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

La propiedad IsDesignTimeCreatable indica que la herramienta de diseño realmente debe crear una instancia de la clase , lo que implica que la clase tiene un constructor predeterminado público y que se rellena con datos (ya sea real o de ejemplo). Si no establece IsDesignTimeCreatable (o si lo establece en False), no obtendrá datos de ejemplo mostrados en la superficie de diseño. En ese caso, todo lo que hace la herramienta de diseño es analizar la clase para identificar sus propiedades enlazables y mostrarlas en el panel Datos y en el cuadro de diálogo Crear enlace de datos.

Datos de ejemplo para la creación de prototipos

Para crear prototipos, quiere datos de ejemplo en tiempo de diseño y en tiempo de ejecución. Para ese caso de uso, Blend para Visual Studio tiene la característica New Sample Data. Puede encontrar ese comando en uno de los botones de la parte superior del panel de datos de .

En lugar de especificar una clase, puede diseñar el esquema del origen de datos de ejemplo directamente en el panel de datos . También puede editar los valores de datos de ejemplo en el panel Datos de : no es necesario abrir y editar un archivo (aunque puede seguir haciéndolo si lo prefiere).

La característica New Sample Data usa DataContext, y no d:DataContext, de modo que los datos de ejemplo estén disponibles al ejecutar el boceto o prototipo, así como al diseñarlos. Y el panel Datos acelera realmente las tareas de diseño y enlace. Por ejemplo, simplemente arrastrar una propiedad de colección desde el panel de Datos a la superficie de diseño genera un control de elementos enlazados a datos y las plantillas necesarias, quedando todo listo para construir y ejecutar.