선택기 표시줄

선택기 표시줄을 통해 소수의 다른 세트 또는 데이터 보기 간 전환이 가능합니다. 한 번에 하나의 항목만 선택할 수 있습니다.

사용자가 선택기 표시줄에서 항목을 선택하면 통상 다음 중 하나를 통해 보기를 변경합니다.

• 앱 내 여러 페이지 간을 탐색합니다.
• 컬렉션 컨트롤에 표시된 데이터를 변경합니다.

선택기 표시줄은 아이콘과 텍스트를 지원하는 경량 컨트롤입니다. 다양한 창 크기에 맞게 항목을 다시 정렬하지 않도록 제한된 수의 옵션을 표시하기 위한 것입니다.

올바른 컨트롤인가요?

사용자가 제한된 수의 보기 또는 페이지 사이를 탐색할 수 있도록 하려면 SelectorBar를 사용하여 한 번에 하나의 옵션만 선택할 수 있습니다.

일부 사례:

• 각 페이지에 고유한 콘텐츠 목록이 표시되는 "최근", "공유" 및 "즐겨찾기" 페이지 간에 전환합니다.
• 각 보기에 고유 필터링 처리가 된 전자 메일 항목 목록이 표시되는 "모두", "읽지 않음", "플래그 지정됨" 및 "긴급" 보기 간에 전환합니다.

다른 컨트롤을 사용해야 하는 경우

몇몇 시나리오에서는 다른 컨트롤을 사용하는 것이 더 적절합니다.

• 다양한 창 크기에 맞게 조정되는 일관된 최상위 앱 탐색이 필요한 경우 NavigationView를 사용합니다.
• 사용자가 콘텐츠의 새 보기를 열거나, 닫거나, 다시 정렬하거나, 해제할 수 있어야 하는 경우 TabView를 사용합니다.
• 단일 데이터 뷰의 일반 페이지 매김이 필요한 경우 PipsPager를 사용합니다.
• 기본적으로 옵션을 선택하지 않고 컨텍스트가 페이지 탐색과 관련이 없는 경우 RadioButtons를 사용합니다.

UWP 및 WinUI 2

SelectorBar 컨트롤 만들기

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 해당 Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

이 XAML은 콘텐츠 섹션이 3개가 있는 기본 SelectorBar 컨트롤을 만듭니다.

<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 속성은 IconElement를 사용하므로 다음과 같은 파생된 아이콘 형식을 사용할 수 있습니다.

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

항목 선택

SelectBar의 활성 항목을 얻거나 설정하려면 SelectedItem 속성을 활용합니다. SelectorBarItem의 IsSelected 속성에 동기화됩니다. 두 속성 중 하나를 설정하면 다른 속성이 자동으로 업데이트됩니다.

SelectorBar가 포커스를 받고 SelectedItem 이(가) null일 때마다 SelectedItem 은(는) 자동으로 항목 컬렉션에서 첫 번째로 포커스 가능한 인스턴스(있는 경우)로 설정됩니다.

선택된 항목이 Items 컬렉션에서 제거될 때마다 SelectedItem 속성은 null(으)로 설정됩니다. SelectorBar에 포커스가 있는 동안 SelectedItem 이 null (으)로 설정된 경우 SelectorBar는 선택된 항목은 없지만 포커스를 유지합니다.

이 SelectedItem 을(를) 현재 Items 컬렉션에 없는 요소로 설정하면 예외가 발생합니다.

이 SelectedIndex 속성은 없지만 다음과 같이 SelectedItem 의 인덱스를 가져올 수 있습니다.

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

선택 변경

사용자 선택에 응답하고 사용자에게 표시되는 내용을 변경하려면 SelectionChanged 이벤트를 처리합니다. 이 SelectionChanged 이벤트는 다음과 같은 방법으로 항목을 선택할 때 발생합니다.

• UI 자동화
• 탭 포커스(새 항목이 선택됨)
• SelectorBar 내의 왼쪽 및 오른쪽 탐색
• 마우스 또는 터치를 통해 탭된 이벤트
• (둘 중 SelectorBar.SelectedItem 속성 또는 SelectorBarItem의 IsSelected 속성 중 하나를 통한) 프로그래밍 방식을 선택합니다.

사용자가 항목을 선택할 때 일반적으로 앱의 다른 페이지 사이를 탐색하거나 컬렉션 컨트롤에 표시된 데이터를 변경하여 보기를 변경합니다. 두 가지 예가 모두 여기에 나와 있습니다.

전환 애니메이션으로 탐색

이 예제에서는 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에 다른 컬렉션 표시

이 예제에서는 사용자가 SelectorBar에서 옵션을 선택할 때 ItemsView의 데이터 원본을 변경하는 방법을 보여 줍니다.

<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 클래스
• 탐색 디자인 기본 사항