Xamarin.Forms CollectionView 데이터

  • 아티클

Download Sample 샘플 다운로드

CollectionView 에는 표시할 데이터와 해당 모양을 정의하는 다음 속성이 포함되어 있습니다.

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

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

참고 항목

CollectionView 는 ItemsUpdatingScrollMode 새 항목이 추가되는 경우의 스크롤 동작을 CollectionView 나타내는 속성을 정의합니다. 이 속성에 대한 자세한 내용은 새 항목이 추가되면 컨트롤 스크롤 위치를 참조하세요.

CollectionView 는 사용자가 스크롤할 때 증분 데이터 가상화를 지원합니다. 자세한 내용은 데이터 증분 로드를 참조 하세요.

Data로 CollectionView 채우기

A CollectionView 는 해당 ItemsSource 속성을 구현하는 컬렉션으로 설정하여 데이터로 채워집니다 IEnumerable. 기본적으로 세로 CollectionView 목록에 항목을 표시합니다.

Important

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

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

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

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

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

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

참고 항목

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

레이아웃을 변경하는 CollectionView 방법에 대한 자세한 내용은 CollectionView 레이아웃을 참조 Xamarin.Forms 하세요. 각 항목 CollectionView의 모양을 정의하는 방법에 대한 자세한 내용은 항목 모양 정의를 참조 하세요. 데이터 바인딩에 대한 자세한 내용은 Xamarin.Forms 데이터 바인딩을 참조하세요.

Warning

CollectionView 는 UI 스레드에서 업데이트되는 경우 ItemsSource 예외를 throw합니다.

항목 모양 정의

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

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <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>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid { Padding = 10 };
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

    Image image = new Image { Aspect = Aspect.AspectFill, HeightRequest = 60, WidthRequest = 60 };
    image.SetBinding(Image.SourceProperty, "ImageUrl");

    Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
    nameLabel.SetBinding(Label.TextProperty, "Name");

    Label locationLabel = new Label { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.End };
    locationLabel.SetBinding(Label.TextProperty, "Location");

    Grid.SetRowSpan(image, 2);

    grid.Children.Add(image);
    grid.Children.Add(nameLabel, 1, 0);
    grid.Children.Add(locationLabel, 1, 1);

    return grid;
});

목록에서 각 항목의 DataTemplate 모양을 정의하는 데 지정된 요소입니다. 예제에서 레이아웃 내의 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; }
}

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

Screenshot of CollectionView where each item is templated, on iOS and Android

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

런타임에 항목 모양 선택

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

<ContentPage ...
             xmlns:controls="clr-namespace:CollectionViewDemos.Controls">
    <ContentPage.Resources>
        <DataTemplate x:Key="AmericanMonkeyTemplate">
            ...
        </DataTemplate>

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

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

    <CollectionView ItemsSource="{Binding Monkeys}"
                    ItemTemplate="{StaticResource MonkeySelector}" />
</ContentPage>

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

CollectionView collectionView = new CollectionView
{
    ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

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;
    }
}

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

Screenshot of CollectionView runtime item template selection, on iOS and Android

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

Important

사용할 CollectionView때는 개체ViewCell의 DataTemplate 루트 요소를 .로 설정하지 마세요. 셀 개념이 없으므로 CollectionView 예외가 throw됩니다.

상황에 맞는 메뉴

CollectionView 는 살짝 밀기 제스처를 사용하여 상황에 맞는 메뉴를 표시하는 데이터 SwipeView항목에 대한 상황에 맞는 메뉴를 지원합니다. 콘텐츠 SwipeView 항목을 래핑하고 해당 콘텐츠 항목에 대한 상황에 맞는 메뉴 항목을 제공하는 컨테이너 컨트롤입니다. 따라서 상황에 맞는 메뉴는 래핑되는 콘텐츠 SwipeView 와 살짝 밀기 제스처로 표시되는 상황에 맞는 메뉴 항목을 정의하는 메뉴를 만들어 SwipeView 구현 CollectionView 됩니다. 이 작업은 다음에서 각 데이터 CollectionView항목의 모양을 정의하는 루트 뷰 DataTemplate 로 설정 SwipeView 하여 수행됩니다.

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItem Text="Favorite"
                                   IconImageSource="favorite.png"
                                   BackgroundColor="LightGreen"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
                                   CommandParameter="{Binding}" />
                        <SwipeItem Text="Delete"
                                   IconImageSource="delete.png"
                                   BackgroundColor="LightPink"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                   CommandParameter="{Binding}" />
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid BackgroundColor="White"
                      Padding="10">
                    <!-- Define item appearance -->
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

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

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    // Define item appearance
    Grid grid = new Grid { Padding = 10, BackgroundColor = Color.White };
    // ...

    SwipeView swipeView = new SwipeView();
    SwipeItem favoriteSwipeItem = new SwipeItem
    {
        Text = "Favorite",
        IconImageSource = "favorite.png",
        BackgroundColor = Color.LightGreen
    };
    favoriteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.FavoriteCommand", source: collectionView));
    favoriteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    SwipeItem deleteSwipeItem = new SwipeItem
    {
        Text = "Delete",
        IconImageSource = "delete.png",
        BackgroundColor = Color.LightPink
    };
    deleteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.DeleteCommand", source: collectionView));
    deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    swipeView.LeftItems = new SwipeItems { favoriteSwipeItem, deleteSwipeItem };
    swipeView.Content = grid;    
    return swipeView;
});

이 예제에서 SwipeView 콘텐츠는 Grid 에 있는 각 항목 CollectionView의 모양을 정의하는 것입니다. 살짝 밀기 항목은 콘텐츠에 대한 SwipeView 작업을 수행하는 데 사용되며 컨트롤이 왼쪽에서 살짝 밀면 표시됩니다.

Screenshot of CollectionView context menu items, on iOS and Android

SwipeView는 개체가 추가되는 방향 컬렉션 SwipeItems 에 의해 SwipeItems 정의되는 살짝 밀기 방향을 사용하여 네 가지 살짝 밀기 방향을 지원합니다. 기본적으로 살짝 밀기 항목은 사용자가 탭할 때 실행됩니다. 또한 살짝 밀기 항목이 실행되면 살짝 밀기 항목이 숨겨지고 콘텐츠가 SwipeView 다시 표시됩니다. 그러나 이러한 동작은 변경할 수 있습니다.

컨트롤에 대한 자세한 내용은 SwipeView를 SwipeView 참조 Xamarin.Forms 하세요.

당겨서 새로 고침

CollectionView 는 끌어오기를 통해 기능을 RefreshView새로 고칠 수 있도록 지원합니다. 그러면 표시되는 데이터를 항목 목록을 끌어서 새로 고칠 수 있습니다. 자 RefreshView 식이 스크롤 가능한 콘텐츠를 지원하는 경우 끌어오기 기능을 자식에 새로 고치는 데 필요한 끌어오기를 제공하는 컨테이너 컨트롤입니다. 따라서 새로 고침을 위해 끌어오기는 다음의 자식으로 설정하여 구현 CollectionView 됩니다.RefreshView

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <CollectionView ItemsSource="{Binding Animals}">
        ...
    </CollectionView>
</RefreshView>

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

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = collectionView;
// ...

사용자가 새로 고침 ICommand 을 시작하면 속성에 정의된 Command 항목이 새로 고쳐집니다. 그러면 표시되는 항목이 새로 고쳐집니다. 새로 고침이 발생하는 동안 새로 고침 시각화가 표시되며 애니메이션 처리된 진행률 원으로 구성됩니다.

Screenshot of CollectionView pull-to-refresh, on iOS and Android

속성 값은 .의 RefreshView.IsRefreshing 현재 상태를 RefreshView나타냅니다. 사용자가 새로 고침을 트리거하면 이 속성이 자동으로 .로 true전환됩니다. 새로 고침이 완료되면 속성을 false다시 설정해야 합니다.

자세한 RefreshView내용은 RefreshView를 참조 Xamarin.Forms 하세요.

증분 방식으로 데이터 로드

CollectionView 는 사용자가 스크롤할 때 증분 데이터 가상화를 지원합니다. 이렇게 하면 사용자가 스크롤할 때 웹 서비스에서 데이터 페이지를 비동기적으로 로드하는 등의 시나리오가 가능합니다. 또한 사용자에게 빈 공간이 표시되지 않거나 스크롤이 중지되도록 더 많은 데이터가 로드되는 지점을 구성할 수 있습니다.

CollectionView 는 데이터의 증분 로드를 제어하기 위해 다음 속성을 정의합니다.

  • RemainingItemsThreshold형식 int의 경우 이벤트가 발생할 목록에 아직 표시되지 않는 항목의 RemainingItemsThresholdReached 임계값입니다.
  • RemainingItemsThresholdReachedCommand에 도달하면 실행되는 형식 ICommand의 RemainingItemsThreshold /a0>입니다.
  • object 형식의 RemainingItemsThresholdReachedCommandParameter - RemainingItemsThresholdReachedCommand에 전달되는 매개 변수입니다.

CollectionView또한 항목이 표시되지 않을 정도로 RemainingItemsThreshold 스크롤될 때 CollectionView 발생하는 이벤트를 정의 RemainingItemsThresholdReached 합니다. 이 이벤트를 처리하여 더 많은 항목을 로드할 수 있습니다. 또한 RemainingItemsThresholdReached 이벤트가 발생하면 RemainingItemsThresholdReachedCommand 실행되어 viewmodel에서 증분 데이터 로드가 수행되도록 합니다.

속성의 RemainingItemsThreshold 기본값은 -1로, 이벤트가 발생하지 않음을 RemainingItemsThresholdReached 나타냅니다. 속성 값이 0 RemainingItemsThresholdReached 이면 이벤트의 마지막 항목 ItemsSource 이 표시될 때 이벤트가 발생합니다. 0보다 큰 값의 RemainingItemsThresholdReached 경우 해당 항목 수가 아직 스크롤되지 않은 경우 이벤트가 발생 ItemsSource 합니다.

참고 항목

CollectionView 값이 RemainingItemsThreshold 항상 -1보다 크거나 같도록 속성의 유효성을 검사합니다.

다음 XAML 예제에서는 데이터를 증분 방식으로 로드하는 방법을 보여 CollectionView 줍니다.

<CollectionView ItemsSource="{Binding Animals}"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");

이 코드 예제 RemainingItemsThresholdReached 에서 이벤트는 아직 스크롤되지 않은 5개 항목이 있을 때 발생하며 응답에서 이벤트 처리기를 실행합니다.OnCollectionViewRemainingItemsThresholdReached

void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
    // Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}

참고 항목

viewmodel의 구현에 바인딩 RemainingItemsThresholdReachedCommand 하여 데이터를 증분 방식으로 로드할 ICommand 수도 있습니다.