다음을 통해 공유

ListView

  • 아티클

샘플을 찾아봅니다. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) ListView 는 선택 가능한 데이터 항목의 스크롤 가능한 세로 목록을 표시합니다. 목록의 모양을 관리하는 동안 ListView 목록의 각 항목 모양은 항목을 표시하는 데 사용하는 Cell 항목에 의해 DataTemplate 정의됩니다. .NET MAUI에는 텍스트와 이미지의 조합을 표시하는 셀 형식이 포함되어 있으며 원하는 콘텐츠를 표시하는 사용자 지정 셀을 정의할 수도 있습니다. ListView 또한 머리글 및 바닥글, 그룹화된 데이터, 풀 투 새로 고침 및 상황에 맞는 메뉴 항목 표시를 지원합니다.

클래스는 ListView 다음 속성을 상속하는 클래스에서 ItemsView<Cell> 파생됩니다.

  • ItemsSource형식 IEnumerable의 , 표시할 항목의 컬렉션을 지정하고 기본값 null은 .입니다.
  • ItemTemplate형식 DataTemplate의 경우 표시할 항목 컬렉션의 각 항목에 적용할 템플릿을 지정합니다.

ListView는 다음 속성을 정의합니다.

  • Footer형식 object의 목록 끝에 표시할 문자열 또는 뷰를 지정합니다.
  • FooterTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Footer지정합니다.
  • GroupHeaderTemplate형식 DataTemplate의 DataTemplate />는 각 그룹의 헤더 모양을 정의하는 데 사용되는 형식을 정의합니다. 이 속성은 속성과 함께 사용할 수 GroupDisplayBinding 없습니다. 따라서 이 속성을 설정하면 .로 null설정 GroupDisplayBinding 됩니다.
  • HasUnevenRows의 형식 bool은 목록의 항목이 서로 다른 높이의 행을 가질 수 있는지 여부를 나타냅니다. 이 속성의 기본값은 false입니다.
  • Header형식 object은 목록의 시작 부분에 표시될 문자열 또는 뷰를 지정합니다.
  • HeaderTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Header지정합니다.
  • HorizontalScrollBarVisibility형식 ScrollBarVisibility의 는 가로 스크롤 막대가 표시되는 시기를 나타냅니다.
  • IsGroupingEnabled형식 bool의 는 기본 데이터를 그룹에 표시해야 하는지 여부를 나타냅니다. 이 속성의 기본값은 false입니다.
  • IsPullToRefreshEnabled형식 bool의 는 사용자가 아래로 ListView 살짝 밀어 데이터를 새로 고칠 수 있는지 여부를 나타냅니다. 이 속성의 기본값은 false입니다.
  • IsRefreshing의 형식 bool은 현재 새로 고침 중인지 여부를 ListView 나타냅니다. 이 속성의 기본값은 false입니다.
  • RefreshCommand형식 ICommand의 는 새로 고침이 트리거될 때 실행될 명령을 나타냅니다.
  • RefreshControlColor형식 Color의 경우 새로 고침이 발생하는 동안 표시되는 새로 고침 시각화의 색을 결정합니다.
  • RowHeight형식 int의 경우 각 행 HasUnevenRows false의 높이를 결정합니다.
  • SelectedItem형식 object의 ,에서 현재 선택한 항목을 ListView나타냅니다.
  • SelectionMode형식 ListViewSelectionMode의 항목을 선택할 ListView 수 있는지 여부를 나타냅니다. 이 속성의 기본값은 Single입니다.
  • SeparatorColor형식 Color의 은 목록의 항목을 구분하는 막대의 색을 정의합니다.
  • SeparatorVisibility형식 SeparatorVisibility의 은 항목 간에 구분 기호가 표시되는지 여부를 정의합니다.
  • VerticalScrollBarVisibility형식 ScrollBarVisibility의 세로 스크롤 막대가 표시되는 시기를 나타냅니다.

이러한 모든 속성은 개체에 의해 BindableProperty 지원되므로 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

또한 ListView 개체에서 지원 BindableProperty 되지 않는 다음 속성을 정의합니다.

  • GroupDisplayBinding그룹 헤더를 표시하는 데 사용할 바인딩 형식 BindingBase의 입니다. 이 속성은 속성과 함께 사용할 수 GroupHeaderTemplate 없습니다. 따라서 이 속성을 설정하면 .로 null설정 GroupHeaderTemplate 됩니다.
  • GroupShortNameBinding- 그룹화된 점프 목록에 표시할 이름에 대한 바인딩인 형식 BindingBase입니다.
  • CachingStrategy형식 ListViewCachingStrategy의 .의 셀 재사용 전략을 ListView정의합니다. 읽기 전용 속성입니다.

ListView 는 다음 이벤트를 정의합니다.

  • ItemAppearing항목의 시각적 표현을 시각적 개체 레이아웃에 추가할 때 발생하는 ListView입니다. ItemVisibilityEventArgs 이 이벤트와 함께 제공되는 개체는 정의 및 Index 속성을 정의합니다Item.
  • ItemDisappearing항목의 시각적 표현이 의 시각적 레이아웃에서 제거될 때 발생하는 ListView입니다. ItemVisibilityEventArgs 이 이벤트와 함께 제공되는 개체는 정의 및 Index 속성을 정의합니다Item.
  • ItemSelected목록의 새 항목을 선택할 때 발생하는 입니다. SelectedItemChangedEventArgs 이 이벤트와 함께 제공되는 개체는 정의 및 SelectedItemIndex 속성을 정의합니다SelectedItem.
  • ItemTapped항목이 탭될 때 발생하는 ListView /a0>입니다. 이 이벤트와 함께 제공되는 개체는 ItemTappedEventArgs 정의 및 ItemIndex 속성을 지정합니다GroupItem.
  • Refreshing에서 새로 고침을 위한 끌어오기 작업이 트리거될 때 발생하는 ListView입니다.
  • Scrolled, . ScrolledEventArgs 이 이벤트와 함께 제공되는 개체는 정의 및 ScrollY 속성을 정의합니다ScrollX.
  • ScrollToRequested . 이 이벤트와 함께 제공되는 개체는 ScrollToRequestedEventArgs , Mode, Position, ScrollXScrollY및 ShouldAnimate 속성을 정의합니다Element.

ListView를 데이터로 채우기

A ListView 는 해당 ItemsSource 속성을 구현하는 컬렉션으로 설정하여 데이터로 채워집니다 IEnumerable.

Important

기본 컬렉션에서 ListView 항목이 추가, 제거 또는 변경될 때 새로 고쳐야 하는 경우 기본 컬렉션은 속성 ObservableCollection변경 알림을 보내는 컬렉션이어야 IEnumerable 합니다.

ListView 는 데이터 바인딩을 사용하여 해당 ItemsSource 속성을 컬렉션에 바인딩하여 데이터로 채울 수 IEnumerable 있습니다. XAML에서는 태그 확장을 사용하여 Binding 이 작업을 수행합니다.

<ListView ItemsSource="{Binding Monkeys}" />

해당하는 C# 코드는 다음과 같습니다.

ListView listView = new ListView();
listView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

이 예제 ItemsSource 에서는 속성 데이터가 연결된 viewmodel의 속성에 바인딩됩니다 Monkeys .

참고 항목

컴파일된 바인딩을 사용하도록 설정하여 .NET MAUI 애플리케이션에서 데이터 바인딩 성능을 향상시킬 수 있습니다. 자세한 내용은 컴파일된 바인딩을 참조 하세요.

데이터 바인딩에 대한 자세한 내용은 데이터 바인딩을 참조하세요.

항목 모양 정의

속성을 다음으로 ListView 설정하여 각 항목의 ItemTemplate 모양을 정의할 DataTemplate수 있습니다.

<ListView ItemsSource="{Binding Monkeys}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.RowSpan="2"
                           Source="{Binding ImageUrl}"
                           Aspect="AspectFill"
                           HeightRequest="60"
                           WidthRequest="60" />
                    <Label Grid.Column="1"
                           Text="{Binding Name}"
                           FontAttributes="Bold" />
                    <Label Grid.Row="1"
                           Grid.Column="1"
                           Text="{Binding Location}"
                           FontAttributes="Italic"
                           VerticalOptions="End" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

목록에 있는 DataTemplate 각 항목의 모양을 정의하는 데 지정된 요소이며 해당 자식은 DataTemplate 개체여야 Cell 합니다. 예제에서 레이아웃 내의 DataTemplate 레이아웃은 .에 Grid의해 관리됩니다. 클래스 Grid 의 속성에 Image 모두 바인딩되는 개체와 두 개의 Label 개체가 Monkey 포함됩니다.

public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

다음 스크린샷은 목록의 각 항목을 템플릿으로 지정한 결과를 보여줍니다.

각 항목이 템플릿으로 작성되는 ListView의 스크린샷.

데이터 템플릿에 대한 자세한 내용은 데이터 템플릿을 참조 하세요.

셀

에 ListView 있는 각 항목의 모양은 a에 의해 DataTemplate정의되며 DataTemplate 항목을 표시하려면 클래스를 Cell 참조해야 합니다. 각 셀은 에 있는 ListView데이터의 항목을 나타냅니다. .NET MAUI에는 다음과 같은 기본 제공 셀이 포함되어 있습니다.

  • TextCell- 기본 텍스트와 보조 텍스트를 별도의 줄에 표시합니다.
  • ImageCell- 기본 및 보조 텍스트가 있는 이미지를 별도의 줄에 표시합니다.
  • SwitchCell- 켜거나 끌 수 있는 텍스트와 스위치를 표시합니다.
  • EntryCell- 편집 가능한 레이블 및 텍스트를 표시합니다.
  • ViewCell- 모양이 .에 의해 정의된 사용자 지정 셀입니다 View. 이 셀 형식은 에 있는 ListView각 항목의 모양을 완전히 정의하려는 경우에 사용해야 합니다.

일반적으로 a SwitchCell EntryCell 에서 TableView 만 사용되며 에 사용되지 ListView않습니다. 자세한 내용은 TableView를 SwitchCell EntryCell참조 하세요.

텍스트 셀

기본 TextCell 텍스트와 보조 텍스트를 별도의 줄에 표시합니다. TextCell는 다음 속성을 정의합니다.

  • Text형식 string의 은 표시할 기본 텍스트를 정의합니다.
  • TextColor형식 Color의 는 기본 텍스트의 색을 나타냅니다.
  • Detail형식 string의 은 표시할 보조 텍스트를 정의합니다.
  • DetailColor의 형식 Color은 보조 텍스트의 색을 나타냅니다.
  • Command형식 ICommand의 셀을 탭할 때 실행되는 명령을 정의합니다.
  • CommandParameter형식 object의 는 명령에 전달되는 매개 변수를 나타냅니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

다음 예제에서는 a를 TextCell 사용하여 다음 항목의 모양을 정의하는 방법을 보여 있습니다.ListView

<ListView ItemsSource="{Binding Food}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}"
                      Detail="{Binding Description}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

다음 스크린샷은 결과 셀 모양을 보여줍니다.

각 항목이 TextCell인 ListView의 스크린샷

이미지 셀

기본 ImageCell 및 보조 텍스트가 있는 이미지를 별도의 줄에 표시합니다. ImageCell 에서 속성을 TextCell상속하고 셀에 ImageSource 표시할 이미지를 지정하는 형식 ImageSource의 속성을 정의합니다. 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

다음 예제에서는 ImageCell 에 ListView있는 항목의 모양을 정의하는 방법을 보여줍니다.

<ListView ItemsSource="{Binding Food}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ImageCell ImageSource="{Binding Image}"
                       Text="{Binding Name}"
                       Detail="{Binding Description}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

다음 스크린샷은 결과 셀 모양을 보여줍니다.

각 항목이 ImageCell인 ListView의 스크린샷.

셀 보기

A ViewCell 는 모양이 .에 의해 정의된 사용자 지정 셀입니다 View. ViewCell 는 View 셀의 내용을 나타내는 뷰를 정의하는 형식 View의 속성을 정의합니다. 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

참고 항목

View 속성은 ViewCell 클래스의 콘텐츠 속성이므로 XAML에서 명시적으로 설정할 필요가 없습니다.

다음 예제에서는 a를 ViewCell 사용하여 다음 항목의 모양을 정의하는 방법을 보여 있습니다.ListView

<ListView ItemsSource="{Binding Monkeys}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.RowSpan="2"
                           Source="{Binding ImageUrl}"
                           Aspect="AspectFill"
                           HeightRequest="60"
                           WidthRequest="60" />
                    <Label Grid.Column="1"
                           Text="{Binding Name}"
                           FontAttributes="Bold" />
                    <Label Grid.Row="1"
                           Grid.Column="1"
                           Text="{Binding Location}"
                           FontAttributes="Italic"
                           VerticalOptions="End" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

내부 레이아웃은 ViewCell모든 .NET MAUI 레이아웃으로 관리할 수 있습니다. 이 예제에서는 레이아웃이 .에 Grid의해 관리됩니다. 클래스 Grid 의 속성에 모두 바인딩되는 Image 개체와 두 개의 Label 개체가 Monkey 포함됩니다.

다음 스크린샷은 목록의 각 항목을 템플릿으로 지정한 결과를 보여줍니다.

각 항목이 ViewCell을 사용하여 템플릿으로 지정되는 ListView의 스크린샷

런타임에 항목 모양 선택

속성을 DataTemplateSelector 개체로 ListView 설정 ItemTemplate 하여 런타임에 각 항목의 모양을 항목 값에 따라 선택할 수 있습니다.

<ContentPage ...
             xmlns:templates="clr-namespace:ListViewDemos.Templates">
    <ContentPage.Resources>
        <DataTemplate x:Key="AmericanMonkeyTemplate">
            <ViewCell>
                ...
            </ViewCell>
        </DataTemplate>

        <DataTemplate x:Key="OtherMonkeyTemplate">
            <ViewCell>
                ...
            </ViewCell>
        </DataTemplate>

        <templates:MonkeyDataTemplateSelector x:Key="MonkeySelector"
                                             AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
                                             OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
    </ContentPage.Resources>

    <Grid Margin="20">
        <ListView ItemsSource="{Binding Monkeys}"
                  ItemTemplate="{StaticResource MonkeySelector}" />
    </Grid>
</ContentPage>

ItemTemplate 속성이 개체로 MonkeyDataTemplateSelector 설정됩니다. 다음 예제에서는 클래스를 보여줍니다.MonkeyDataTemplateSelector

public class MonkeyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate AmericanMonkey { get; set; }
    public DataTemplate OtherMonkey { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Monkey)item).Location.Contains("America") ? AmericanMonkey : OtherMonkey;
    }
}

클래스는 MonkeyDataTemplateSelector AmericanMonkey OtherMonkey DataTemplate 다른 데이터 템플릿으로 설정된 속성을 정의합니다. 재정의는 OnSelectTemplate 원숭이 이름에 AmericanMonkey "America"가 포함된 경우 청록색으로 원숭이 이름과 위치를 표시하는 템플릿을 반환합니다. 원숭이 이름에 "America"가 포함되지 않은 경우 재정의 OnSelectTemplate 는 템플릿을 OtherMonkey 반환하며, 이 템플릿은 원숭이 이름과 위치를 은색으로 표시합니다.

ListView 런타임 항목 템플릿 선택 스크린샷

데이터 템플릿 선택기에 대한 자세한 내용은 DataTemplateSelector 만들기를 참조하세요.

항목 선택에 응답

기본적으로 ListView 선택은 사용하도록 설정됩니다. 그러나 이 동작은 속성을 설정 SelectionMode 하여 변경할 수 있습니다. ListViewSelectionMode 열거형은 다음 멤버를 정의합니다.

  • None – 항목을 선택할 수 없음을 나타냅니다.
  • Single – 선택한 항목이 강조 표시된 상태에서 단일 항목을 선택할 수 있음을 나타냅니다. 기본값입니다.

ListView 는 ItemSelected 사용자가 목록에서 항목을 선택하거나 앱이 속성을 설정하는 경우 속성이 변경될 때 발생하는 SelectedItem 이벤트를 정의합니다. SelectedItemChangedEventArgs 이 이벤트와 함께 제공되는 개체에는 SelectedItem 속성이 있습니다SelectedItemIndex.

속성이 SelectionMode 설정된 Single경우 이 속성의 ListView 단일 항목을 선택할 수 있습니다. 항목을 선택하면 속성이 SelectedItem 선택한 항목의 값으로 설정됩니다. 이 속성이 ItemSelected 변경되면 이벤트가 발생합니다.

다음 예제에서는 단일 항목 선택 항목에 응답할 수 있는 방법을 보여 ListView 주는 예제입니다.

<ListView ItemsSource="{Binding Monkeys}"
          ItemSelected="OnItemSelected">
    ...
</ListView>

이 예제 OnItemSelected 에서는 이벤트가 발생할 때 ItemSelected 이벤트 처리기가 실행되고 이벤트 처리기가 선택한 항목을 검색합니다.

void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
{
    Monkey item = args.SelectedItem as Monkey;
}

다음 스크린샷은 다음과 같은 단일 항목 선택 항목을 보여 있습니다.ListView

선택 영역이 있는 ListView의 스크린샷

선택 영역 지우기

SelectedItem 속성을 설정하거나 바인딩null하는 개체를 으로 설정하여 속성을 지울 수 있습니다.

선택 안 함

ListView 선택 영역은 기본적으로 사용하도록 설정되어 있습니다. 그러나 속성을 None다음으로 설정하여 사용하지 않도록 설정할 SelectionMode 수 있습니다.

<ListView ...
          SelectionMode="None" />

SelectionMode 속성을 설정None하면 해당 항목을 ListView 선택할 수 없고 속성이 SelectedItem 유지null되며 ItemSelected 이벤트가 발생하지 않습니다.

데이터 캐시

ListView 는 데이터를 표시하기 위한 강력한 보기이지만 몇 가지 제한 사항이 있습니다. 사용자 지정 셀을 사용할 때 스크롤 성능이 저하될 수 있습니다. 특히 중첩된 뷰 계층 구조가 깊거나 복잡한 측정이 필요한 특정 레이아웃을 사용하는 경우 더욱 그렇습니다. 다행히 성능 저하를 방지하는 데 사용할 수 있는 기술이 있습니다.

A ListView 는 화면에 맞는 것보다 훨씬 더 많은 데이터를 표시하는 데 자주 사용됩니다. 예를 들어 음악 앱에는 수천 개의 항목이 있는 노래 라이브러리가 있을 수 있습니다. 모든 항목에 대한 항목을 만들면 귀중한 메모리가 낭비되고 성능이 저조합니다. 행을 지속적으로 만들고 삭제하려면 앱이 개체를 지속적으로 인스턴스화하고 정리해야 하므로 성능이 저조합니다.

메모리를 절약하기 위해 각 플랫폼에 해당하는 네이티브 ListView 에는 행을 재사용하기 위한 기본 제공 기능이 있습니다. 화면에 표시되는 셀만 메모리에 로드되고 콘텐츠가 기존 셀에 로드됩니다. 이 패턴은 앱이 수천 개의 개체를 인스턴스화하여 시간과 메모리를 절약하는 것을 방지합니다.

.NET MAUI는 다음 멤버를 ListView 정의하는 열거형을 통해 ListViewCachingStrategy 셀 재사용을 허용합니다.

  • RetainElement는 목록의 ListView 각 항목에 대한 셀을 생성할 것을 지정합니다.
  • RecycleElement는 목록 셀을 ListView 재활용하여 메모리 공간 및 실행 속도를 최소화하도록 지정합니다.
  • RecycleElementAndDataTemplateRecycleElement- 또한 개체를 사용할 DataTemplateSelectorDataTemplate 때 ListView 목록의 항목 유형에 의해 캐시되도록 합니다.

요소 보존

RetainElement 캐싱 전략은 목록의 ListView 각 항목에 대한 셀을 생성하며 기본 ListView 동작임을 지정합니다. 다음과 같은 경우에 사용해야 합니다.

  • 각 셀에는 많은 수의 바인딩이 있습니다(20-30 이상).
  • 셀 서식 파일이 자주 변경됩니다.
  • 테스트 결과 캐싱 전략으로 RecycleElement 인해 실행 속도가 감소하는 것으로 나타났습니다.

사용자 지정 셀을 사용할 때 캐싱 전략의 RetainElement 결과를 인식하는 것이 중요합니다. 셀 초기화 코드는 각 셀 만들기에 대해 실행해야 하며, 초당 여러 번 실행될 수 있습니다. 이 경우 여러 개의 중첩된 Grid 개체를 사용하는 것과 같이 페이지에서 잘 작동하는 레이아웃 기술은 사용자가 스크롤할 때 실시간으로 설정 및 제거될 때 성능 병목 상태가 됩니다.

요소 재활용

RecycleElement 캐싱 전략은 목록 셀을 재활용하여 메모리 공간 및 실행 속도를 최소화하도록 지정 ListView 합니다. 이 모드가 항상 성능 향상을 제공하는 것은 아닙니다. 향상된 성능을 확인하기 위해 테스트를 수행해야 합니다. 그러나 선호하는 선택이며 다음과 같은 경우에 사용해야 합니다.

  • 각 셀에는 작은 수에서 보통 수의 바인딩이 있습니다.
  • 각 셀은 BindingContext 모든 셀 데이터를 정의합니다.
  • 각 셀은 크게 비슷하며 셀 템플릿이 흔들리지 않습니다.

가상화 중에 셀의 바인딩 컨텍스트가 업데이트되므로 앱에서 이 모드를 사용하는 경우 바인딩 컨텍스트 업데이트가 적절하게 처리되도록 해야 합니다. 셀에 대한 모든 데이터는 바인딩 컨텍스트에서 제공해야 합니다. 그렇지 않은 경우 일관성 오류가 발생할 수 있습니다. 데이터 바인딩을 사용하여 셀 데이터를 표시하여 이 문제를 방지할 수 있습니다. 또는 다음 예제와 OnBindingContextChanged 같이 사용자 지정 셀의 생성자가 아닌 재정의에서 셀 데이터를 설정해야 합니다.

public class CustomCell : ViewCell
{
    Image image = null;

    public CustomCell()
    {
        image = new Image();
        View = image;
    }

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        var item = BindingContext as ImageItem;
        if (item != null)
        {
            image.Source = item.ImageUrl;
        }
    }
}

DataTemplateSelector를 사용하여 요소 재활용

a를 ListView DataTemplateSelector 사용하여 선택하는 DataTemplateRecycleElement 경우 캐싱 전략은 개체를 캐시 DataTemplate 하지 않습니다. 대신 DataTemplate 목록의 각 데이터 항목에 대해 a가 선택됩니다.

참고 항목

RecycleElement 캐싱 전략을 사용하려면 각각 DataTemplate 동일한 ViewCell 형식을 DataTemplateSelector 반환해야 하는 캐싱을 DataTemplate 선택하라는 메시지가 표시되어야 합니다. 예를 들어 ListView DataTemplateSelector 반환할 수 있는(형식MyViewCellA을 반환 MyDataTemplateA 하는 경우MyDataTemplateA) 또는 MyDataTemplateB (형식을 MyViewCellB반환 ViewCell ViewCell 하는 경우MyDataTemplateB) MyDataTemplateA 반환되는 경우 반환 MyViewCellA 해야 하거나 예외가 throw됩니다.

DataTemplates를 사용하여 요소 재활용

RecycleElementAndDataTemplate 캐싱 전략은 캐싱 전략을 기반으로 RecycleElement 하며, 또한 a를 사용하여 DataTemplateSelector 선택할 DataTemplateDataTemplate 때 ListView 개체가 목록의 항목 유형에 의해 캐시되도록 합니다. 따라서 DataTemplate 개체는 항목 인스턴스당 한 번이 아니라 항목 유형별로 한 번 선택됩니다.

참고 항목

RecycleElementAndDataTemplate 캐싱 전략을 사용하려면 반환 DataTemplateSelector 된 DataTemplate 개체가 을 사용하는 Type생성자를 사용해야 DataTemplate 합니다.

캐싱 전략 설정

ListView 캐싱 전략은 XAML에서 특성을 설정 CachingStrategy 하여 정의할 수 있습니다.

<ListView CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
              ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

C#에서 캐싱 전략은 생성자 오버로드를 통해 설정됩니다.

ListView listView = new ListView(ListViewCachingStrategy.RecycleElement);

서브클래싱된 ListView에서 캐싱 전략 설정

CachingStrategy 서브클래스 ListView 된 XAML에서 특성을 설정해도 속성ListView이 없 CachingStrategy 으므로 원하는 동작이 생성되지 않습니다. 이 문제에 대한 해결 방법은 매개 변수를 수락 ListViewCachingStrategy 하고 기본 클래스에 전달하는 서브클래스에 ListView 생성자를 지정하는 것입니다.

public class CustomListView : ListView
{
    public CustomListView (ListViewCachingStrategy strategy) : base (strategy)
    {
    }
    ...
}

ListViewCachingStrategy 그런 다음, 특성을 사용하여 x:Arguments XAML에서 열거형 값을 지정할 수 있습니다.

<local:CustomListView>
    <x:Arguments>
        <ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
    </x:Arguments>
</local:CustomListView>

머리글 및 바닥글

ListView 는 목록의 항목과 함께 스크롤되는 머리글과 바닥글을 표시할 수 있습니다. 머리글과 바닥글은 문자열, 뷰 또는 DataTemplate 개체일 수 있습니다.

ListView 는 머리글 및 바닥글을 지정하기 위해 다음 속성을 정의합니다.

  • Header의 형식 object은 목록의 시작 부분에 표시될 문자열, 바인딩 또는 뷰를 지정합니다.
  • HeaderTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Header지정합니다.
  • Footer의 형식 object은 목록의 끝에 표시될 문자열, 바인딩 또는 뷰를 지정합니다.
  • FooterTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Footer지정합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.

Header 다음 예제와 같이 속성과 Footer 속성을 값으로 설정할 string 수 있습니다.

<ListView ItemsSource="{Binding Monkeys}"
          Header="Monkeys"
          Footer="2022">
    ...
</ListView>

다음 스크린샷은 결과 헤더를 보여줍니다.

ListView 문자열 헤더의 스크린샷.

및 Footer 속성은 Header 각각 보기로 설정할 수 있습니다. 단일 보기 또는 여러 자식 뷰가 포함된 보기일 수 있습니다. 다음 예제에서는 각 집합이 Header 개체를 포함하는 개체로 Grid 설정된 속성과 Footer 속성을 보여 줍니다Label.

<ListView ItemsSource="{Binding Monkeys}">
    <ListView.Header>
        <Grid BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="12"
                   FontAttributes="Bold" />
        </Grid>
    </ListView.Header>
    <ListView.Footer>
        <Grid BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Monkey"
                   FontSize="12"
                   FontAttributes="Bold" />
        </Grid>
    </ListView.Footer>
    ...
</ListView>

다음 스크린샷은 결과 헤더를 보여줍니다.

보기를 사용하는 CollectionView 머리글 및 바닥글의 스크린샷

및 FooterTemplate 속성은 HeaderTemplate 머리글과 바닥글의 서식을 지정하는 데 사용되는 개체로 설정할 DataTemplate 수 있습니다. 이 시나리오 Header 에서는 다음 예제와 같이 템플릿을 적용하기 위해 속성과 Footer 속성을 현재 원본에 바인딩해야 합니다.

<ListView ItemsSource="{Binding Monkeys}"
          Header="{Binding .}"
          Footer="{Binding .}">
    <ListView.HeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="12"
                       FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </ListView.HeaderTemplate>
    <ListView.FooterTemplate>
        <DataTemplate>
            <Grid BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Monkey"
                       FontSize="12"
                       FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </ListView.FooterTemplate>
    ...
</ListView>

컨트롤 항목 구분 기호

기본적으로 iOS와 Android의 항목 간에 ListView 구분 기호가 표시됩니다. 이 동작은 형식SeparatorVisibilityNone의 속성을 다음으로 설정 SeparatorVisibility 하여 변경할 수 있습니다.

<ListView ...
          SeparatorVisibility="None" />

또한 구분 기호를 사용하도록 설정하면 속성을 사용하여 색을 SeparatorColor 설정할 수 있습니다.

<ListView ...
          SeparatorColor="Blue" />

항목 크기 조정

기본적으로 모든 항목의 ListView 높이가 같으며 각 항목의 DataTemplate 모양을 정의하는 내용에서 파생됩니다. 그러나 이 동작은 속성과 RowHeight 함께 HasUnevenRows 변경할 수 있습니다. 기본적으로 속성은 HasUnevenRows .입니다 false.

속성이 RowHeight 있는 경우 HasUnevenRows 각 항목ListView의 높이를 나타내는 속성으로 설정할 int 수 있습니다false. HasUnevenRows 설정true되면 각 항목의 높이가 ListView 다를 수 있습니다. 각 항목의 높이는 항목의 내용에서 파생되므로 각 항목의 DataTemplate크기는 해당 콘텐츠에 맞게 조정됩니다.

속성 ListView 이 있는 경우 HasUnevenRows 개별 항목은 런타임에 내 요소DataTemplate의 레이아웃 관련 속성을 변경하여 프로그래밍 방식으로 크기를 조정할 수 있습니다true. 다음 예제에서는 탭할 때 개체의 Image 높이를 변경합니다.

void OnImageTapped(object sender, EventArgs args)
{
    Image image = sender as Image;
    ViewCell viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250)
    {
      image.HeightRequest = image.Height + 100;
      viewCell.ForceUpdateSize();
    }
}

이 예제에서는 OnImageTapped 이벤트 처리기가 탭되는 개체에 대한 응답으로 Image 실행됩니다. 이벤트 처리기는 높이 Image 를 업데이트하고 Cell.ForceUpdateSize 메서드는 현재 표시되지 않는 경우에도 셀의 크기를 업데이트합니다.

Warning

동적 항목 크기 조정을 과도하게 사용하면 성능이 저하될 ListView 수 있습니다.

오른쪽에서 왼쪽 레이아웃

ListView 에서는 속성을 .로 설정 FlowDirection 하여 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃할 RightToLeft수 있습니다. 그러나 이 속성은 FlowDirection 페이지 또는 루트 레이아웃에서 설정해야 하며, 이로 인해 페이지 내의 모든 요소 또는 루트 레이아웃이 흐름 방향에 응답합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListViewDemos.RightToLeftListPage"
             Title="Right to left list"
             FlowDirection="RightToLeft">
    <Grid Margin="20">
        <ListView ItemsSource="{Binding Monkeys}">
            ...
        </ListView>
    </Grid>
</ContentPage>

부모가 있는 요소의 기본값 FlowDirection 은 .입니다 MatchParent. 따라서 ListView 속성 값을 Grid상속합니다FlowDirection. 이 값은 다시 속성 값을 ContentPage상속합니다FlowDirection.

그룹화된 데이터 표시

큰 데이터 집합은 계속해서 스크롤하는 목록에 표시될 때 다루기 어려울 수 있습니다. 이 시나리오에서 데이터를 그룹으로 구성하면 데이터를 보다 쉽게 탐색할 수 있으므로 사용자 환경이 향상될 수 있습니다.

데이터를 표시하려면 먼저 데이터를 그룹화해야 합니다. 이 작업은 각 그룹이 항목 목록인 그룹 목록을 만들어 수행할 수 있습니다. 그룹 목록은 두 개의 데이터를 정의하는 컬렉션 T 이어야 IEnumerable<T> 합니다.

  • 그룹 이름입니다.
  • IEnumerable 그룹에 속하는 항목을 정의하는 컬렉션입니다.

따라서 데이터를 그룹화하기 위한 프로세스는 다음과 같습니다.

  • 단일 항목을 모델하는 형식을 만듭니다.
  • 단일 항목 그룹을 모델로 하는 형식을 만듭니다.
  • IEnumerable<T> 단일 항목 그룹을 모델로 하는 형식인 컬렉션을 T 만듭니다. 이 컬렉션은 그룹화된 데이터를 저장하는 그룹의 컬렉션입니다.
  • 컬렉션에 데이터를 추가합니다 IEnumerable<T> .

예시

데이터를 그룹화할 때 첫 번째 단계는 단일 항목을 모델링하는 형식을 만드는 것입니다. 다음 예제에서는 클래스를 보여줍니다.Animal

public class Animal
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

클래스는 Animal 단일 항목을 모델화합니다. 그런 다음 항목 그룹을 모델로 하는 형식을 만들 수 있습니다. 다음 예제에서는 클래스를 보여줍니다.AnimalGroup

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }
}

클래스는 AnimalGroup 클래스에서 List<T> 상속되고 그룹 이름을 나타내는 속성을 추가 Name 합니다.

IEnumerable<T> 그런 다음 그룹 컬렉션을 만들 수 있습니다.

public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();

이 코드는 컬렉션의 각 항목이 개체인 명명 Animals된 AnimalGroup 컬렉션을 정의합니다. 각 AnimalGroup 개체는 이름 및 List<Animal> 그룹의 개체를 정의하는 컬렉션으로 구성됩니다 Animal .

그런 다음 그룹화된 데이터를 컬렉션에 추가할 수 있습니다.Animals

Animals.Add(new AnimalGroup("Bears", new List<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
    // ...
}));

Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
    // ...
}));

이 코드는 컬렉션에 Animals 두 개의 그룹을 만듭니다. 첫 번째 AnimalGroup 이름은 곰 Bears세부 정보 컬렉션을 포함합니다 List<Animal> . 두 번째 AnimalGroup 이름은 이름이 지정 Monkeys되며 원숭이 세부 정보 컬렉션을 포함합니다 List<Animal> .

ListView 는 다음으로 속성을 설정 IsGroupingEnabled 하여 데이터가 올바르게 그룹화된 경우 그룹화된 데이터를 표시합니다 true.

<ListView ItemsSource="{Binding Animals}"
          IsGroupingEnabled="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.RowSpan="2"
                           Source="{Binding ImageUrl}"
                           Aspect="AspectFill"
                           HeightRequest="60"
                           WidthRequest="60" />
                    <Label Grid.Column="1"
                           Text="{Binding Name}"
                           FontAttributes="Bold" />
                    <Label Grid.Row="1"
                           Grid.Column="1"
                           Text="{Binding Location}"
                           FontAttributes="Italic"
                           VerticalOptions="End" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

해당하는 C# 코드는 다음과 같습니다.

ListView listView = new ListView
{
    IsGroupingEnabled = true
};
listView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...

각 항목 ListView 의 모양은 해당 ItemTemplate 속성을 .로 설정하여 DataTemplate정의됩니다. 자세한 내용은 항목 모양 정의를 참조 하세요.

다음 스크린샷은 그룹화된 데이터를 표시하는 것을 보여줍니다 ListView .

ListView의 그룹화된 데이터 스크린샷

참고 항목

기본적으로 ListView 그룹 머리글에 그룹 이름이 표시됩니다. 이 동작은 그룹 헤더를 사용자 지정하여 변경할 수 있습니다.

그룹 헤더 사용자 지정

속성을 DataTemplate다음으로 설정하여 각 그룹 헤더의 ListView.GroupHeaderTemplate 모양을 사용자 지정할 수 있습니다.

<ListView ItemsSource="{Binding Animals}"
          IsGroupingEnabled="True">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}"
                       BackgroundColor="LightGray"
                       FontSize="18"
                       FontAttributes="Bold" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    ...
</ListView>

이 예제에서 각 그룹 머리글은 그룹 이름을 표시하고 다른 모양 속성이 설정된 것으로 설정 Label 됩니다. 다음 스크린샷은 사용자 지정된 그룹 헤더를 보여줍니다.

ListView에서 사용자 지정된 그룹 헤더의 스크린샷

Important

속성은 GroupHeaderTemplate 속성과 함께 사용할 수 GroupDisplayBinding 없습니다. 따라서 두 속성을 모두 설정하면 안 됩니다.

템플릿이 없는 그룹화

ListView 는 속성을 다음으로 설정 ItemTemplate 하지 않고 올바르게 그룹화된 데이터를 표시할 수 있습니다 DataTemplate.

<ListView ItemsSource="{Binding Animals}"
          IsGroupingEnabled="true" />

이 시나리오에서는 단일 항목을 모델링하는 형식과 단일 항목 그룹을 모델링하는 ToString 형식의 메서드를 재정의하여 의미 있는 데이터를 표시할 수 있습니다.

컨트롤 스크롤

ListView 는 항목을 보기로 스크롤하는 두 가지 ScrollTo 메서드를 정의합니다. 오버로드 중 하나는 지정된 항목을 보기로 스크롤하고 다른 하나는 지정된 그룹의 지정된 항목을 보기로 스크롤합니다. 두 오버로드에는 스크롤이 완료된 후 항목의 정확한 위치를 지정하고 스크롤에 애니메이션을 적용할지 여부를 허용하는 추가 인수가 있습니다.

ListView 는 ScrollToRequested 메서드 중 ScrollTo 하나가 호출될 때 발생하는 이벤트를 정의합니다. ScrollToRequestedEventArgs 이벤트와 함께 ScrollToRequested 제공되는 개체에는 , Element, 및 Position를 비롯한 ShouldAnimate많은 속성이 Mode있습니다. 이러한 속성 중 일부는 메서드 호출에 지정된 인수에서 ScrollTo 설정됩니다.

또한 ListView 스크롤이 발생했음을 Scrolled 나타내기 위해 발생하는 이벤트를 정의합니다. ScrolledEventArgs 이벤트와 함께 Scrolled 제공되는 개체와 ScrollY 속성이 있습니다ScrollX.

스크롤 감지

ListView 는 Scrolled 스크롤이 발생했음을 나타내기 위해 발생하는 이벤트를 정의합니다. 이벤트와 함께 Scrolled 제공되는 개체를 나타내는 클래스는 ItemsViewScrolledEventArgs 다음 속성을 정의합니다.

  • ScrollX형식 double의 < a0/>는 스크롤의 X 위치를 나타냅니다.
  • ScrollY형식 double의 는 스크롤의 Y 위치를 나타냅니다.

다음 XAML 예제에서는 이벤트에 대한 Scrolled 이벤트 처리기를 설정하는 방법을 보여줍니다ListView.

<ListView Scrolled="OnListViewScrolled">
    ...
</ListView>

해당하는 C# 코드는 다음과 같습니다.

ListView listView = new ListView();
listView.Scrolled += OnListViewScrolled;

이 코드 예제 OnListViewScrolled 에서는 이벤트가 발생할 때 Scrolled 이벤트 처리기가 실행됩니다.

void OnListViewScrolled(object sender, ScrolledEventArgs e)
{
    // Custom logic
}

Important

이 Scrolled 이벤트는 사용자가 시작한 스크롤 및 프로그래밍 방식 스크롤에 대해 발생합니다.

항목을 보기로 스크롤

메서드는 ScrollTo 지정된 항목을 보기로 스크롤합니다. 이름이 지정된 listView개체를 ListView 지정하면 다음 예제에서는 Proboscis Monkey 항목을 보기로 스크롤하는 방법을 보여 줍니다.

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
listView.ScrollTo(monkey, ScrollToPosition.MakeVisible, true);

또는 그룹화된 데이터의 항목을 항목과 그룹을 지정하여 보기로 스크롤할 수 있습니다. 다음 예제에서는 원숭이 그룹의 Proboscis 원숭이 항목을 보기로 스크롤하는 방법을 보여 줍니다.

GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
listView.ScrollTo(monkey, group, ScrollToPosition.MakeVisible, true);

참고 항목

ScrollToRequested 메서드가 호출될 때 ScrollTo 이벤트가 발생합니다.

스크롤 애니메이션 사용 안 함

항목을 보기로 스크롤할 때 스크롤 애니메이션이 표시됩니다. 그러나 메서드false의 인수를 다음으로 설정하여 이 애니메이션을 animated ScrollTo 사용하지 않도록 설정할 수 있습니다.

listView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible, animate: false);

컨트롤 스크롤 위치

항목을 보기로 스크롤할 때 스크롤이 완료된 후 항목의 정확한 위치를 메서드의 ScrollTo 인수로 position 지정할 수 있습니다. 이 인수는 열거형 멤버를 ScrollToPosition 허용합니다.

MakeVisible

멤버는 ScrollToPosition.MakeVisible 항목이 보기에 표시될 때까지 스크롤되어야 임을 나타냅니다.

listView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible, animate: true);

Start

멤버는 ScrollToPosition.Start 항목이 보기의 시작 부분까지 스크롤되어야 했음을 나타냅니다.

listView.ScrollTo(monkey, position: ScrollToPosition.Start, animate: true);

가운데 맞춤

멤버는 ScrollToPosition.Center 항목이 보기의 가운데로 스크롤되어야 임을 나타냅니다.

listView.ScrollTo(monkey, position: ScrollToPosition.Center, animate: true);

끝

멤버는 ScrollToPosition.End 항목이 보기의 끝까지 스크롤되어야 했음을 나타냅니다.

listView.ScrollTo(monkey, position: ScrollToPosition.End, animate: true);

스크롤 막대 표시 유형

ListView 바인딩 가능한 속성에 HorizontalScrollBarVisibility 의해 지원되는 정의 및 VerticalScrollBarVisibility 속성입니다. 이러한 속성은 가로 또는 세로 ScrollBarVisibility 스크롤 막대가 표시되는 시기를 나타내는 열거형 값을 얻거나 설정합니다. ScrollBarVisibility 열거형은 다음 멤버를 정의합니다.

  • Default는 플랫폼의 기본 스크롤 막대 동작을 나타내며, 해당 및 VerticalScrollBarVisibility 속성의 HorizontalScrollBarVisibility 기본값입니다.
  • Always 은 콘텐츠가 보기에 맞는 경우에도 스크롤 막대가 표시될 것임을 나타냅니다.
  • Never 는 내용이 보기에 맞지 않더라도 스크롤 막대가 표시되지 않음을 나타냅니다.

상황에 맞는 메뉴 추가

ListView는 각 항목의 컬렉션 DataTemplate 에 추가 ViewCell.ContextActions 되는 개체로 MenuItem 정의된 상황에 맞는 메뉴 항목을 지원합니다.

<ListView x:Name="listView"
          ItemsSource="{Binding Monkeys}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Favorite"
                              Command="{Binding Source={x:Reference listView}, Path=BindingContext.FavoriteCommand}"
                              CommandParameter="{Binding}" />
                    <MenuItem Text="Delete"
                              Command="{Binding Source={x:Reference listView}, Path=BindingContext.DeleteCommand}"
                              CommandParameter="{Binding}" />
                </ViewCell.ContextActions>

                ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

개체는 MenuItem 해당 항목이 ListView 마우스 오른쪽 단추로 클릭할 때 표시됩니다.

CollectionView 상황에 맞는 메뉴 항목의 스크린샷

메뉴 항목에 대한 자세한 내용은 표시 메뉴 항목을 참조 하세요.

당겨서 새로 고침

ListView 는 끌어오기 기능을 지원하므로 항목 목록을 끌어서 표시할 데이터를 새로 고칠 수 있습니다.

끌어오기를 사용하도록 설정하여 새로 고치려면 속성을 true.로 설정합니다IsPullToRefreshEnabled. 새로 고침이 트리거되면 ListView 이벤트를 발생 Refreshing 시키고 속성은 IsRefreshing .로 true설정됩니다. 콘텐츠를 새로 고치는 ListView 데 필요한 코드는 이벤트에 대한 Refreshing 처리기 또는 실행 구현 RefreshCommand 에 ICommand 의해 실행되어야 합니다. ListView 새로 고쳐지면 새로 고침 IsRefreshing 이 완료되었음을 나타내기 위해 false속성을 설정하거나 EndRefresh 메서드를 ListView호출해야 합니다.

다음 예제에서는 끌어오기를 ListView 사용하여 새로 고침을 사용하는 방법을 보여줍니다.

<ListView ItemsSource="{Binding Animals}"
          IsPullToRefreshEnabled="true"
          RefreshCommand="{Binding RefreshCommand}"
          IsRefreshing="{Binding IsRefreshing}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

이 예제에서는 사용자가 새로 고침 ICommand 을 시작하면 속성에 정의된 RefreshCommand 항목이 새로 고쳐지게 됩니다. 새로 고침이 발생하는 동안 애니메이션 진행률 원으로 구성된 새로 고침 시각화가 표시됩니다. 속성 값 IsRefreshing 은 새로 고침 작업의 현재 상태를 나타냅니다. 새로 고침이 트리거되면 이 속성은 자동으로 .로 true전환됩니다. 새로 고침이 완료되면 속성을 false다시 설정해야 합니다.