Панель выбора

Панель селектора позволяет пользователю переключаться между небольшим количеством различных наборов или представлений данных. Можно выбрать один элемент за раз.

Когда пользователь выбирает элемент в строке селектора, обычно изменяется представление следующим образом:

• навигация между различными страницами в приложении.
• изменение данных, отображаемых в элементе управления коллекцией.

Панель селектора — это легкий элемент управления, поддерживающий значок и текст. Он предназначен для представления ограниченного количества параметров, поэтому он не изменяет порядок элементов для адаптации к разным размерам окна.

Это правильный контроль?

Используйте элемент SelectorBar, если вы хотите разрешить пользователю перемещаться между ограниченным количеством представлений или страниц, и одновременно можно выбрать только один вариант.

Ниже приведены некоторые примеры:

• Переключение между "Последние", "Общие" и "Избранное", где каждая страница отображает уникальный список содержимого.
• Переключение между представлениями "Все", "Непрочитанные", "Помеченные" и "Срочные", где каждое представление отображает уникальный отфильтрованный список элементов электронной почты.

Когда лучше использовать другой элемент управления?

Существуют некоторые сценарии, в которых другой элемент управления может быть более подходящим для использования.

• Используйте NavigationView , если требуется согласованная навигация приложения верхнего уровня, которая адаптируется к разным размерам окна.
• Используйте TabView , когда пользователь должен иметь возможность открывать, закрывать, изменять или отключать новые представления содержимого.
• Используйте PipsPager , если требуется регулярное разбиение на страницы одного представления данных.
• Используйте RadioButtons , если параметр не выбран по умолчанию, и контекст не связан с навигацией по страницам.

Создание элемента управления SelectorBar

• Важные API: класс SelectorBar, свойство Items, событие SelectionChanged, класс SelectorBarItem

Откройте приложение коллекции WinUI 3 и просмотрите панель выбора в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Этот XAML создает базовый элемент управления SelectorBar с 3 разделами содержимого.

<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>

В этом примере показано, как добавить selectorBarItem в код.

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

Элементы SelectorBar

Вы заполняете коллекцию Items объектами SelectorBarItem. Это можно сделать непосредственно в XAML или в коде. Так как он предназначен для отображения ограниченного количества параметров, selectorBar не имеет ItemsSource свойства для привязки к внешней коллекции элементов.

Содержимое элемента

Класс SelectorBarItem предоставляет свойства текста и значка , используемые для задания содержимого панели селектора. Можно задать одно или оба свойства; Однако рекомендуется задать Text свойство, чтобы сделать элемент более значимым.

Свойство Icon принимает IconElement, поэтому можно использовать любой из следующих производных типов иконок:

• Анимированная Иконка
• BitmapIcon
• FontIcon
• IconSourceElement
• ImageIcon
• PathIcon
• SymbolIcon

Замечание

SelectorBarItem наследует свойство Child от ItemContainer. Это свойство можно использовать для задания содержимого, но мы не рекомендуем это. Содержимое, настроенное таким образом, не получит стили и визуальные состояния, предоставляемые шаблоном контроля SelectorBarItem.

Выбор элементов

Свойство SelectedItem можно использовать для получения или задания активного элемента SelectorBar. Это синхронизировано со свойством IsSelected SelectorBarItem. Если вы задаете любое свойство, другой обновляется автоматически.

При каждом получении фокуса на селекторной панели и когда SelectedItem является null, SelectedItem автоматически устанавливается на первый фокусируемый экземпляр в коллекции Элементы, если существует.

Каждый раз, когда выбранный элемент Items удаляется из коллекции SelectedItem, свойство устанавливается в null. Если SelectedItem установлено значение null, пока SelectorBar имеет фокус, в SelectorBar не будет выбран ни один элемент, но фокус сохранится.

Параметр SelectedItem для элемента, который в настоящее время не находится в Items коллекции, вызывает исключение.

Нет свойства SelectedIndex, но вы можете получить индекс SelectedItem следующим образом:

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

Изменено выделение

Обработайте событие SelectionChanged , чтобы ответить на выбор пользователей и изменить то, что отображается пользователю. Событие SelectionChanged возникает при выборе элемента любым из следующих способов:

• Автоматизация пользовательского интерфейса
• Фокус вкладки (и выбран новый элемент)
• Навигация влево и вправо в панели SelectorBar
• Событие инициировано через мышь или касание
• Программный выбор (через свойство SelectorBar.SelectedItem или свойство SelectorBarItem.IsSelected).

Когда пользователь выбирает элемент, обычно вы изменяете представление, перейдя между различными страницами в приложении или изменяя данные, отображаемые в элементе управления коллекцией. Ниже показаны примеры обоих.

Навигация с помощью анимации переходов

Подсказка

Эти примеры можно найти на странице SelectorBar приложения коллекции WinUI 3. Используйте приложение коллекции WinUI 3 для запуска и просмотра полного кода.

В этом примере демонстрируется обработка события SelectionChanged для перехода между различными страницами. Навигация использует SlideNavigationTransitionEffect для плавного перемещения страниц влево или вправо, как это необходимо.

<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;
}

Отображение различных коллекций в ItemsView

В этом примере показано, как изменить источник данных элемента ItemsView , когда пользователь выбирает параметр в selectorBar.

<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;
    }
}

Связанные темы

• Класс SelectorBar
• Основы проектирования навигации