Barra de seletores

Uma barra de seletores permite que um usuário alterne entre um pequeno número de conjuntos ou exibições de dados diferentes. Um item por vez pode ser selecionado.

Quando um usuário seleciona um item na barra de seletores, você normalmente altera o modo de exibição:

• navegando entre páginas diferentes em seu aplicativo.
• alterando os dados mostrados em um controle de coleção.

A barra de seletores é um controle leve que dá suporte a um ícone e texto. Destina-se a apresentar um número limitado de opções e não reorganize itens para adaptar-se a diferentes tamanhos de janela.

Esse é o controle correto?

Use um SeletorBar quando quiser permitir que um usuário navegue entre um número limitado de exibições ou páginas e apenas uma opção pode ser selecionada ao mesmo tempo.

Alguns exemplos incluem:

• Alternando entre páginas "Recentes", "Compartilhados" e "Favoritos", em que cada página exibe uma lista exclusiva de conteúdo.
• Alternando entre as exibições "Todos", "Não Lidas", "Sinalizadas" e "Urgentes", em que cada exibição exibe uma lista filtrada exclusivamente de itens de email.

Quando um controle diferente deve ser usado?

Há alguns cenários em que outro controle pode ser mais apropriado de usar.

• Use NavigationView quando você precisar de navegação de aplicativo de nível superior consistente que se adapte a diferentes tamanhos de janela.
• Use TabView quando o usuário puder abrir, fechar, reorganizar ou desativar novas exibições do conteúdo.
• Use PipsPager quando precisar de paginação regular de uma única exibição de dados.
• Use RadioButtons quando uma opção não for selecionada por padrão e o contexto não estiver relacionado à navegação de página.

Criar um controle SelectorBar

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

Esse XAML cria um controle SeletorBar básico com três seções de conteúdo.

<SelectorBar x:Name="SelectorBar">
    <SelectorBarItem x:Name="SelectorBarItemRecent" 
                     Text="Recent" Icon="Clock"/>
    <SelectorBarItem x:Name="SelectorBarItemShared" 
                     Text="Shared" Icon="Share"/>
    <SelectorBarItem x:Name="SelectorBarItemFavorites" 
                     Text="Favorites" Icon="Favorite"/>
</SelectorBar>

Isso mostra como adicionar um SeletorBarItem no código.

SelectorBarItem newItem = new SelectorBarItem()
{
    Text = "New Item",
    Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);

Itens da Barra de Seleção

Você preenche a coleção SeletorBar Items com objetos SelectorBarItem . Você pode fazer isso diretamente no XAML ou no código. Como se destina a exibir um número limitado de opções, o SelectorBar não tem uma ItemsSource propriedade para associação a uma coleção externa de itens.

Conteúdo do item

A classe SelectorBarItem fornece propriedades de Texto e Ícone que você usa para definir o conteúdo da barra de seletores. Você pode definir uma ou ambas as propriedades; no entanto, recomendamos que você defina a Text propriedade para tornar o item mais significativo.

A Icon propriedade usa um IconElement, para que você possa usar qualquer um desses tipos de ícone derivados:

• AnimatedIcon
• BitmapIcon
• FontIcon
• IconSourceElement
• ImageIcon
• PathIcon
• SymbolIcon

Seleção de item

Você pode usar a propriedade SelectedItem para obter ou definir o item ativo do SeletorBar. Isso é sincronizado com a propriedade IsSelected do SelectorBarItem. Se você definir qualquer propriedade, a outra será atualizada automaticamente.

Sempre que o SelectorBar obtém o foco e SelectedItem estiver null, SelectedItem é automaticamente definido como a primeira instância focalizável na coleção Items, se existir alguma.

Sempre que o item selecionado é removido da Items coleção, a SelectedItem propriedade é definida como null. Se SelectedItem estiver definido como null enquanto o SeletorBar tiver o foco, SelectorBar não terá nenhum item selecionado, mas manterá o foco.

A configuração SelectedItem para um elemento que não está atualmente na Items coleção gera uma exceção.

Não há nenhuma SelectedIndex propriedade, mas você pode obter o índice da SelectedItem seguinte maneira:

int currentSelectedIndex = 
    selectorBar.Items.IndexOf(selectorBar.SelectedItem);

Seleção alterada

Manipule o evento SelectionChanged para responder à seleção de usuários e alterar o que é mostrado ao usuário. O SelectionChanged evento é gerado quando um item é selecionado de qualquer uma destas maneiras:

• Automação da interface do usuário
• Foco da guia (e um novo item está selecionado)
• Navegação à esquerda e à direita dentro da Barra de Seletores
• Evento acionado por mouse ou toque
• Seleção programática (por meio da propriedade SelectorBar.SelectedItem ou da propriedade IsSelected de SelectorBarItem).

Quando um usuário seleciona um item, você normalmente altera o modo de exibição navegando entre páginas diferentes em seu aplicativo ou alterando os dados mostrados em um controle de coleção. Exemplos de ambos são mostrados aqui.

Navegar com animações de transição

Este exemplo demonstra o tratamento do evento SelectionChanged para navegar entre páginas diferentes. A navegação usa o SlideNavigationTransitionEffect para deslizar as páginas da esquerda ou direita, conforme apropriado.

<SelectorBar x:Name="SelectorBar2" 
             SelectionChanged="SelectorBar2_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPage1" Text="Page1" 
                     IsSelected="True" />
    <SelectorBarItem x:Name="SelectorBarItemPage2" Text="Page2" />
    <SelectorBarItem x:Name="SelectorBarItemPage3" Text="Page3" />
    <SelectorBarItem x:Name="SelectorBarItemPage4" Text="Page4" />
    <SelectorBarItem x:Name="SelectorBarItemPage5" Text="Page5" />
</SelectorBar>

<Frame x:Name="ContentFrame" IsNavigationStackEnabled="False" />

int previousSelectedIndex = 0;

private void SelectorBar2_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    SelectorBarItem selectedItem = sender.SelectedItem;
    int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
    System.Type pageType;

    switch (currentSelectedIndex)
    {
        case 0:
            pageType = typeof(SamplePage1);
            break;
        case 1:
            pageType = typeof(SamplePage2);
            break;
        case 2:
            pageType = typeof(SamplePage3);
            break;
        case 3:
            pageType = typeof(SamplePage4);
            break;
        default:
            pageType = typeof(SamplePage5);
            break;
    }

    var slideNavigationTransitionEffect = 
            currentSelectedIndex - previousSelectedIndex > 0 ? 
                SlideNavigationTransitionEffect.FromRight : 
                SlideNavigationTransitionEffect.FromLeft;

    ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() 
                            { Effect = slideNavigationTransitionEffect });

    previousSelectedIndex = currentSelectedIndex;
}

Exibir coleções diferentes em um ItemsView

Este exemplo mostra como alterar a fonte de dados de um ItemsView quando o usuário seleciona uma opção no SeletorBar.

<SelectorBar x:Name="SelectorBar3" 
             SelectionChanged="SelectorBar3_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPink" Text="Pink"
                     IsSelected="True"/>
    <SelectorBarItem x:Name="SelectorBarItemPlum" Text="Plum"/>
    <SelectorBarItem x:Name="SelectorBarItemPowderBlue" Text="PowderBlue"/>
</SelectorBar>

<ItemsView x:Name="ItemsView3" 
           ItemTemplate="{StaticResource ColorsTemplate}"/>
    <ItemsView.Layout>
        <UniformGridLayout/>
    </ItemsView.Layout>
</ItemsView/>

private void SelectorBar3_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    if (sender.SelectedItem == SelectorBarItemPink)
    {
        ItemsView3.ItemsSource = PinkColorCollection;
    }
    else if (sender.SelectedItem == SelectorBarItemPlum)
    {
        ItemsView3.ItemsSource = PlumColorCollection;
    }
    else
    {
        ItemsView3.ItemsSource = PowderBlueColorCollection;
    }
}

UWP e WinUI 2

Tópicos relacionados

• Classe SelectorBar
• Noções básicas de design de navegação