> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-9-la-construccion.-navegacion-y-configuracion-de-usuario/navegando-el-prototipo-hecho-realidad.md). # Navegando. El prototipo hecho realidad En el desarrollo de una aplicación, transformar un prototipo en una realidad funcional es un paso crucial que implica no solo la implementación de funcionalidades, sino también asegurar que la experiencia de usuario sea fluida y agradable. Uno de los aspectos más importantes en este proceso es la **navegación** entre las diferentes páginas de la aplicación, así como la transición de los elementos contenidos en cada página. Esto se logra eficazmente utilizando la clase `Transition`, que proporciona una variedad de animaciones y efectos para mejorar la fluidez de la navegación. ## Importancia de la Fluidez en la Navegación La **fluidez de la navegación** se refiere a cómo de suave y natural es el paso de una página a otra dentro de la aplicación. Una navegación fluida mejora significativamente la experiencia del usuario, haciendo que la interacción con la aplicación sea más intuitiva y agradable. Además, las transiciones bien implementadas ayudan a guiar visualmente al usuario, destacando cambios importantes y manteniendo la coherencia visual en toda la aplicación. Para lograr una navegación fluida, es esencial: * **Implementar Transiciones Apropiadas:** Utilizar las transiciones correctas para cada tipo de navegación garantiza que las animaciones sean coherentes y visualmente agradables. * **Optimizar el Rendimiento:** Asegurarse de que las transiciones no afecten negativamente el rendimiento de la aplicación, manteniendo tiempos de carga rápidos y una respuesta inmediata a las interacciones del usuario. * **Mantener la Consistencia Visual:** Aplicar un conjunto consistente de transiciones en toda la aplicación para evitar distracciones y confusiones. ## Tipos de Transiciones A continuación, se presentan las diferentes **transiciones** disponibles en UWP, categorizadas según su uso: **Tabla 02. Tipos de Transiciones** | Tipo | Descripción | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | AddDeleteThemeTransition | Anima la adición y eliminación de elementos en una colección, como al agregar o eliminar ítems de una lista. | | ContentThemeTransition | Aplica animaciones cuando el contenido de un control cambia, proporcionando una transición suave entre diferentes contenidos. | | EdgeUIThemeTransition | Diseñada para animaciones que inician desde los bordes de la pantalla. *No funciona para WP8.1*. | | EntranceThemeTransition | Anima los elementos al entrar en la vista, haciendo que aparezcan de manera gradual. | | PaneThemeTransition | Anima la apertura y cierre de paneles, como menús laterales o paneles deslizantes. | | PopupThemeTransition | Anima la aparición y desaparición de ventanas emergentes o pop-ups. | | ReorderThemeTransition | Anima el reordenamiento de elementos dentro de una colección, útil para drag-and-drop o reordenación de listas. | | RepositionThemeTransition | Anima el cambio de posición de los elementos dentro de una interfaz, proporcionando una transición visualmente coherente. | **Tabla 03. Tipos de Transiciones para Colecciones** | Tipo | Descripción | | ------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | Border.ChildTransitions | Aplica transiciones a los elementos hijos de un `Border`. | | ContentControl.ContentTransitions | Anima cambios en el contenido de un `ContentControl`, como `ContentPresenter`. | | ContentPresenter.ContentTransitions | Similar a `ContentControl.ContentTransitions`, enfocado en `ContentPresenter`. | | ItemsControl.ItemContainerTransitions | Aplica transiciones a los contenedores de ítems en un `ItemsControl`, como `ListView` o `GridView`. | | ItemsPresenter.FooterTransitions | Anima la aparición y desaparición del pie de página en un `ItemsPresenter`. | | ItemsPresenter.HeaderTransitions | Anima la aparición y desaparición del encabezado en un `ItemsPresenter`. | | ListViewBase.FooterTransitions | Aplica transiciones específicas al pie de página de un `ListViewBase`. | | ListViewBase.HeaderTransitions | Aplica transiciones específicas al encabezado de un `ListViewBase`. | | Panel.ChildrenTransitions | Anima los elementos hijos dentro de un `Panel`, como `StackPanel` o `Grid`. | | Popup.ChildTransitions | Aplica transiciones a los elementos hijos de un `Popup`. | | SettingsFlyoutTemplateSettings.ContentTransitions | Anima el contenido dentro de un `SettingsFlyout`. | | UIElement.Transitions | Transiciones genéricas aplicables a cualquier elemento de la interfaz de usuario (`UIElement`). | **Tabla 04. Tipos de Transiciones entre Páginas** | Tipo | Descripción | | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ContinuumNavigationTransitionInfo | Proporciona una transición de tipo *continuum* que da una sensación de continuidad entre páginas, animando elementos desde la posición donde fueron accionados. | | CommonNavigationTransitionInfo | Ofrece transiciones estándar para la navegación, como deslizamientos hacia la izquierda o derecha. | | SlideNavigationTransitionInfo | Crea un efecto de “aparecer y desaparecer” deslizándose desde una dirección específica, mejorando la percepción de movimiento entre páginas. | ## Implementación de Transiciones en la Aplicación Para ilustrar la implementación de transiciones, consideremos cómo aplicar una transición de tipo *continuum* en una página de la aplicación. ### Paso 1: Definir las Transiciones en XAML Puedes definir las transiciones directamente en cada página utilizando XAML. Esto te permite personalizar las animaciones según las necesidades específicas de cada página. ```xml ``` **Explicación del Código:** * **TransitionCollection:** Colección que contiene todas las transiciones que se aplicarán a la página. * **NavigationThemeTransition:** Tipo de transición utilizado para la navegación entre páginas. * **ContinuumNavigationTransitionInfo:** Proporciona una animación de tipo *continuum* que crea una transición suave y continua entre las páginas, dando una sensación de continuidad. ### Paso 2: Implementar Transiciones Globales mediante PageBase Para evitar la repetición de código y aplicar transiciones de manera uniforme en todas las páginas de la aplicación, puedes crear una clase base (*PageBase*) que herede de `Page` y defina las transiciones globalmente. ```csharp using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; public class PageBase : Page { public PageBase() { this.Transitions = new TransitionCollection() { new NavigationThemeTransition() { DefaultNavigationTransitionInfo = new ContinuumNavigationTransitionInfo() } }; } } ``` Luego, tus páginas heredarán de `PageBase` en lugar de `Page`: ```csharp // MainPage.xaml.cs public sealed partial class MainPage : PageBase { public MainPage() { this.InitializeComponent(); } } ``` **Ventajas de Utilizar PageBase:** * **Consistencia:** Asegura que todas las páginas compartan las mismas transiciones sin necesidad de duplicar código. * **Mantenibilidad:** Facilita la modificación de transiciones en un solo lugar que afectará a todas las páginas. * **Flexibilidad:** Permite agregar lógica adicional en la clase base si es necesario en el futuro. ## Mejoras en el Repintado Tras la Carga de Datos Optimizar el repintado de la interfaz de usuario tras la carga de datos es crucial para mantener una experiencia de usuario fluida. Al utilizar transiciones adecuadas, puedes asegurar que los elementos se integren de manera armoniosa en la interfaz sin causar saltos visuales o retrasos perceptibles. **Ejemplo de Aplicación de Transiciones en Colecciones:** ```xml ``` En este ejemplo, la propiedad `ShowsScrollingPlaceholders="True"` indica al `ListView` que muestre marcadores de posición mientras se cargan los datos, mejorando la percepción de rapidez y evitando que la interfaz se congele durante la carga. ## Referencias Adicionales Para profundizar en la implementación y personalización de transiciones en UWP, puedes consultar los siguientes recursos: * [Transitions en UWP](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.transition.aspx) * [Tipos de Transiciones en UWP (en Español)](https://msdn.microsoft.com/es-es/library/windows/apps/hh465178.aspx)