Xamarin.Forms CarouselView 데이터

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

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

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

참고 항목

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

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

CarouselView를 데이터로 채우기

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

Important

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

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

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

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

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

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

참고 항목

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

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

항목 모양 정의

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

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

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

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

carouselView.ItemTemplate = new DataTemplate(() =>
{
    Label nameLabel = new Label { ... };
    nameLabel.SetBinding(Label.TextProperty, "Name");

    Image image = new Image { ... };
    image.SetBinding(Image.SourceProperty, "ImageUrl");

    Label locationLabel = new Label { ... };
    locationLabel.SetBinding(Label.TextProperty, "Location");

    Label detailsLabel = new Label { ... };
    detailsLabel.SetBinding(Label.TextProperty, "Details");

    StackLayout stackLayout = new StackLayout
    {
        Children = { nameLabel, image, locationLabel, detailsLabel }
    };

    Frame frame = new Frame { ... };
    StackLayout rootStackLayout = new StackLayout
    {
        Children = { frame }
    };

    return rootStackLayout;
});

에 있는 DataTemplate 각 항목의 모양 정의에 CarouselView지정된 요소입니다. 이 예제에서 레이아웃 DataTemplate 은 클래스StackLayout의 속성 Monkey 에 모두 바인딩되는 개체와 세 Label 개의 개체를 Image 사용하여 데이터를 관리합니다.

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

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

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

런타임에 항목 모양 선택

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

<ContentPage ...
             xmlns:controls="clr-namespace:CarouselViewDemos.Controls"
             x:Class="CarouselViewDemos.Views.HorizontalLayoutDataTemplateSelectorPage">
    <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>

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

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

CarouselView carouselView = new CarouselView
{
    ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
carouselView.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 반환하며, 이 템플릿은 데이터가 회색으로 표시됩니다.

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

Important

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

표시 지표

항목 수와 현재 위치를 CarouselView나타내는 표시기를 옆에 CarouselView표시할 수 있습니다. 이 작업은 컨트롤을 사용하여 수행할 수 있습니다.IndicatorView

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</StackLayout>

이 예제에서는 IndicatorView 아래의 각 항목CarouselView에 대한 표시기를 사용하여 렌더링CarouselView됩니다. 속성을 IndicatorView 개체로 설정 CarouselView.IndicatorView 하여 데이터로 IndicatorView 채워집니다. 각 표시기는 연한 회색 원이며, 현재 항목을 CarouselView 나타내는 표시기는 진한 회색입니다.

Important

속성을 설정하면 CarouselView.IndicatorView 속성에 IndicatorView.Position 대한 속성 바인딩 CarouselView.Position 과 속성에 IndicatorView.ItemsSource 대한 속성 바인딩이 발생합니다 CarouselView.ItemsSource .

지표에 대한 자세한 내용은 IndicatorView를 참조 Xamarin.Forms 하세요.

상황에 맞는 메뉴

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

<CarouselView x:Name="carouselView"
              ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                    <Frame HasShadow="True"
                           BorderColor="DarkGray"
                           CornerRadius="5"
                           Margin="20"
                           HeightRequest="300"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand">
                        <SwipeView>
                            <SwipeView.TopItems>
                                <SwipeItems>
                                    <SwipeItem Text="Favorite"
                                               IconImageSource="favorite.png"
                                               BackgroundColor="LightGreen"
                                               Command="{Binding Source={x:Reference carouselView}, Path=BindingContext.FavoriteCommand}"
                                               CommandParameter="{Binding}" />
                                </SwipeItems>
                            </SwipeView.TopItems>
                            <SwipeView.BottomItems>
                                <SwipeItems>
                                    <SwipeItem Text="Delete"
                                               IconImageSource="delete.png"
                                               BackgroundColor="LightPink"
                                               Command="{Binding Source={x:Reference carouselView}, Path=BindingContext.DeleteCommand}"
                                               CommandParameter="{Binding}" />
                                </SwipeItems>
                            </SwipeView.BottomItems>
                            <StackLayout>
                                <!-- Define item appearance -->
                            </StackLayout>
                        </SwipeView>
                    </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

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

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

carouselView.ItemTemplate = new DataTemplate(() =>
{
    StackLayout stackLayout = new StackLayout();
    Frame frame = new Frame { ... };

    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: carouselView));
    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: carouselView));
    deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    swipeView.TopItems = new SwipeItems { favoriteSwipeItem };
    swipeView.BottomItems = new SwipeItems { deleteSwipeItem };

    StackLayout swipeViewStackLayout = new StackLayout { ... };
    swipeView.Content = swipeViewStackLayout;
    frame.Content = swipeView;
    stackLayout.Children.Add(frame);

    return stackLayout;
});

이 예제 SwipeView 에서 콘텐츠는 StackLayout 에 있는 항목으로 FrameCarouselView둘러싸인 각 항목의 모양을 정의하는 것입니다. 살짝 밀기 항목은 콘텐츠에 대한 SwipeView 작업을 수행하는 데 사용되며 컨트롤이 위쪽과 아래쪽에서 살짝 밀면 표시됩니다.

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

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

당겨서 새로 고침

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

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

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

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

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = carouselView;
// ...

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

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

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

증분 방식으로 데이터 로드

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

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

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

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

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

참고 항목

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

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

<CarouselView ItemsSource="{Binding Animals}"
              RemainingItemsThreshold="2"
              RemainingItemsThresholdReached="OnCarouselViewRemainingItemsThresholdReached"
              RemainingItemsThresholdReachedCommand="{Binding LoadMoreDataCommand}">
    ...
</CarouselView>

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

CarouselView carouselView = new CarouselView
{
    RemainingItemsThreshold = 2
};
carouselView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");

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

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

참고 항목

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

관련 링크

• Xamarin.Forms IndicatorView
• Xamarin.Forms RefreshView
• Xamarin.Forms 데이터 바인딩
• Xamarin.Forms 데이터 템플릿
• Xamarin.Forms DataTemplateSelector 만들기