caso práctico de Windows Phone Silverlight a UWP: Bookstore1

En este tema se presenta un caso práctico de migración de una aplicación de Silverlight de Windows Phone muy sencilla a una aplicación de Windows 10 Plataforma universal de Windows (UWP). 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 para seleccionar un control de versiones de la plataforma de destino en TargetPlatformVersion.

Descargas

Descargue la aplicación Bookstore1WPSL8 Windows Phone Silverlight.

Descargue la aplicación Bookstore1Universal_10 Windows 10.

La aplicación Windows Phone Silverlight

Este es el aspecto de Bookstore1WPSL8, la aplicación que vamos a portar. 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.

Migración a un proyecto de Windows 10

Es una tarea muy rápida crear un nuevo proyecto en Visual Studio, copiar archivos en él desde Bookstore1WPSL8 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 Bookstore1WPSL8 a Bookstore1Universal_10.

• 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, 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.

Podemos mantener App.xaml y App.xaml.cs que Visual Studio generó para nosotros en el proyecto de Windows 10.

Edite el código fuente y los archivos de marcado que acaba de copiar y cambie las referencias al espacio de nombres Bookstore1WPSL8 a Bookstore1Universal_10. Una manera rápida de hacerlo es usar la característica Reemplazar en archivos . En el código imperativo del archivo de origen del modelo de vista, estos cambios de portabilidad son necesarios:

• Cambie System.ComponentModel.DesignerProperties a y, a DesignMode continuación, use el comando Resolver en él. Elimine la IsInDesignTool propiedad y use IntelliSense para agregar el nombre de propiedad correcto: DesignModeEnabled.
• Use el comando Resolver en ImageSource.
• Use el comando Resolver en BitmapImage.
• Elimine mediante System.Windows.Media; y using System.Windows.Media.Imaging;.
• Cambie el valor devuelto por la propiedad Bookstore1Universal_10.BookstoreViewModel.AppName de "BOOKSTORE1WPSL8" a "BOOKSTORE1UNIVERSAL".

En MainPage.xaml, estos cambios de portabilidad son necesarios:

• Cambie phone:PhoneApplicationPage a Page (no olvide las apariciones en la sintaxis del elemento de propiedad).
• Elimine las phone declaraciones de prefijo de espacio de nombres y shell .
• Cambie "clr-namespace" a "using" en la declaración de prefijo del espacio de nombres restante.

Podemos optar por corregir errores de compilación de marcado muy baratos si queremos ver los resultados más pronto, incluso si eso significa quitar temporalmente el marcado. Pero vamos a mantener un registro de la deuda que acumulamos haciendo esto. Aquí está en este caso.

1. En el elemento Page raíz de MainPage.xaml, elimine SupportedOrientations="Portrait".
2. En el elemento Page raíz de MainPage.xaml, elimine Orientation="Portrait".
3. En el elemento Page raíz de MainPage.xaml, elimine shell:SystemTray.IsVisible="True".
4. En la BookTemplate plantilla de datos, elimine las referencias a los PhoneTextExtraLargeStyle estilos y PhoneTextSubtleStyleTextBlock .
5. TitlePanelEn StackPanel, elimine las referencias a los PhoneTextNormalStyle estilos yPhoneTextTitle1Style TextBlock.

Vamos a trabajar primero en la interfaz de usuario de la familia de dispositivos móviles y podemos considerar otros factores de forma después de eso. Ahora puede compilar y ejecutar la aplicación. Así es como se ve en el emulador móvil.

La vista y el modelo de vista funcionan correctamente y listBox funciona correctamente. Principalmente solo necesitamos corregir el estilo y obtener las imágenes para que aparezcan.

Pagar los artículos de deuda y algunos estilos iniciales

De forma predeterminada, se admiten todas las orientaciones. Sin embargo, la aplicación Windows Phone Silverlight se restringe explícitamente a solo vertical, por lo que los elementos de deuda n.º 1 y #2 se pagan al ir al manifiesto del paquete de la aplicación en el nuevo proyecto y comprobar Vertical en Orientaciones admitidas.

Para esta aplicación, el elemento 3 no es una deuda, ya que la barra de estado (anteriormente denominada bandeja del sistema) se muestra de forma predeterminada. Para los elementos n.º 4 y #5, necesitamos encontrar cuatro estilos textBlock de Plataforma universal de Windows (UWP) que corresponden a los estilos de Windows Phone Silverlight que usamos. Puede ejecutar la aplicación Windows Phone Silverlight en el emulador y compararla en paralelo con la ilustración de la sección Texto . A partir de ello, y desde la vista de las propiedades de los estilos del sistema Windows Phone Silverlight, podemos hacer esta tabla.

clave de estilo Windows Phone Silverlight	Clave de estilo de UWP
PhoneTextExtraLargeStyle	TitleTextBlockStyle
PhoneTextSubtleStyle	SubtitleTextBlockStyle
PhoneTextNormalStyle	CaptionTextBlockStyle
PhoneTextTitle1Style	HeaderTextBlockStyle

Para establecer esos estilos, puedes escribirlos en el editor de marcado o puedes usar las Herramientas XAML de Visual Studio y establecerlos sin escribir nada. Para ello, haga clic con el botón derecho en textBlock y haga clic en Editar aplicar recurso de estilo>. Para hacerlo con TextBlock en la plantilla de elemento, haga clic con el botón derecho en listBox y haga clic en Editar plantillas>adicionales Editar elementos generados (ItemTemplate) .

Hay un fondo blanco opaco del 80 % detrás de los elementos, ya que el estilo predeterminado del control ListBox establece su fondo en el recurso del ListBoxBackgroundThemeBrush sistema. Establezca Background="Transparent" en listBox para borrar ese fondo. Para alinear a la izquierda los textBlocken la plantilla de elemento, edítelo de nuevo de la misma manera que se describió anteriormente y establezca un margen de "9.6,0" en ambos TextBlock.

Una vez hecho esto, debido a los cambios relacionados con los píxeles de vista, es necesario recorrer y multiplicar cualquier dimensión de tamaño fijo que aún no hemos cambiado (márgenes, ancho, alto, etcetera) en 0,8. Por lo tanto, por ejemplo, las imágenes deben cambiar de 70x70px a 56x56px.

Sin embargo, vamos a obtener esas imágenes que se van a representar antes de mostrar los resultados de nuestro estilo.

Enlazar una imagen a un modelo de vista

En Bookstore1WPSL8, hicimos esto:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

En Bookstore1Universal, usamos el esquema de URI ms-appx. Para que podamos mantener el resto del código igual, podemos usar una sobrecarga diferente del constructor System.Uri para colocar el esquema URI ms-appx en un URI base y anexar el resto de la ruta de acceso a ese. Por ejemplo:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

Estilo universal

Ahora, solo tenemos que hacer algunos ajustes finales de estilo y confirmar que la aplicación se ve bien en el escritorio (y otros) factores de forma, así como móviles. 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 el Margin atributo de la cuadrícula raíz.
• Si desea dar un poco más de espacio de respiración al título de la página, puede restablecer el margen inferior de -5.6 a 0 en el título de página TextBlock.
• 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}".

Con una aplicación más sofisticada, este sería el punto en el que usaríamos las instrucciones de Migración para el factor de forma y la experiencia del usuario, y realmente hacer un uso óptimo del factor de forma de cada uno de los muchos dispositivos en los que la aplicación ahora se puede ejecutar. Sin embargo, para esta aplicación sencilla, podemos detenernos aquí y ver cómo se ve la aplicación después de esa última secuencia de operaciones de estilo. En realidad, parece lo mismo en dispositivos móviles y de escritorio, aunque no se hace mejor uso del espacio en factores de forma ancha (pero investigaremos cómo hacerlo en un caso práctico posterior).

Consulta Cambios de tema para ver cómo controlar el tema de la aplicación.

La aplicación de Windows 10 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. Eso puede ser el estilo que prefiera y, si es así, no hay nada más que hacer. 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 parecía la aplicación original, sigue estas instrucciones en "Un ajuste opcional".

Conclusión

Este caso práctico mostró el proceso de portabilidad de una aplicación muy sencilla, posiblemente una sencilla. Por ejemplo, los controles de lista se pueden usar 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.

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