En las aplicaciones modernas de Windows, los menús contextuales juegan un rol clave en mejorar la usabilidad y la productividad del usuario. En este artículo se mostrará cómo construir un menú contextual personalizado utilizando WinUI 3 y, opcionalmente, aprovechar XAML Islands para integrar componentes enriquecidos si estás migrando desde un entorno WPF o WinForms.
Requisitos previos Link to heading
- Visual Studio 2022 o superior.
- Windows App SDK 1.4+ (preferiblemente 1.5).
- SDK de Windows 10/11 instalado.
- Conocimiento básico de XAML y WinUI 3.
Crear la base de la app en WinUI 3 Link to heading
dotnet new winui3 -n CustomContextMenuDemo
cd CustomContextMenuDemo
Asegurate de que el .csproj
use Windows App SDK v1.4 o superior.
Diseñar el menú contextual en XAML Link to heading
Ejemplo básico: Link to heading
<MenuFlyout x:Key="CustomContextMenu">
<MenuFlyoutItem Text="Copiar" Icon="Copy" Click="OnCopyClick"/>
<MenuFlyoutItem Text="Pegar" Icon="Paste" Click="OnPasteClick"/>
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Opciones avanzadas" Icon="Setting" Click="OnSettingsClick"/>
</MenuFlyout>
En el MainWindow.xaml
:
<Grid RightTapped="OnGridRightTapped">
<TextBlock Text="Haz clic derecho en cualquier parte del área." />
</Grid>
Lógica para mostrar el menú contextual Link to heading
private void OnGridRightTapped(object sender, RightTappedRoutedEventArgs e)
{
var menu = (MenuFlyout)this.Resources["CustomContextMenu"];
menu.ShowAt((FrameworkElement)sender, e.GetPosition((FrameworkElement)sender));
}
Agregar accesibilidad y teclas rápidas Link to heading
<MenuFlyoutItem Text="Copiar" Icon="Copy" Click="OnCopyClick" KeyboardAccelerators="{KeyboardAccelerator Key=C Modifiers=Control}"/>
También se pueden agregar AutomationProperties.Name
para accesibilidad con narrador.
Integración opcional con XAML Islands Link to heading
Si migrás desde un entorno WinForms o WPF y querés mostrar un control legado (como un gráfico de WPF) dentro del menú:
- Usá un
Popup
+WindowsXamlHost
en lugar deMenuFlyout
. - Embedí el contenido de WPF con lógica personalizada.
Nota: Esto aplica más a proyectos híbridos, no es necesario para apps puras en WinUI 3.
Conclusión Link to heading
Crear menús contextuales personalizados en WinUI 3 permite brindar una experiencia moderna y rica al usuario final, sin sacrificar la integración nativa con el sistema operativo. A medida que evoluciona Windows App SDK, se pueden enriquecer aún más estos menús con animaciones, bindings MVVM y controles complejos.