항목 보기
항목 보기를 사용하여 앨범의 사진 또는 제품 카탈로그의 항목과 같은 데이터 항목의 컬렉션을 표시합니다.
항목 보기는 리스트 뷰 및 그리드 뷰 컨트롤과 유사하며 대부분의 경우에 해당 컨트롤을 사용할 수 있습니다. 항목 보기의 장점 중 하나는 기능을 통해 레이아웃을 전환하면서 항목 선택을 유지할 수 있다는 점입니다.
항목 보기 컨트롤은 ItemsRepeater, ScrollView, ItemContainer, 및 ItemCollectionTransitionProvider 구성 요소를 사용해 빌드되므로, 고유한 기능을 제공하여 사용자 지정 Layout 또는 ItemCollectionTransitionProvider 구현에 연결할 수 있습니다. 항목 보기의 내부 ScrollView 컨트롤을 사용하면 항목을 스크롤하고 확대/축소할 수 있습니다. 또한 프로그래밍 방식으로 스크롤하는 동안 애니메이션을 제어하는 기능과 같이, 리스트 뷰와 그리드 뷰가 사용하는 ScrollViewer 컨트롤에서는 사용할 수 없는 기능을 제공합니다.
리스트 뷰 및 그리드 뷰 컨트롤과 마찬가지로, 항목 보기는 UI 및 데이터 가상화는 물론 핸들 키보드, 마우스, 펜 및 터치 입력을 사용할 수 있고, 빌트인 접근성 지원도 받습니다.
올바른 컨트롤인가요?
항목 보기를 사용하여 다음 작업을 수행합니다.
- 모든 항목이 동일한 시각적 동작 및 상호 작용 동작을 가져야 하는 컬렉션을 표시합니다.
- 리스트, 그리드 및 사용자 지정 레이아웃 간에 전환할 수 있는 기능을 사용하여 콘텐츠 컬렉션을 표시합니다.
- 다음과 같은 일반적인 사용 사례를 포함하여 다양한 사용 사례를 수용합니다.
- 상점형 사용자 인터페이스(예: 앱, 노래, 제품 검색)
- 대화형 사진 라이브러리
- 연락처 목록
항목 보기 만들기
WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
모든 형식의 컬렉션을 ItemsView 를 통해 보여줄 수 있습니다. 뷰를 채우려면, ItemsSource 속성을 데이터 소스에 설정합니다.
참고 항목
다른 컬렉션 컨트롤( ItemsControl에서 파생된 컨트롤)과는 달리, ItemsView에는 직접 데이터 항목을 추가할 수 있는 Items 속성이 없습니다.
항목 소스 설정
통상 대칭 이동 보기를 사용하여 데이터베이스나 인터넷과 같은 소스의 데이터를 표시합니다. 데이터 소스에서 항목 보기를 채우려면 ItemsSource 속성을 데이터 항목의 컬렉션으로 설정합니다.
코드에서 ItemsSource 설정
여기서는 ItemsSource가 코드에서 바로 컬렉션의 인스턴스로 설정됩니다.
// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");
// Create a new ItemsView and set the data source.
ItemsView itemsView1 = new ItemsView();
itemsView1.ItemsSource = itemsList;
// Add the ItemsView to a parent container in the visual tree.
rootGrid.Children.Add(itemsView1);
XAML에서 ItemsSource 바인딩
XAML에서 ItemsSource 속성을 컬렉션에 바인딩할 수도 있습니다. 자세한 내용은 XAML과 데이터 바인딩을 참조하세요.
Important
DataTemplate에서 x:Bind markup extension 를 사용하면, 데이터 템플릿에 (x:DataType) 데이터 타입을 지정해야 합니다.
여기서 ItemsSource는 사용자 지정 데이터 객체(형식 Photo)의 컬렉션에 바인딩됩니다.
<ItemsView ItemsSource="{x:Bind Photos}">
</ItemsView>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Photos = new ObservableCollection<Photo>();
PopulatePhotos();
}
public ObservableCollection<Photo> Photos
{
get; private set;
}
private void PopulatePhotos()
{
// Populate the Photos collection.
}
}
public class Photo
{
public BitmapImage PhotoBitmapImage { get; set; }
public string Title { get; set; }
public int Likes { get; set; }
}
항목의 모양 지정
기본적으로 데이터 항목은 바운딩된 데이터 객체의 문자열 표현으로 항목 보기에 표시됩니다. 일반적으로 데이터를 보다 다양하게 표시하려는 경우가 많습니다. 항목 보기에서 항목이 표시되는 방법을 정확히 지정하려면 DataTemplate을 만듭니다. DataTemplate의 XAML은 개별 항목을 표시하는 데 사용되는 컨트롤의 레이아웃 및 모양을 정의합니다. 레이아웃의 컨트롤은 데이터 개체의 속성에 바운딩되거나 정적 콘텐츠 정의 인라인을 가질 수 있습니다. DataTemplate을 ItemsView 컨트롤의 ItemTemplate 속성에 할당합니다.
Important
DataTemplate의 루트 요소는 ItemContainer여야합니다. 그렇지 않으면 예외가 throw됩니다. ItemContainer는 ItemsView에서 항목 컬렉션에 있는 개별 항목의 선택 상태 및 기타 시각화를 표시하는 데 사용되는 독립적인 기본 컨트롤입니다.
이 예제에서는 DataTemplate이 ResourceDictionary에 Page.Resources 정의되어 있습니다. 여기에는 그림을 표시하는 이미지 컨트롤과 이미지 제목과 받은 좋아요 수가 포함된 오버레이가 포함됩니다.
<Page.Resources>
<DataTemplate x:Key="PhotoItemTemplate" x:DataType="local:Photo">
<ItemContainer AutomationProperties.Name="{x:Bind Title}">
<Grid>
<Image Source="{x:Bind PhotoBitmapImage, Mode=OneWay}"
Stretch="UniformToFill" MinWidth="70"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<StackPanel Orientation="Vertical" Height="40" Opacity=".75"
VerticalAlignment="Bottom" Padding="5,1,5,1"
Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
<TextBlock Text="{x:Bind Title}"
Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Likes}"
Style="{ThemeResource CaptionTextBlockStyle}"
Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
<TextBlock Text=" Likes"
Style="{ThemeResource CaptionTextBlockStyle}"
Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
</StackPanel>
</StackPanel>
</Grid>
</ItemContainer>
</DataTemplate>
</Page.Resources>
<Grid x:Name="rootGrid">
<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
ItemTemplate="{StaticResource PhotoItemTemplate}">
</ItemsView>
</Grid>
데이터 템플릿에서 정의한 항목 레이아웃은 다음과 같습니다.
항목의 레이아웃 변경
ItemsView 컨트롤에 항목을 추가하면, 자동으로 ItemContainer 에서 각 항목을 래핑한 후 모든 항목 컨테이너를 배치합니다. 이러한 항목 컨테이너를 배치하는 방법은 컨트롤의 Layout 속성에 따라 달라집니다.
현재 레이아웃의 속성을 조정하여 항목의 레이아웃을 수정하거나 현재 레이아웃을 다른 레이아웃으로 완전히 바꿀 수 있습니다. 다음에 설명된 레이아웃 중 하나를 사용하거나 Layout 클래스에서 사용자 지정 레이아웃을 파생시킬 수 있습니다.
StackLayout
기본적으로, ItemsView는 기본 속성 설정 및 간단한 이미지 템플릿과 함께 여기에 표시된 것처럼 세로 목록을 생성하는 StackLayout을 사용합니다.
이 XAML은 StackLayout에 있는 항목 사이의 간격을 5px로 설정합니다.
<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
ItemTemplate="{StaticResource PhotoItemTemplate}">
<ItemsView.Layout>
<StackLayout Spacing="5"/>
</ItemsView.Layout>
</ItemsView>
StackLayout가 제공한 속성은 다음을 제어합니다.
ItemTemplate과 함께 레이아웃을 사용하여 요구 사항을 충족하는 다양한 모양을 컬렉션에 제공할 수 있습니다. 예를 들어, WinUI 갤러리 샘플 은 StackLayout과 함께 사용되는 ItemTemplate을 다음과 같이 변경합니다.
LinedFlowLayout
래핑하는 레이아웃에서 LinedFlowLayout 은 요소를 왼쪽에서 오른쪽으로 순차적으로 배치한 다음 위쪽에서 아래쪽으로 배치합니다. 높이가 고정되어 있지만 너비가 가변적인 항목이 있는 항목 컬렉션을 표시하려면 이 레이아웃을 사용합니다. 이미지 기반 컬렉션에 사용하는 것이 좋습니다. 또한 컬렉션에 항목이 추가되거나 제거된 경우와 보기 크기가 조정될 때 재생되는 빌트인 애니메이션이 이 레이아웃에 있습니다.
다음은 줄을 세운 플로 레이아웃으로 사진 컬렉션을 보여주는 항목 보기입니다.
<ItemsView Width="500" Height="400" HorizontalAlignment="Left"
ItemTemplate="{StaticResource LinedFlowLayoutItemTemplate}">
<ItemsView.Layout>
<LinedFlowLayout ItemsStretch="Fill"
LineHeight="160"
LineSpacing="5"
MinItemSpacing="5"/>
</ItemsView.Layout>
</ItemsView>
LinedFlowLayout가 제공하는 속성은 다음을 제어합니다.
- 항목의 크기 및 간격(LineHeight, LineSpacing, MinItemSpacing)
- 항목의 정렬(ItemsJustification, ItemsStretch)
UniformGridLayout
래핑하는 레이아웃에서 UniformGridLayout 은 요소를 왼쪽에서 오른쪽으로 또는 위에서 아래로 순차적으로 배치합니다( 방향에 따라 다릅니다). 각 항목의 크기는 같습니다.
다음은 균일한 그리드 레이아웃으로 사진 컬렉션을 보여주는 항목 보기입니다.
<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
ItemTemplate="{StaticResource PhotoItemTemplate}">
<ItemsView.Layout>
<UniformGridLayout MaximumRowsOrColumns="3"
MinRowSpacing="5"
MinColumnSpacing="5"/>
</ItemsView.Layout>
</ItemsView>
UniformGridLayout이 제공하는 속성은 다음을 제어합니다.
- 레이아웃이 행 또는 열 기반인지 여부(방향)
- 행 또는 열의 개수(MaximumRowsOrColumns)
- 항목의 크기 및 간격(MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
- 항목의 정렬(ItemsJustification, ItemsStretch)
팁
실시간으로 속성의 효과를 확인하려면 WinUI 3 갤러리 앱 의 대화형 데모를 사용합니다.
항목 선택 및 상호 작용
사용자와 항목 보기 간의 상호 작용을 지원하는 여러 방법 중에서 선택할 수 있습니다. 기본적으로 사용자는 단일 항목을 선택할 수 있습니다. 다중 선택을 활성화하거나 선택을 비활성화하려면 SelectionMode 속성을 변경하면 됩니다. 사용자가 항목을 선택하는 대신 항목을 클릭하여 작업을 호출할 수 있게 하려면 IsItemInvokedEnabled 속성을 설정하면 됩니다.
이 표에서는 사용자가 항목 보기와 상호 작용할 수 있는 방법과 상호 작용에 응답하는 방법을 보여줍니다.
| 상호 작용을 활성화하려면 다음을 수행합니다. | 사용할 설정 | 이벤트를 처리합니다. | 이 속성을 사용하여 선택한 항목을 가져옵니다. |
|---|---|---|---|
| 상호 작용 없음 | SelectionMode="None" IsItemInvokedEnabled="False" |
해당 없음 | 해당 없음 |
| 단일 선택 | SelectionMode="Single" IsItemInvokedEnabled="False" |
SelectionChanged | SelectedItem |
| 다중 선택 | SelectionMode="Multiple" IsItemInvokedEnabled="False" |
SelectionChanged | SelectedItems |
| 확장 선택 | SelectionMode="Extended" IsItemInvokedEnabled="False" |
SelectionChanged | SelectedItems |
| 클릭 | SelectionMode="None" IsItemInvokedEnabled="True" |
ItemInvoked | 해당 없음 |
참고 항목
SelectionMode 또한 Single, Multiple, 또는 Extended으로 설정되어 있는 동안 IsItemInvokedEnabled를 활성화하여 ItemInvoked 이벤트를 발생시킬 수 있습니다. 이렇게 하면 ItemInvoked 이벤트가 먼저 발생되고, 이후 SelectionChanged 이벤트가 발생합니다. 경우에 따라(예: ItemInvoked 이벤트 처리기 내의 다른 페이지로 이동하는 경우) SelectionChanged 이벤트가 발생하지 않고 항목이 선택되지 않습니다.
다음과 같이 XAML 또는 코드에서 해당 속성을 설정할 수 있습니다.
<ItemsView x:Name="myItemsView" SelectionMode="None" IsItemInvokedEnabled="True"/>
myItemsView.SelectionMode = ItemsViewSelectionMode.None;
myItemsView.IsItemInvokedEnabled = true;
읽기 전용
SelectionMode 속성을 ItemsViewSelectionMode.None 에 설정하여 항목 선택을 비활성화할 수 있습니다. 이렇게 하면 컨트롤이 읽기 전용 모드가 되므로, 데이터를 표시하는 데 사용되지만 상호 작용에는 사용되지 않습니다. 즉, 항목 선택을 비활성화하지만 컨트롤 자체가 비활성화되는 것은 아닙니다.
참고 항목
프로그래밍 방식으로 항목을 선택 및 선택 취소할 수 있지만 사용자 상호 작용을 통해서는 선택 및 선택 취소를 할 수 없습니다.
단일 선택
이 표에서는 SelectionMode가 Single로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.
| 보조 키 | 상호 작용 |
|---|---|
| None | |
| Ctrl |
SelectionMode가 Single로 설정되면, SelectedItem 속성에서 선택한 데이트 항목을 가져올 수 있습니다. 항목이 선택되지 않은 경우, SelectedItem은 null입니다.
항목 컬렉션에 없는 항목을 SelectedItem으로 설정하려고 하면, 오퍼레이션이 무시되고 SelectedItem이 null이 됩니다.
다음은 Single 선택 영역의 기본 선택 표시입니다.
다중 선택
이 표에서는 SelectionMode가 Multiple로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.
| 보조 키 | 상호 작용 |
|---|---|
| None | |
| Shift |
다음은 Multiple 선택 영역의 기본 선택 표시입니다.
확장 선택
이 표에서는 SelectionMode가 Extended로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.
| 보조 키 | 상호 작용 |
|---|---|
| None | Single 선택 영역과 동일합니다. |
| Ctrl | |
| Shift |
SelectionMode가 Multiple 또는 Extended로 설정되면, SelectedItems 속성에서 선택한 데이터 항목을 가져올 수 있습니다.
SelectedItem 및 SelectedItems 속성이 동기화됩니다. 예를 들어, SelectedItem을 null로 설정하면, SelectedItems가 비어 있습니다. 다중 선택 모드에서, SelectedItem에는 먼저 선택된 항목이 포함됩니다.
이 Extended 선택 영역의 기본 선택 표시와 이 Single 선택 영역의 표시는 동일하며, 다음과 같습니다.
프로그래밍 방식으로 항목 선택 관리
참고 항목
이러한 선택 메서드는 SelectionMode 속성을 무시하고 SelectionMode가 Single 또는 None인 경우에도 영향을 줍니다.
경우에 따라 프로그래밍 방식으로 ItemsView 항목 선택을 조작해야 할 수 있습니다. 예를 들어, Select all 버튼을 보여주어 사용자가 리스트에 있는 모든 항목을 선택할 수 있게 할 수 있습니다. 이 경우, SelectedItems 컬렉션에서 항목을 하나씩 추가하고 제거하는 것이 일반적으로 그리 효율적이지는 않습니다. SelectedItems 속성을 사용하는 것보다 Select, SelectAll, Deselect, 및 InvertSelection 메서드를 사용하여 선택을 수정하는 것이 훨씬 효율적입니다.
팁
SelectAll 메서드를 호출하여 컬렉션의 모든 항목을 선택할 수 있습니다. 모든 항목을 선택 취소하기 위한 메서드는 없습니다. 그러나, SelectAll을 호출한 다음 InvertSelection 바로 뒤에 모든 항목의 선택을 취소할 수 있습니다.
샘플 코드 가져오기
- WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤을 보여줍니다.
관련된 문서
Windows developer