Панель селектора

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

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

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

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

Выбор правильного элемента управления

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

Некоторыми примерами могут служить:

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

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

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

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

UWP и WinUI 2

Внимание

Элемент управления SelectorBar недоступен для UWP и WinUI 2. Дополнительные сведения см. в разделе NavigationView или TabView.

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

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

Откройте приложение коллекции WinUI 3 и просмотрите элемент SelectorBar в действии.

Приложение коллекции WinUI 3 включает интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из 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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

Переход с помощью анимации перехода

Совет

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

В этом примере демонстрируется обработка события 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;
    }
}

Получение кода примера

• Пример коллекции WinUI. Просмотрите все элементы управления XAML в интерактивном формате.

См. также

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