Ejercicio: Escritura de una aplicación con Template Studio

  • 10 minutos

Template Studio para WPF es una extensión de Visual Studio que acelera la creación de nuevas aplicaciones de Windows Presentation Foundation (WPF) mediante una experiencia basada en asistentes. El proyecto de WPF resultante contiene código con el formato correcto y legible que incorpora las características de Windows más recientes y, a la vez, implementa procedimientos recomendados y patrones demostrados.

¿Qué puede hacer con Template Studio?

Template Studio hace el trabajo duro de crear el código que, de no ser así, tendría que escribir manualmente cada vez que empiece a escribir una aplicación para WPF. Siempre que tenga una idea clara de la estructura de la aplicación antes de comenzar, puede usar al asistente para ir paso a paso en el proceso de agregar características y vistas al proyecto. Una vez que haya terminado, puede seguir agregando código que implementa la funcionalidad exclusiva para su proyecto.

Instalación de Template Studio

Si ha utilizado el script de instalación en el módulo de Instalación de herramientas automáticamente, Template Studio estará listo y esperándole. Si tiene que instalar las herramientas usted mismo, vaya a este sitio de extensiones de Visual Studio y seleccione Descargar.

Creación de una aplicación con Template Studio

Veamos el proceso de creación de una hipotética aplicación con Template Studio. No dude en seguir el tutorial con su propio equipo.

En primer lugar, vamos a esbozar las características de la aplicación. Puede ayudar esbozar de forma práctica en una hoja de papel las características que tendrá la aplicación y la forma en que las vistas estarán conectadas entre sí. En este ejemplo, imaginemos que estamos creando una aplicación de previsión meteorológica. Al final de este tutorial, tendremos un esqueleto de la aplicación, listo para agregar las características importantes relacionadas con el tiempo.

Nuestra aplicación hará lo siguiente:

  • Usará el control de Vista de navegación para cambiar entre vistas diferentes.
  • Mostrará los símbolos meteorológicos para la semana en una página en blanco.
  • Va a usar un mapa en un control WebView para mostrar el área de pronóstico meteorológico actual.
  • Va a mostrar la previsión de intervalo largo mediante un formato de detalles de lista.
  • Incluirá una página Configuración para permitir al usuario cambiar opciones.
  • Usará notificaciones para advertir al usuario de situaciones meteorológicas peligrosas.

Ahora que ya ha determinado estos detalles, ya estamos listos para usar el asistente de Template Studio para crear nuestro proyecto.

  1. Para abrir el asistente de Template Studio, cree un proyecto en Visual Studio; para ello, seleccione Archivo>Nuevo>Proyecto. Puede encontrar Template Studio como Template Studio para WPF.
  2. Asigne un nombre a la aplicación de Meteorología y seleccione Crear para iniciar el asistente. Screenshot that shows the Configure your new project window for a Template Studio app in Visual Studio.
  3. Se abre el asistente para Template Studio.
  4. En la página Tipo de proyecto, seleccionePanel de navegación y, a continuación, seleccione Siguiente. Screenshot that shows selecting the Navigation Pane on the Project type page of the Template Studio, and the Next button selected.
  5. En la página Patrón de diseño, seleccione Código subyacente y, a continuación, seleccione Siguiente.
  6. La página Páginas es donde las cosas se ponen interesantes. Cada tipo de página puede agregarse a la aplicación. El nombre y el orden de la página pueden cambiarse en el panel, a la derecha. Puede ver que se ha agregado una página en blanco llamada Principal de forma predeterminada. Nuestros símbolos meteorológicos están en esta página, así que cámbiele el nombre a CurrentForecast.
  7. Ahora, agregue una página WebView, una página ListDetails y una página de configuración. Screenshot that shows all of the pages added to the app and the Next button selected.
  8. Seleccione Siguiente. Puede agregar algunas características más avanzadas de Windows en la página Características. Por ahora, vamos a agregar Notificaciones del sistema. Screenshot that shows the Toast Notification feature added to the app and the Create button selected.
  9. En este módulo, omita Servicios y Pruebas. Seleccione Crear para generar su proyecto.
  10. Para cargar información meteorológica en el control WebView, abra WebMapsPage.xaml.cs en la carpeta Views y cambie el valor de cadena de DefaultUrl a https://www.msn.com/en-us/weather/maps/cloud/in-Redmond,WA.

Ahora que se ha creado el código del proyecto, puede seleccionar Ejecutar o pulsar F5 para crear el proyecto y ejecutarlo.

Screenshot that shows the app running with the map, chart, and settings panes displayed.

Puede observar que ya dispone de una aplicación bastante completa en funcionamiento. Todo lo que necesita hacer es agregar la funcionalidad. Fácil.