Caso práctico de Windows Runtime 8.x a UWP: Bookstore2Windows Runtime 8.x to UWP case study: Bookstore2

Este caso práctico, que se basa en la información proporcionada en Bookstore1, comienza con una aplicación Universal 8.1 que muestra datos agrupados en un control SemanticZoom.This case study—which builds on the info given in Bookstore1—begins with a Universal 8.1 app that displays grouped data in a SemanticZoom control. En el modelo de vista, cada instancia de la clase Author representa el grupo de los libros que ha escrito ese autor y en SemanticZoom podemos ver la lista de libros agrupados por autor, o bien podemos alejar la vista para ver una lista de accesos directos a autores.In the view model, each instance of the class Author represents the group of the books written by that author, and in the SemanticZoom, we can either view the list of books grouped by author or we can zoom out to see a jump list of authors. La lista de accesos directos ofrece una navegación mucho más rápida que un desplazamiento por la lista de libros.The jump list affords much quicker navigation than scrolling through the list of books. Repasaremos los pasos de migración de la aplicación a la Plataforma universal de Windows (UWP) de Windows 10.We walk through the steps of porting the app to a Windows 10 Universal Windows Platform (UWP) app.

Nota:    Al abrir Bookstore2Universal _ 10 en Visual Studio, si ve el mensaje "se requiere la actualización de Visual Studio", siga los pasos de TargetPlatformVersion.Note   When opening Bookstore2Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps in TargetPlatformVersion.

DescargasDownloads

Descargue la _ aplicación Bookstore2 81 universal 8,1.Download the Bookstore2_81 Universal 8.1 app.

Descargue la _ aplicación Bookstore2Universal 10 de Windows 10.Download the Bookstore2Universal_10 Windows 10 app.

Aplicación Universal 8.1The Universal 8.1 app

Este es _ el aspecto de Bookstore2 81 (la aplicación que vamos a migrar).Here’s what Bookstore2_81—the app that we're going to port—looks like. Es un SemanticZoom de desplazamiento horizontal (desplazamiento vertical en Windows Phone) que muestra libros agrupados por autor.It's a horizontally-scrolling (vertically-scrolling on Windows Phone) SemanticZoom showing books grouped by author. Puedes alejar la lista de accesos directos y, desde allí, puedes navegar a cualquier grupo.You can zoom out to the jump list and from there you can navigate back into any group. Existen dos elementos principales en esta aplicación: el modelo de vista que proporciona el origen de datos agrupados y la interfaz de usuario que se enlaza a ese modelo de vista.There are two main pieces to this app: the view model that provides the grouped data source, and the user interface that binds to that view model. Como se verá, ambas partes se pueden portar fácilmente de la tecnología de WinRT 8.1 a Windows 10.As we'll see, both of these pieces port easily from WinRT 8.1 technology to Windows 10.

bookstore2 - 81 en Windows, vista ampliada

Bookstore2 _ 81 en Windows, vista ampliadaBookstore2_81 on Windows, zoomed-in view

bookstore2 - 81 en Windows, vista alejada

Bookstore2 _ 81 en Windows, vista alejadaBookstore2_81 on Windows, zoomed-out view

bookstore2 - 81 en Windows Phone, vista ampliada

Bookstore2 _ 81 en Windows Phone, vista ampliadaBookstore2_81 on Windows Phone, zoomed-in view

bookstore2 - 81 en Windows Phone, vista alejada

Bookstore2 _ 81 en Windows Phone, vista alejadaBookstore2_81 on Windows Phone, zoomed-out view

Migración a un proyecto de Windows 10Porting to a Windows 10 project

La _ solución Bookstore2 81 es un proyecto de aplicación universal de 8,1.The Bookstore2_81 solution is an 8.1 Universal App project. El _ proyecto bookstore2 81. Windows compila el paquete de la aplicación para Windows 8.1 y el _ proyecto bookstore2 81. windowsphone compila el paquete de la aplicación para Windows Phone 8,1.The Bookstore2_81.Windows project builds the app package for Windows 8.1, and the Bookstore2_81.WindowsPhone project builds the app package for Windows Phone 8.1. Bookstore2 _ 81. Shared es el proyecto que contiene el código fuente, los archivos de marcado y otros activos y recursos que se usan en los dos proyectos.Bookstore2_81.Shared is the project that contains source code, markup files, and other assets and resources, that are used by both of the other two projects.

Al igual que con el caso práctico anterior, la opción que elegiremos (de las que se describen en Si tienes una aplicación Universal 8.1) es portar el contenido del proyecto compartido a una aplicación de Windows 10 que tiene como destino la familia de dispositivos universales.Just like with the previous case study, the option we'll take (of the ones described in If you have a Universal 8.1 app) is to port the contents of the Shared project to a Windows 10 that targets the Universal device family.

Comienza creando un proyecto nuevo de Aplicación vacía (Windows Universal).Begin by creating a new Blank Application (Windows Universal) project. Asígnele el nombre Bookstore2Universal _ 10.Name it Bookstore2Universal_10. Estos son los archivos que se van a copiar de Bookstore2 _ 81 a Bookstore2Universal _ 10.These are the files to copy over from Bookstore2_81 to Bookstore2Universal_10.

Desde el proyecto compartidoFrom the Shared project

  • Copie la carpeta que contiene los archivos PNG de la imagen de la portada del libro (la carpeta es \ assets \ CoverImages).Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). Después de copiar la carpeta, en el Explorador de soluciones, asegúrate de que Mostrar todos los archivos esté activado.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. Haz clic con el botń secundario en la carpeta que has copiado y haz clic en Incluir en el proyecto.Right-click the folder that you copied and click Include In Project. Este comando es lo que conocemos como "incluir" archivos o carpetas en un proyecto.That command is what we mean by "including" files or folders in a project. Cada vez que se copia un archivo o carpeta, haz clic en Actualizar en el Explorador de soluciones y, a continuación, incluye el archivo o carpeta en el proyecto.Each time you copy a file or folder, each copy, click Refresh in Solution Explorer and then include the file or folder in the project. No es necesario hacer esto para los archivos que reemplaces en el destino.There's no need to do this for files that you're replacing in the destination.
  • Copie la carpeta que contiene el archivo de origen del modelo de vista (la carpeta es \ ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • Copia MainPage.xaml y reemplaza el archivo en el destino.Copy MainPage.xaml and replace the file in the destination.

Del proyecto de WindowsFrom the Windows project

  • Copia BookstoreStyles.xaml.Copy BookstoreStyles.xaml. Usaremos este como un punto de partida adecuado porque todas las claves de recurso de este archivo se resolverán en una aplicación de Windows 10; no lo harán algunas de las que están en el archivo equivalente de Windows Phone.We'll use this one as a good starting-point because all the resource keys in this file will resolve in a Windows 10 app; some of those in the equivalent WindowsPhone file will not.
  • Copia SeZoUC.xaml y SeZoUC.xaml.cs.Copy SeZoUC.xaml and SeZoUC.xaml.cs. Comenzaremos con la versión de Windows de esta vista, que es adecuada para ventanas anchas y, después, haremos se adapte a ventanas más pequeñas (y por tanto a los dispositivos más pequeños).We'll start with the Windows version of this view, which is appropriate for wide windows, and then later we'll make it adapt to smaller windows and, consequently, smaller devices.

Edite los archivos de código fuente y de marcado que acaba de copiar y cambie las referencias al _ espacio de nombres Bookstore2 81 a Bookstore2Universal _ 10.Edit the source code and markup files that you just copied and change any references to the Bookstore2_81 namespace to Bookstore2Universal_10. Una forma rápida de hacerlo es usar la función Reemplazar en archivos.A quick way to do that is to use the Replace In Files feature. No es necesario hacer cambios de código en el modelo de vista ni en ningún otro código imperativo.No code changes are needed in the view model, nor in any other imperative code. No obstante, 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 Bookstore2Universal _ 10. BookstoreViewModel. appname de "Bookstore2 _ 81" a "Bookstore2Universal _ 10".But, just to make it easier to see which version of the app is running, change the value returned by the Bookstore2Universal_10.BookstoreViewModel.AppName property from "Bookstore2_81" to "BOOKSTORE2UNIVERSAL_10".

Ahora ya se puede compilar y ejecutar.Right now, you can build and run. Este es el aspecto de nuestra nueva aplicación para UWP sin haber realizado aún ningún trabajo para portarla a Windows 10.Here's how our new UWP app looks after having done no work yet to port it to Windows 10.

la aplicación para windows 10 con cambios del código fuente inicial ejecutándose en un dispositivo de escritorio, vista ampliada

La aplicación de Windows 10 con los cambios de código fuente iniciales en ejecución en un dispositivo de escritorio, vista ampliadaThe Windows 10 app with initial source code changes running on a Desktop device, zoomed-in view

la aplicación para windows 10 con cambios del código fuente inicial ejecutándose en un dispositivo de escritorio, vista alejada

La aplicación de Windows 10 con los cambios de código fuente iniciales en ejecución en un dispositivo de escritorio, vista alejadaThe Windows 10 app with initial source code changes running on a Desktop device, zoomed-out view

El modelo de vista y las vistas acercada y alejada funcionan juntos correctamente, aunque hay problemas que hacen que sea un poco difícil de ver.The view model and the zoomed-in and zoomed-out views are working together correctly, although there are issues that make that a little hard to see. Un problema es que SemanticZoom no se desplaza.One issue is that the SemanticZoom doesn't scroll. Esto se debe a que, en Windows 10, el estilo predeterminado de un GridView hace que la disposición sea vertical (y las directrices de diseño de Windows 10 recomiendan que se use de esta manera en aplicaciones nuevas y portadas).This is because, in Windows 10, the default style of a GridView causes it to be laid out vertically (and the Windows 10 design guidelines recommend that we use it that way in new and in ported apps). Sin embargo, la configuración de desplazamiento horizontal de la plantilla del panel de elementos personalizados que copiamos del _ proyecto Bookstore2 81 (que se diseñó para la aplicación 8,1) entra en conflicto con la configuración de desplazamiento vertical en el estilo predeterminado de Windows 10 que se aplica como resultado de haber migrado a una aplicación de Windows 10.But, horizontal scrolling settings in the custom items panel template that we copied from the Bookstore2_81 project (which was designed for the 8.1 app) are in conflict with vertical scrolling settings in the Windows 10 default style that is being applied as a result of us having ported to a Windows 10 app. Una segunda cuestión es que la aplicación aún no adapta su interfaz de usuario para que ofrezca la mejor experiencia en distintos tamaños de ventanas y en dispositivos pequeños.A second thing is that the app doesn't yet adapt its user-interface to give the best experience in different-sized windows and on small devices. Y en tercer lugar, los estilos y pinceles correctos aún no se usan, lo que provoca que gran parte del texto sea invisible (incluidos los encabezados de grupo en los que puede hacer clic para alejar).And, thirdly, the correct styles and brushes are not yet being used, resulting in much of the text being invisible (including the group headers that you can click to zoom out). Por tanto, en las siguientes tres secciones (Cambios de diseño de SemanticZoom y GridView, Interfaz de usuario adaptativa y Estilos universales) se solucionarán los tres problemas.So, in the next three sections (SemanticZoom and GridView design changes, Adaptive UI, and Universal styling) we'll remedy those three issues.

Cambios de diseño de SemanticZoom y GridViewSemanticZoom and GridView design changes

Los cambios de diseño en Windows 10 del control SemanticZoom se describen en la sección Cambios de SemanticZoom.The design changes in Windows 10 to the SemanticZoom control are described in the section SemanticZoom changes. No es necesario realizar ningún trabajo en esta sección en respuesta a esos cambios.We have no work to do in this section in response to those changes.

Los cambios realizados a GridView se describen en la sección Cambios de GridView/ListView.The changes to GridView are described in the section GridView/ListView changes. Hay que realizar algunos pequeños ajustes para adaptarse a esos cambios, como se describe a continuación.We have some very minor adjustments to make to adapt to those changes, as described below.

  • En SeZoUC.xaml, en ZoomedInItemsPanelTemplate, establece Orientation="Horizontal" y GroupPadding="0,0,0,20".In SeZoUC.xaml, in ZoomedInItemsPanelTemplate, set Orientation="Horizontal" and GroupPadding="0,0,0,20".
  • En SeZoUC.xaml, elimina ZoomedOutItemsPanelTemplate y quitar el atributo ItemsPanel de la vista alejada.In SeZoUC.xaml, delete ZoomedOutItemsPanelTemplate and remove the ItemsPanel attribute from the zoomed-out view.

Y listo.And that's it!

Interfaz de usuario adaptativaAdaptive UI

Después de ese cambio, el diseño de la interfaz de usuario que proporciona SeZoUC.xaml es ideal cuando la aplicación se ejecuta en una ventana ancha (que solo es posible en un dispositivo con una pantalla grande).After that change, the UI layout that SeZoUC.xaml gives us is great for when the app is running in a wide window (which is only possible on a device with a large screen). Sin embargo, cuando la ventana de la aplicación es estrecha (que sucede en un dispositivo pequeño y también puede ocurrir en un dispositivo de gran tamaño), la interfaz de usuario que teníamos en la aplicación de la Tienda de Windows Phone es posiblemente más apropiada.When the app's window is narrow, though (which happens on a small device, and can also happen on a large device), the UI that we had in the Windows Phone Store app is arguably most appropriate.

Se puede usar la función adaptativa de Visual State Manager para lograr esto.We can use the adaptive Visual State Manager feature to achieve this. Estableceremos las propiedades en los elementos visuales para que, de manera predeterminada, la interfaz de usuario se disponga en el estado estrecho con las plantillas más pequeñas que estábamos usando en la aplicación de la Tienda de Windows Phone.We'll set properties on visual elements so that, by default, the UI is laid out in the narrow state using the smaller templates that we were using in the Windows Phone Store app. A continuación, detectaremos cuando la ventana de la aplicación es mayor o igual a un tamaño específico (que se mide en unidades de píxeles funcionales) y, como respuesta, cambiaremos las propiedades de los elementos visuales para obtener un diseño más grande y ancho.Then, we'll detect when the app's window is wider-than-or-equal-to a specific size (measured in units of effective pixels), and in response, we'll change the properties of visual elements so that we get a larger, and wider, layout. Colocaremos esos cambios de propiedades en un estado visual y usaremos un desencadenador adaptable para supervisar de forma continua y determinar si se aplica ese estado visual o no, según el ancho de la ventana en píxeles efectivos.We'll put those property changes in a visual state, and we'll use an adaptive trigger to continuously monitor and determine whether to apply that visual state, or not, depending on the width of the window in effective pixels. Estamos activando el ancho de la ventana en este caso, pero también es posible activar el alto de la ventana.We're triggering on window width in this case, but it's possible to trigger on window height, too.

Un ancho mínimo de 548 píxeles efectivos es apropiado para este caso práctico porque es el tamaño del dispositivo más pequeño en el que queremos mostrar el diseño.A minimum window width of 548 epx is appropriate for this use case because that's the size of the smallest device we would want to show the wide layout on. Los teléfonos son normalmente tienen menos de 548 píxeles efectivos y, por ese motivo, en un dispositivo pequeño como ese, se conservará el diseño estrecho de forma predeterminada.Phones are typically smaller than 548 epx so on a small device like that we'd remain in the default narrow layout. En un equipo, se iniciará la ventana de forma predeterminada con un ancho suficiente para desencadenar el cambio al estado ancho.On a PC, the window will launch by default wide enough to trigger the switch to the wide state. Desde allí podrás arrastrar la ventana estrecha lo suficiente para mostrar dos columnas de elementos con un tamaño de 250 x 250.From there, you'll be able to drag the window narrow enough to display two columns of the 250x250-sized items. Si se hace un poco más estrecha que eso, el desencadenador se desactivará, se quitará el estado visual ancho y se mostrará el diseño estrecho predeterminado.A little narrower than that and the trigger will deactivate, the wide visual state will be removed, and the default narrow layout will be in effect.

Por tanto, ¿qué propiedades es necesario establecer (y cambiar) para lograr estos dos diseños diferentes?So, what properties do we need to set—and change—to achieve these two different layouts? Hay dos alternativas y cada una usa un enfoque diferente.There are two alternatives and each entails a different approach.

  1. Podemos incluir dos controles SemanticZoom en nuestro marcado.We can put two SemanticZoom controls in our markup. Uno sería una copia del marcado que usamos en la aplicación Windows Runtime 8. x (con controles GridView dentro de él) y contraída de forma predeterminada.One would be a copy of the markup that we were using in the Windows Runtime 8.x app (using GridView controls inside it), and collapsed by default. El otro sería una copia del marcado que estábamos usando en la aplicación de la Tienda de Windows Phone (con controles ListView en su interior) y contraído de manera predeterminada.The other would be a copy of the markup that we were using in the Windows Phone Store app (using ListView controls inside it), and visible by default. El estado visual podría cambiar las propiedades de visibilidad de los dos controles SemanticZoom.The visual state would switch the visibility properties of the two SemanticZoom controls. Se requeriría muy poco esfuerzo para lograrlo, pero en general no se trata de una técnica de alto rendimiento.This would require very little effort to achieve but this not, in general, a high-performance technique. Por tanto, si la usas, deberías generar perfiles de la aplicación y asegurarte de que aún se cumplen los objetivos de rendimiento.So, if you use it, you should profile your app and make sure it is still meeting your performance goals.
  2. Podemos usar un único SemanticZoom que contenga controles ListView.We can use a single SemanticZoom containing ListView controls. Para lograr los dos diseños, en el estado visual ancho, se deben cambiar las propiedades de los controles ListView, incluidas las plantillas que se aplican a estos, para que se dispongan de la misma forma que GridView.To achieve our two layouts, in the wide visual state, we would change the properties of the ListView controls, including the templates that are applied to them, to cause them to lay out in the same way as a GridView does. Esto puede funcionar mejor, pero hay tantas diferencias pequeñas entre los distintos estilos y plantillas de GridView y ListView, y entre sus diversos tipos de elementos, que es la solución más difícil de lograr.This might perform better, but there are so many small differences between the various styles and templates of GridView and ListView and between their various item types that this is the more difficult solution to achieve. Esta solución también está estrechamente relacionada con la manera en que las plantillas y los estilos predeterminados están diseñados en este momento, lo que nos da una solución que es frágil y sensible a cualquier cambio posterior de los valores predeterminados.This solution is also tightly coupled to the way the default styles and templates are designed at this moment in time, giving us a solution that's fragile and sensitive to any future changes to the defaults.

En este caso práctico, aplicaremos la primera alternativa.In this case study, we're going to go with the first alternative. Pero si lo prefieres, puedes probar la segunda y ver si funciona mejor en tu caso.But, if you like, you can try the second one and see if that works better for you. Estos son los pasos que se deben seguir para implementar la primera alternativa.Here are the steps to take to implement that first alternative.

  • En el SemanticZoom en el marcado del nuevo proyecto, establece x:Name="wideSeZo" y Visibility="Collapsed".On the SemanticZoom in the markup in your new project, set x:Name="wideSeZo" and Visibility="Collapsed".
  • Vuelva al _ proyecto Bookstore2 81. windowsphone y abra SeZoUC. Xaml.Go back to the Bookstore2_81.WindowsPhone project and open SeZoUC.xaml. Copia el marcado del elemento SemanticZoom fuera de ese archivo y pégalo inmediatamente después de wideSeZo en el nuevo proyecto.Copy the SemanticZoom element markup out of that file and paste it immediately after wideSeZo in your new project. Establece x:Name="narrowSeZo" en el elemento que acabas de pegar.Set x:Name="narrowSeZo" on element that you just pasted.
  • Pero narrowSeZo necesita un par de estilos que aún no hemos copiado.But narrowSeZo needs a couple of styles that we haven't copied yet. De nuevo en Bookstore2 _ 81. windowsphone, copie los dos estilos ( AuthorGroupHeaderContainerStyle y ZoomedOutAuthorItemContainerStyle ) de SeZoUC. XAML y péguelos en BookstoreStyles. XAML en el nuevo proyecto.Again in Bookstore2_81.WindowsPhone, copy the two styles (AuthorGroupHeaderContainerStyle and ZoomedOutAuthorItemContainerStyle) out of SeZoUC.xaml and paste them into BookstoreStyles.xaml in your new project.
  • Ahora tienes dos elementos SemanticZoom en el nuevo archivo SeZoUC.xaml.You now have two SemanticZoom elements in your new SeZoUC.xaml. Encapsula los dos elementos en un Grid.Wrap those two elements in a Grid.
  • En el archivo BookstoreStyles.xaml del nuevo proyecto, anexa la palabra Wide a estas tres claves de recursos (y a sus referencias en SeZoUC.xaml, pero solo para las referencias dentro de wideSeZo): AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate y BookTemplate.In BookstoreStyles.xaml in your new project, append the word Wide to these three resource keys (and to their references in SeZoUC.xaml, but only to the references inside wideSeZo): AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate, and BookTemplate.
  • En el _ proyecto Bookstore2 81. windowsphone, abra BookstoreStyles. Xaml.In the Bookstore2_81.WindowsPhone project, open BookstoreStyles.xaml. En este archivo, copie los mismos tres recursos (mencionados anteriormente) y los dos convertidores de elementos de Jump List, y la declaración de prefijo de espacio de nombres _ elementos primitivos de la interfaz de usuario de Windows de Windows UI _ _ _ y péguelos en BookstoreStyles. XAML en el nuevo proyecto.From this file, copy those same three resources (mentioned above), and the two jump list item converters, and the namespace prefix declaration Windows_UI_Xaml_Controls_Primitives, and paste them all into BookstoreStyles.xaml in your new project.
  • Por último, en el archivo SeZoUC.xaml del nuevo proyecto, agrega el marcado de Visual State Manager adecuado para el Grid que agregaste anteriormente.Finally, in SeZoUC.xaml in your new project, add the appropriate Visual State Manager markup to the Grid that you added above.
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    ...

    </Grid>

Estilos universalesUniversal styling

Ahora vamos a corregir algunos problemas de estilos, incluido uno que presentamos anteriormente mientras se realizaba la copia desde el proyecto antiguo.Now, let's fix up some styling issues, including one that we introduced above while copying from the old project.

  • En MainPage.xaml, cambia el elemento Background de LayoutRoot por "{ThemeResource ApplicationPageBackgroundThemeBrush}".In MainPage.xaml, change LayoutRoot's Background to "{ThemeResource ApplicationPageBackgroundThemeBrush}".
  • En BookstoreStyles.xaml, establece el valor del recurso TitlePanelMargin del recurso en 0 (o cualquier valor que te parezca adecuado).In BookstoreStyles.xaml, set the value of the resource TitlePanelMargin to 0 (or whatever value looks good to you).
  • En SeZoUC.xaml, establece el elemento Margin de wideSeZo a 0 (o cualquier valor que te parezca adecuado).In SeZoUC.xaml, set the Margin of wideSeZo to 0 (or whatever value looks good to you).
  • En BookstoreStyles.xaml, quita el atributo Margin de AuthorGroupHeaderTemplateWide.In BookstoreStyles.xaml, remove the Margin attribute from AuthorGroupHeaderTemplateWide.
  • Quita el atributo FontFamily de AuthorGroupHeaderTemplate y de ZoomedOutAuthorTemplate.Remove the FontFamily attribute from AuthorGroupHeaderTemplate and from ZoomedOutAuthorTemplate.
  • Bookstore2 _ 81 usaba las BookTemplateTitleTextBlockStyle BookTemplateAuthorTextBlockStyle claves de recursos, y PageTitleTextBlockStyle como direccionamiento indirecto para que una sola clave tuviera implementaciones diferentes en las dos aplicaciones.Bookstore2_81 used the BookTemplateTitleTextBlockStyle, BookTemplateAuthorTextBlockStyle, and PageTitleTextBlockStyle resource keys as an indirection so that a single key had different implementations in the two apps. Ya no necesitamos el direccionamiento indirecto; podemos hacer referencia a estilos del sistema directamente.We don't need that indirection any more; we can just reference system styles directly. Por lo tanto, reemplaza las referencias de toda la aplicación por TitleTextBlockStyle, CaptionTextBlockStyle y HeaderTextBlockStyle, respectivamente.So, replace those references throughout the app with TitleTextBlockStyle, CaptionTextBlockStyle, and HeaderTextBlockStyle respectively. Puedes usar la función Reemplazar en archivos de Visual Studio para hacerlo de forma rápida y precisa.You can use the Visual Studio Replace In Files feature to do this quickly and accurately. Puedes eliminar esos tres recursos no usados.You can then delete those three unused resources.
  • En AuthorGroupHeaderTemplate, reemplaza PhoneAccentBrush por SystemControlBackgroundAccentBrush y establece Foreground="White" en TextBlock, de modo que se vea correctamente cuando se ejecute en la familia de dispositivos móviles.In AuthorGroupHeaderTemplate, replace PhoneAccentBrush with SystemControlBackgroundAccentBrush, and set Foreground="White" on the TextBlock so that it looks correct when running on the mobile device family.
  • En BookTemplateWide, copia el atributo Foreground del segundo TextBlock en el primero.In BookTemplateWide, copy the Foreground attribute from the second TextBlock to the first.
  • En ZoomedOutAuthorTemplateWide, cambia la referencia a SubheaderTextBlockStyle (que ahora es un poco grande) a una referencia a SubtitleTextBlockStyle.In ZoomedOutAuthorTemplateWide, change the reference to SubheaderTextBlockStyle (which is now a little too big) to a reference to SubtitleTextBlockStyle.
  • La vista alejada (la lista de accesos directos) ya no se superpone a la vista ampliada en la nueva plataforma, por lo que es posible quitar el atributo Background de la vista alejada de narrowSeZo.The zoomed-out view (the jump list) no longer overlays the zoomed-in view in the new platform, so we can remove the Background attribute from the zoomed-out view of narrowSeZo.
  • Para que todos los estilos y plantillas estén en un archivo, mueva ZoomedInItemsPanelTemplate fuera de SeZoUC.xaml y dentro de BookstoreStyles.xaml.So that all the styles and templates are in one file, move ZoomedInItemsPanelTemplate out of SeZoUC.xaml and into BookstoreStyles.xaml.

La última secuencia de operaciones de estilo deja la aplicación con la apariencia siguiente.That last sequence of styling operations leaves the app looking like this.

la aplicación de Windows 10 portada ejecutándose en un dispositivo de escritorio, con vista ampliada y dos tamaños de ventana

La aplicación de Windows 10 portada ejecutándose en un dispositivo de escritorio, con vista ampliada y dos tamaños de ventanaThe ported Windows 10 app running on a Desktop device, zoomed-in view, two sizes of window

la aplicación de Windows 10 portada ejecutándose en un dispositivo de escritorio, con vista alejada y dos tamaños de ventana

La aplicación de Windows 10 portada ejecutándose en un dispositivo de escritorio, con vista alejada y dos tamaños de ventanaThe ported Windows 10 app running on a Desktop device, zoomed-out view, two sizes of window

la aplicación de Windows 10 portada ejecutándose en un dispositivo móvil, con vista ampliada

La aplicación de Windows 10 migrada que se ejecuta en un dispositivo móvil, vista ampliadaThe ported Windows 10 app running on a Mobile device, zoomed-in view

la aplicación de Windows 10 portada ejecutándose en un dispositivo móvil, con vista alejada

La aplicación de Windows 10 migrada que se ejecuta en un dispositivo móvil, vista alejadaThe ported Windows 10 app running on a Mobile device, zoomed-out view

ConclusiónConclusion

En este caso práctico se ha observado una interfaz de usuario más ambiciosa que la anterior.This case study involved a more ambitious user interface than the previous one. Al igual que con el caso práctico anterior, este modelo de vista particular no requirió ningún trabajo y nuestros esfuerzos se centraron principalmente en la refactorización de la interfaz de usuario.As with the previous case study, this particular view model required no work at all, and our efforts went primarily into refactoring the user interface. Algunos de los cambios fueron el resultado necesario de combinar dos proyectos en uno, mientras se admitían muchos factores de forma (de hecho, muchos más de los que antes se podían).Some of the changes were a necessary result of combining two projects into one while still supporting many form factors (in fact, many more than we could before). Algunos de los cambios estuvieron relacionados con los cambios realizados en la plataforma.A few of the changes were to do with changes that have been made to the platform.

El siguiente caso práctico es QuizGame, en el que vamos a ver cómo mostrar datos agrupados y obtener acceso a ellos.The next case study is QuizGame, in which we look at accessing and displaying grouped data.