Menús contextuales - Tutorial de .NET

El objetivo de .NET MAUI es, justamente, permitirnos crear aplicaciones multiplataforma con la misma base de código, como es el caso de esta aplicación llamada WisdomPetMedicine que ejecuta en Android y en iOS y también en Windows. Y es lo que voy a mostrarte aquí. Voy a seleccionar la opción de Windows Machine para permitir que esto se despliegue y por acá vemos que, efectivamente, está la aplicación ya corriendo en el sistema operativo Windows. Como puedes observar, tiene el mismo menú, las mismas opciones y, pues, prácticamente el mismo comportamiento que tiene la versión de Android o la de iOS. Sin embargo, podemos incluir algunas características nativas y específicas del sistema operativo en cuestión. Por ejemplo, cuando esta aplicación esté corriendo en el escritorio, es decir, en Windows, quiero agregar algunas cosas que son aptas para el uso y manejo de aplicaciones de ventanas, por ejemplo, los menús contextuales que, justamente, en .NET 7 ahora se permiten con .NET MAUI. Quiero implementar un menú contextual aquí en esta área de Clientes visitados para poder navegar directamente al catálogo de clientes sin necesidad que el usuario haga clic aquí y luego Configuración y después Clientes, ya hice tres clics para poder llegar a este catálogo. Entonces, esto es lo que vamos a hacer. Vamos a expandir Views, la vista se llama DashboardPage, ya detecté aquí el VerticalStackLayout que tiene este elemento de Clientes visitados y aquí adentro lo que voy a hacer es escribir FlyoutBase.ContextFlyout y, adentro de este Context.Flyout, voy a crear un objeto de tipo MenuFlyout que me permite tener uno o varios MenuFlyoutItem, que son, justamente, los elementos del menú contextual. Aquí, por ejemplo, voy a ponerle que diga «Catálogo de clientes» y ahora podría manejar el evento Click. Si hago esto, el event handler de este evento estaría en el Code Behind de la página. Sin embargo, esta aplicación de WisdomPetMedicine está construida y diseñada por medio del patrón de diseño Model-View-ViewModel, entonces yo sé que el ViewModel está acá, DashboardViewModel, y por lo tanto, manejar el evento Click probablemente no sea la mejor idea, para eso tenemos los comandos. Aquí lo que voy a hacer es implementar un nuevo comando en el ViewModel. Me voy a ir acá a DashboardViewModel y voy a implementar un comando llamado GoToClientsCommand. Para esto, voy a crear un private async Task GoToClientsAsync y adentro lo que voy a hacer es navegar a la página de Clientes. Ahora, para hacer esto, lo que tengo que hacer es inyectar el servicio de INavigationService, que también es parte de esta aplicación de WisdomPetMedicine. Esto lo voy a poner en un campo. Este campo lo voy a pasar hasta acá arriba para que no estorbe y lo que voy a hacer es, entonces, aquí usar este navigationService.GoToAsync y aquí le voy a pasar ///ClientsPage. Esto porque ClientsPage es parte de un tab dentro de la página que te acabo de mostrar, que se llama Configuración. Muy bien, entonces, lo último que tengo que hacer es decorar esto con RelayCommand, ya que estoy utilizando el Community Toolkit, para permitir que ese Community Toolkit genere los comandos y las propiedades observables en los ViewModels. Para mayor información, puedes consultar el curso de .NET MAUI esencial aquí en la biblioteca de LinkedIn Learning. Muy bien, ya terminamos aquí esta implementación. Lo único que falta es irnos acá a la página y decir Command="{Binding GoToClientsCommand}". Muy bien, entonces, este es el comando al que nos vamos a enlazar y ya estamos listos, entonces, para probar. Vamos a hacer clic en el botón de Windows Machine y por acá ya está la aplicación. Vamos a pasarla para acá, vamos a expandirla. Muy bien, entonces, puedo hacer clic derecho, como puedes observar, ahí está el menú contextual, puedo seleccionar esta opción y, de esta manera, permitimos a los usuarios navegar directamente al Catálogo de clientes sin que pasen por el menú, gracias a este menú contextual.