NavigationView es un control de diseño en XAML para menús de navegación, su implementación es sencilla, pero la lógica detrás de escenas puede resultar un poco compleja; por ello, el presente post detallará aspectos a tomar en cuenta al momento de implementar el NavigationView control dentro de una aplicación UWP.
Requisitos:
Estructura:
El NavigationView control esta conformado por un panel de navegación, un encabezado y una sección contenido, como se muestra en la siguiente imagen:
Implementación:
1) Creamos una aplicación UWP en Visual Studio, lo cual llamaremos "NavigationViewExample", seleccionaremos como target version a la build "18362" y como min version a la build "17763".
2) Adherimos el control desde el toolbox de la IDE y lo colocamos dentro de la pagina "MainPage.xaml".
3) Modificaremos el Navigation View en XAML con la propiedad "PaneDisplayMode" dentro de MainPage.xaml para que el panel de ítems se muestre en la parte superior y no en la parte izquierda del aplicativo.
4) Agregamos los ítems que mostraremos en el panel de navegación en XAML.
Para mantener simple el ejemplo solo agregaremos dos ítems al panel de navegación: "Inicio" y "Datos Personales", ambos separados por un "<NavigationViewItemSeparator/>".
5) Agregamos la sección de contenido que se visualizara mediante un "Frame" control.
6) Creamos las paginas que el panel de navegación indica: Inicio, Datos Personales y Configuraciones (El cuál esta representado por un diente de rueda).
7) Agregamos la lógica detrás de escenas del NavigationView control en C#. El primer evento que agregaremos será "Loaded" dentro de "NavigationView" y lo implementaremos de la siguiente manera:
Al crear el evento en XAML, dejamos el cursor dentro de MainPageNavViewModel_Loaded y presionamos la tecla "F12", lo que nos llevara dentro del archivo "MainPage.xaml.cs", en el cuál incluiremos toda la lógica del control. De la misma forma agregaremos los eventos "SelectionChanged" y "BackRequest" dentro del "NavigationView" control.
Lo lógica del control dentro de MainPage.xaml.cs, deberá quedar la siguiente forma:
Nota:
Dentro de "MainPage.xaml.cs" esta el método "_pages" que es el encargado de registrar los elementos en el panel de navegación, si uno desea incluir o sustraer un ítem, es allí donde deberá modificar el código.
Vista del aplicativo:
El aplicativo quedará de la siguiente forma al ejecutarse:
Consideraciones:
NavigationView es solo uno de los controles que UWP ofrece en el desarrollo de aplicaciones, recalcar que es posible modificar aun mas el control a preferencia del desarrollador; dejo el link con toda la documentación del control aqui.
Asimismo, comparto el proyecto en GitHub en caso les sea de utilidad, espero les haya gustado el post. Saludos!