Caso práctico de Windows Runtime 8.x a UWP: Bookstore1

En este tema se presenta un caso práctico de migración de una aplicación universal 8.1 muy sencilla a una aplicación de Windows 10 Plataforma universal de Windows (UWP). Una aplicación universal 8.1 es una que compila un paquete de aplicación para Windows 8.1 y un paquete de aplicación diferente para Windows Phone 8.1. Con Windows 10, puedes crear un único paquete de aplicación que los clientes puedan instalar en una amplia gama de dispositivos y eso es lo que haremos en este caso práctico. Consulta Guía para aplicaciones para UWP.

La aplicación que se va a portar consta de un listBox enlazado a un modelo de vista. El modelo de vista tiene una lista de libros que muestran el título, el autor y la portada del libro. Las imágenes de portada del libro tienen acción de compilación establecida en Contenido y Copiar en directorio de salida establecido en No copiar.

En los temas anteriores de esta sección se describen las diferencias entre las plataformas y se proporcionan detalles e instrucciones sobre el proceso de portabilidad de varios aspectos de una aplicación desde el marcado XAML, mediante el enlace a un modelo de vista, hasta el acceso a los datos. Un caso práctico tiene como objetivo complementar esa guía al mostrarla en acción en un ejemplo real. En los casos prácticos se supone que ha leído las instrucciones, que no se repiten.

Nota Al abrir Bookstore1Universal_10 en Visual Studio, si ve el mensaje "Se requiere actualización de Visual Studio", siga los pasos descritos en TargetPlatformVersion.

Descargas

Descargue la aplicación Bookstore1_81 Universal 8.1.

Descargue la aplicación Bookstore1Universal_10 Windows 10.

La aplicación Universal 8.1

Esto es lo que Bookstore1_81, la aplicación que vamos a portar, tiene el aspecto. Es simplemente un cuadro de lista de desplazamiento vertical de los libros situados debajo del encabezado del nombre y el título de la página de la aplicación.

Bookstore1_81 en Windows

Bookstore1_81 en Windows Phone

Migración a un proyecto de Windows 10

La solución Bookstore1_81 es un proyecto de aplicación universal 8.1 y contiene estos proyectos.

• Bookstore1_81.Windows. Este es el proyecto que compila el paquete de la aplicación para Windows 8.1.
• Bookstore1_81.WindowsPhone. Este es el proyecto que compila el paquete de la aplicación para Windows Phone 8.1.
• Bookstore1_81.Shared. Este es el proyecto que contiene código fuente, archivos de marcado y otros recursos y recursos, que usan ambos proyectos.

Para este caso práctico, tenemos las opciones habituales descritas en Si tiene una aplicación Universal 8.1 con respecto a qué dispositivos admitir. La decisión aquí es una sencilla: esta aplicación tiene las mismas características y lo hace principalmente con el mismo código, tanto en sus formularios windows 8.1 como Windows Phone 8.1. Por lo tanto, migraremos el contenido del proyecto Compartido (y cualquier otra cosa que necesitemos de los otros proyectos) a un Windows 10 que tenga como destino la familia de dispositivos universales (una que pueda instalar en la gama más amplia de dispositivos).

Es una tarea muy rápida crear un nuevo proyecto en Visual Studio, copiar archivos en él desde Bookstore1_81 e incluir los archivos copiados en el nuevo proyecto. Empiece por crear un nuevo proyecto aplicación vacía (Windows Universal). Asígnelo el nombre Bookstore1Universal_10. Estos son los archivos que se van a copiar de Bookstore1_81 a Bookstore1Universal_10.

Desde el proyecto compartido

• Copie la carpeta que contiene los archivos PNG de la imagen de portada del libro (la carpeta es \Assets\CoverImages). Después de copiar la carpeta, en Explorador de soluciones, asegúrese de que Mostrar todos los archivos está activado. Haga clic con el botón derecho en la carpeta que copió y haga clic en Incluir en el proyecto. Ese comando es lo que queremos decir por "incluir" archivos o carpetas en un proyecto. Cada vez que copie un archivo o carpeta, cada copia, haga clic en Actualizar en Explorador de soluciones y, a continuación, incluya el archivo o la carpeta en el proyecto. No es necesario hacerlo para los archivos que va a reemplazar en el destino.
• Copie la carpeta que contiene el archivo de origen del modelo de vista (la carpeta es \ViewModel).
• Copie MainPage.xaml y reemplace el archivo en el destino.

Desde el proyecto de Windows

• Copie BookstoreStyles.xaml. Usaremos este como buen punto de partida porque todas las claves de recursos de este archivo se resolverán en una aplicación de Windows 10; Algunos de ellos en el archivo equivalente de WindowsPhone no lo harán.

Edite el código fuente y los archivos de marcado que acaba de copiar y cambie las referencias al espacio de nombres Bookstore1_81 a Bookstore1Universal_10. Una manera rápida de hacerlo es usar la característica Reemplazar en archivos . No se necesitan cambios de código en el modelo de vista ni en ningún otro código imperativo. Pero, solo para que sea más fácil ver qué versión de la aplicación se está ejecutando, cambie el valor devuelto por la propiedad Bookstore1Universal_10.BookstoreViewModel.AppName de "BOOKSTORE1_81" a "BOOKSTORE1UNIVERSAL_10".

En este momento, puede compilar y ejecutar. Así es como se ve nuestra nueva aplicación para UWP después de haber realizado ningún trabajo explícito aún para migrarla a Windows 10.

La aplicación de Windows 10 con cambios iniciales en el código fuente que se ejecutan en un dispositivo de escritorio

La aplicación de Windows 10 con cambios iniciales en el código fuente que se ejecutan en un dispositivo móvil

La vista y el modelo de vista funcionan correctamente y listBox funciona correctamente. Solo tenemos que corregir el estilo. En un dispositivo móvil, en el tema claro, podemos ver el borde del cuadro de lista, pero eso será fácil de ocultar. Y la tipografía es demasiado grande, por lo que cambiaremos los estilos que estamos usando. Además, la aplicación debe tener un color claro al ejecutarse en un dispositivo de escritorio si queremos que tenga un aspecto similar al predeterminado. Así que cambiaremos eso.

Estilo universal

La aplicación Bookstore1_81 usó dos diccionarios de recursos diferentes (BookstoreStyles.xaml) para adaptar sus estilos a los sistemas operativos Windows 8.1 y Windows Phone 8.1. Ninguno de esos dos archivos BookstoreStyles.xaml contiene exactamente los estilos que necesitamos para nuestra aplicación de Windows 10. Pero la buena noticia es que lo que queremos es realmente mucho más sencillo que cualquiera de ellos. Por lo tanto, los pasos siguientes implicarán principalmente la eliminación y simplificación de nuestros archivos de proyecto y marcado. A continuación se indican los pasos. Y puede usar los vínculos en la parte superior de este tema para descargar los proyectos y ver los resultados de todos los cambios entre aquí y el final del caso práctico.

• Para ajustar el espaciado entre elementos, busque la BookTemplate plantilla de datos en MainPage.xaml y elimine de Margin="0,0,0,8" la cuadrícula raíz.
• Además, en BookTemplate, hay referencias a BookTemplateTitleTextBlockStyle y BookTemplateAuthorTextBlockStyle. Bookstore1_81 usaron esas claves como direccionamiento indirecto para que una sola clave tuviera implementaciones diferentes en las dos aplicaciones. Ya no necesitamos ese direccionamiento indirecto; podemos hacer referencia directamente a los estilos del sistema. Por lo tanto, reemplace esas referencias por TitleTextBlockStyle y SubtitleTextBlockStyle, respectivamente.
• Ahora, es necesario establecer LayoutRoot"Background" en el valor predeterminado correcto para que la aplicación tenga el aspecto adecuado al ejecutarse en todos los dispositivos, independientemente del tema. Cámbielo de "Transparent" a "{ThemeResource ApplicationPageBackgroundThemeBrush}".
• En TitlePanel, cambie la referencia a TitleTextBlockStyle (que ahora es un poco demasiado grande) a una referencia a CaptionTextBlockStyle. PageTitleTextBlockStyle es otra Bookstore1_81 direccionamiento indirecto que ya no necesitamos. Cambie eso para hacer referencia HeaderTextBlockStyle en su lugar.
• Ya no es necesario establecer ningún Background, Style ni ItemContainerStyle especiales en listBox, por lo que simplemente elimine esos tres atributos y sus valores del marcado. No obstante, queremos ocultar el borde de ListBox, por lo que agregarloBorderBrush="{x:Null}".
• Ya no hacemos referencia a ninguno de los recursos del archivo BookstoreStyles.xaml ResourceDictionary . Puede eliminar todos esos recursos. Pero, no elimines el propio archivo BookstoreStyles.xaml: todavía tenemos un último uso para él, como verás en la sección siguiente.

Esa última secuencia de operaciones de estilo deja que la aplicación tenga este aspecto.

La aplicación de Windows 10 casi migrada que se ejecuta en un dispositivo de escritorio

La aplicación de Windows 10 casi migrada que se ejecuta en un dispositivo móvil

Un ajuste opcional en el cuadro de lista para dispositivos móviles

Cuando la aplicación se ejecuta en un dispositivo móvil, el fondo de un cuadro de lista es claro de forma predeterminada en ambos temas. Ese puede ser el estilo que prefieras y, si es así, no hay nada más que hacer excepto ordenar: elimina el archivo de diccionario de recursos BookstoreStyles.xaml del proyecto y quita el marcado que lo combina en MainPage.xaml.

Sin embargo, los controles están diseñados para que pueda personalizar su aspecto mientras deja su comportamiento sin verse afectado. Por lo tanto, si quieres que el cuadro de lista esté oscuro en el tema oscuro (la forma en que se veía la aplicación original), esta sección describe una manera de hacerlo.

El cambio que realizamos solo necesita afectar a la aplicación cuando se ejecuta en dispositivos móviles. Por lo tanto, usaremos un estilo de cuadro de lista muy ligeramente personalizado cuando se ejecute en la familia de dispositivos móviles y continuaremos usando el estilo predeterminado cuando se ejecute en cualquier otra parte. Para ello, realizaremos una copia de BookstoreStyles.xaml y le asignaremos un nombre especial con MRT, lo que hará que se cargue solo en dispositivos móviles.

Agregue un nuevo elemento de proyecto ResourceDictionary y asígnele el nombre BookstoreStyles.DeviceFamily-Mobile.xaml. Ahora tienes dos archivos cuyo nombre lógico es BookstoreStyles.xaml (y ese es el nombre que usas en el marcado y el código). Sin embargo, los archivos tienen nombres físicos diferentes, por lo que pueden contener marcados diferentes. Puedes usar este esquema de nomenclatura completo de MRT con cualquier archivo xaml, pero ten en cuenta que todos los archivos xaml con el mismo nombre lógico comparten un único archivo de código subyacente de xaml.cs (si es aplicable).

Edite una copia de la plantilla de control para el cuadro de lista y almacénela con la clave de en el nuevo diccionario de BookstoreListBoxStyle recursos, BookstoreStyles.DeviceFamily-Mobile.xaml. Ahora, realizaremos cambios sencillos en tres de los establecedores.

• En el establecedor de primer plano, cambie el valor a "{x:Null}". Tenga en cuenta que establecer una propiedad en "{x:Null}" directamente en un elemento es la misma que establecerla null en en el código. Sin embargo, el uso de un valor de "{x:Null}" en un establecedor tiene un efecto único: invalida el establecedor en el estilo predeterminado (para la misma propiedad) y restaura el valor predeterminado de la propiedad en el elemento de destino.
• En el establecedor fondo, cambie el valor a "Transparent" para quitar ese fondo claro.
• En el establecedor de plantillas, busque el estado visual denominado Focused y elimine su Guión gráfico, convirtiéndolo en una etiqueta vacía.
• Elimine todos los demás establecedores del marcado.

Por último, copie BookstoreListBoxStyle en BookstoreStyles.xaml y elimine sus tres establecedores, lo que lo convierte en una etiqueta vacía. Lo hacemos para que en dispositivos distintos de los móviles, nuestra referencia a BookstoreStyles.xaml y para BookstoreListBoxStyle resolverlo, pero no tendrá ningún efecto.

La aplicación de Windows 10 migrada que se ejecuta en un dispositivo móvil

Conclusión

Este caso práctico mostró el proceso de portabilidad de una aplicación muy sencilla, posiblemente una sencilla. Por ejemplo, se puede usar un cuadro de lista para la selección o para establecer un contexto para la navegación; la aplicación navega a una página con más detalles sobre el elemento que se ha pulsado. Esta aplicación en particular no hace nada con la selección del usuario y no tiene navegación. Incluso así, el caso práctico sirvió para romper el hielo, para introducir el proceso de portabilidad y para demostrar técnicas importantes que puedes usar en aplicaciones para UWP reales.

También hemos visto pruebas de que los modelos de vista de portabilidad suelen ser un proceso suave. La interfaz de usuario y la compatibilidad con factor de forma son aspectos más probables para requerir nuestra atención al migrar.

El siguiente caso práctico es Bookstore2, en el que observamos el acceso y la visualización de datos agrupados.