선택기 표시줄
선택기 표시줄을 통해 소수의 다른 세트 또는 데이터 보기 간 전환이 가능합니다. 한 번에 하나의 항목만 선택할 수 있습니다.
사용자가 선택기 표시줄에서 항목을 선택하면 통상 다음 중 하나를 통해 보기를 변경합니다.
- 앱 내 여러 페이지 간을 탐색합니다.
- 컬렉션 컨트롤에 표시된 데이터를 변경합니다.
선택기 표시줄은 아이콘과 텍스트를 지원하는 경량 컨트롤입니다. 다양한 창 크기에 맞게 항목을 다시 정렬하지 않도록 제한된 수의 옵션을 표시하기 위한 것입니다.
올바른 컨트롤인가요?
사용자가 제한된 수의 보기 또는 페이지 사이를 탐색할 수 있도록 하려면 SelectorBar를 사용하여 한 번에 하나의 옵션만 선택할 수 있습니다.
일부 사례:
- 각 페이지에 고유한 콘텐츠 목록이 표시되는 "최근", "공유" 및 "즐겨찾기" 페이지 간에 전환합니다.
- 각 보기에 고유 필터링 처리가 된 전자 메일 항목 목록이 표시되는 "모두", "읽지 않음", "플래그 지정됨" 및 "긴급" 보기 간에 전환합니다.
다른 컨트롤을 사용해야 하는 경우
몇몇 시나리오에서는 다른 컨트롤을 사용하는 것이 더 적절합니다.
- 다양한 창 크기에 맞게 조정되는 일관된 최상위 앱 탐색이 필요한 경우 NavigationView를 사용합니다.
- 사용자가 콘텐츠의 새 보기를 열거나, 닫거나, 다시 정렬하거나, 해제할 수 있어야 하는 경우 TabView를 사용합니다.
- 단일 데이터 뷰의 일반 페이지 매김이 필요한 경우 PipsPager를 사용합니다.
- 기본적으로 옵션을 선택하지 않고 컨텍스트가 페이지 탐색과 관련이 없는 경우 RadioButtons를 사용합니다.
UWP 및 WinUI 2
Important
SelectorBar 컨트롤은 UWP 및 WinUI 2에 사용할 수 없습니다. 대안으로 NavigationView 또는 TabView를 참조하세요.
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를 사용하므로 다음과 같은 파생된 아이콘 형식을 사용할 수 있습니다.
참고 항목
SelectorBarItem은 ItemContainer에서 Child 속성을 상속합니다. 이 속성을 사용하여 콘텐츠를 설정할 수 있지만 권장하지는 않습니다. 이 방식으로 설정된 콘텐츠는 SelectorBarItem 컨트롤 템플릿에서 제공하는 스타일 및 시각적 상태를 얻지 않습니다.
항목 선택
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 속성 중 하나를 통한) 프로그래밍 방식을 선택합니다.
사용자가 항목을 선택할 때 일반적으로 앱의 다른 페이지 사이를 탐색하거나 컬렉션 컨트롤에 표시된 데이터를 변경하여 보기를 변경합니다. 두 가지 예가 모두 여기에 나와 있습니다.
전환 애니메이션으로 탐색
팁
이러한 예제는 WinUI 갤러리 앱의 SelectorBar 페이지에서 찾을 수 있습니다. 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에 다른 컬렉션 표시
이 예제에서는 사용자가 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 컨트롤을 보여줍니다.
관련 항목
Windows developer