Navegação Estruturada com NavigationView

O NavigationView é um pilar fundamental na arquitetura de interfaces modernas do Windows, oferecendo uma estrutura de navegação consistente e adaptável. Localizado em Samples/ControlPages/NavigationViewPage.xaml, este controle demonstra como organizar rotas de aplicativo com suporte a múltiplos layouts.

Modos de Exibição e Adaptabilidade

O controle suporta três modos principais:

• Painel lateral (Left): Ideal para apps com múltiplas seções de igual relevância.
• Navegação superior (Top): Reduz o foco no menu e prioriza o conteúdo principal.
• Modo responsivo: Alterna automaticamente entre os layouts conforme o tamanho da janela.

Exemplo de Associação de Dados

Ao vincular coleções dinâmicas, o MenuItemsSource permite alimentar o menu com dados em tempo real, enquanto MenuItemTemplateSelector personaliza a renderização dos itens.

<NavigationView
    x:Name="navView"
    MenuItemsSource="{x:Bind MenuItems}"
    MenuItemTemplateSelector="{StaticResource CustomItemSelector}"
    SelectionChanged="OnNavigationSelection" />

Hierarquia de Navegação

Para menus aninhados, desative a seleção automática definindo SelectsOnInvoked="False". Isso permite que itens pais expandam submenus sem disparar navegação imediata.

Interação Tátil com SwipeControl

O SwipeControl, exemplificado em Samples/ControlPages/SwipeControlPage.xaml, habilita gestos intuitivos em dispositivos sensíveis ao toque. Ele é amplamente usado em listas para ações rápidas como arquivar, excluir ou marcar itens.

Tipos de Ação por Deslize

• Reveal: Mostra botões ocultos após o deslize, permitindo confirmação antes da execução.
• Execute: Realiza a ação imediatamente ao completar o movimento.

Definição de Ações Personalizadas

Crie uma coleção de operações usando SwipeItems, associando ícones e manipuladores de eventos:

<SwipeItems x:Key="swipeRightActions" Mode="Reveal">
    <SwipeItem
        Text="Arquivar"
        IconSource="{StaticResource ArchiveIcon}"
        Invoked="OnArchiveInvoked" />
    <SwipeItem
        Text="Excluir"
        IconSource="{StaticResource DeleteIcon}"
        Foreground="Red"
        Invoked="OnDeleteInvoked" />
</SwipeItems>

Estratégias de Design Responsivo

Utilize VisualStateManager para ajustar automaticamente o comportamento da interface. O exemplo abaixo altera o modo do painel quando a largura da janela cai abaixo de um limite:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="navView.PaneDisplayMode" Value="Top" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Tematização e Estilo Visual

WinUI suporta temas claros, escuros e de alto contraste. Use recursos temáticos para garantir consistência visual. Por exemplo, um pincel acrílico pode ser configurado assim:

<AcrylicBrush
    x:Key="NavigationViewExpandedPaneBackground"
    FallbackColor="#F2F2F2"
    TintColor="Gray"
    TintOpacity="0.65"
    BackgroundSource="HostBackdrop" />

Início Rápido com WinUI-Gallery

Siga estes passos para explorar os exemplos:

1. Clone o repositório: git clone https://gitcode.com/gh_mirrors/wi/WinUI-Gallery
2. Abra a solução WinUIGallery.sln no Visual Studio
3. Navegue até Samples/ControlPages/ para ver todos os controles implementados

Referência de Controles Essenciais

Otimizações e Boas Práticas

Desempenho

• Use ListView virtualizado para grandes conjuntos de dados.
• Minimize recarregamentos com StaticResource ao invés de DynamicResource.
• Inicialize componentes pesados de forma assíncrona.

Acessibilidade

Todos os controles devem atender aos padrões de acessibilidade:

• Defina AutomationProperties.Name para leitores de tela.
• Garanta navegação completa via teclado.
• Teste a visibilidade em modo de alto contraste.

Recursos Complementares

O arquivo Samples/Data/ControlInfoData.json contém metadados estruturados sobre cada controle, incluindo links para documentação oficial, referência de API e casos de uso. Esse modelo ajuda a entender como organizar informações técnicas em projetos próprios.

O WinUI-Gallery serve tanto como catálogo de UI quanto como laboratório prático para desenvolvedores que buscam dominar o design Fluent e as capacidades do WinUI 3.