Xamarin.ios CarouselView 데이터Xamarin.Forms CarouselView Data

샘플 다운로드 샘플 다운로드Download Sample Download the sample

표시 되는 데이터와 표시 되는 데이터를 정의 하는 다음 속성을 포함 하 CarouselView 입니다.CarouselView includes the following properties that define the data to be displayed, and its appearance:

  • IEnumerable 형식의 ItemsSource는 표시할 항목의 컬렉션을 지정 하 고 기본값은 null입니다.ItemsSource, of type IEnumerable, specifies the collection of items to be displayed, and has a default value of null.
  • DataTemplate형식의 ItemTemplate는 표시할 항목 컬렉션의 각 항목에 적용할 템플릿을 지정 합니다.ItemTemplate, of type DataTemplate, specifies the template to apply to each item in the collection of items to be displayed.

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

참고

CarouselView 새 항목이 추가 될 때 CarouselView의 스크롤 동작을 나타내는 ItemsUpdatingScrollMode 속성을 정의 합니다.CarouselView defines a ItemsUpdatingScrollMode property that represents the scrolling behavior of the CarouselView when new items are added to it. 이 속성에 대 한 자세한 내용은 새 항목이 추가 될 때 스크롤 위치 제어를 참조 하세요.For more information about this property, see Control scroll position when new items are added.

사용자가 스크롤하면 데이터를 증분 로드할 수도 CarouselView .CarouselView can also load data incrementally as the user scrolls. 자세한 내용은 데이터를 증분 로드를 참조 하세요.For more information, see Load data incrementally.

데이터를 사용 하 여 CarouselView 채우기Populate a CarouselView with data

@No__t_1 ItemsSource 속성을 IEnumerable를 구현 하는 컬렉션으로 설정 하 여 데이터로 채워집니다.A CarouselView is populated with data by setting its ItemsSource property to any collection that implements IEnumerable. 문자열 배열에서 ItemsSource 속성을 초기화 하 여 XAML에 항목을 추가할 수 있습니다.Items can be added in XAML by initializing the ItemsSource property from an array of strings:

<CarouselView>
    <CarouselView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Baboon</x:String>
            <x:String>Capuchin Monkey</x:String>
            <x:String>Blue Monkey</x:String>
            <x:String>Squirrel Monkey</x:String>
            <x:String>Golden Lion Tamarin</x:String>
            <x:String>Howler Monkey</x:String>
            <x:String>Japanese Macaque</x:String>
        </x:Array>
    </CarouselView.ItemsSource>
</CarouselView>

참고

x:Array 요소는 배열의 항목 유형을 나타내는 Type 특성이 필요합니다.Note that the x:Array element requires a Type attribute indicating the type of the items in the array.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

CarouselView carouselView = new CarouselView();
carouselView.ItemsSource = new string[]
{
    "Baboon",
    "Capuchin Monkey",
    "Blue Monkey",
    "Squirrel Monkey",
    "Golden Lion Tamarin",
    "Howler Monkey",
    "Japanese Macaque"
};

중요

기본 컬렉션에서 항목이 추가, 제거 또는 변경 될 때 CarouselView 를 새로 고쳐야 하는 경우 기본 컬렉션은 ObservableCollection와 같은 속성 변경 알림을 보내는 IEnumerable 컬렉션 이어야 합니다.If the CarouselView is required to refresh as items are added, removed, or changed in the underlying collection, the underlying collection should be an IEnumerable collection that sends property change notifications, such as ObservableCollection.

기본적으로 CarouselView 는 항목을 가로로 표시 합니다.By default, CarouselView displays items horizontally. 다음 스크린샷에는 iOS 및 Android에서 다른 문자열 항목을 표시 하는 CarouselView 표시 됩니다.The following screenshots show a CarouselView displaying different string items on iOS and Android:

IOS 및 Android에서 텍스트 항목을 포함 하는 CarouselView의 스크린샷Screenshot of CarouselView containing text items, on iOS and Android

@No__t_1 방향을 변경 하는 방법에 대 한 자세한 내용은 xamarin.ios CarouselView Layout을 참조 하세요.For information on how to change the CarouselView orientation, see Xamarin.Forms CarouselView Layout. @No__t_0에서 각 항목의 모양을 정의 하는 방법에 대 한 자세한 내용은 항목 모양 정의를 참조 하세요.For information on how to define the appearance of each item in the CarouselView, see Define item appearance.

데이터 바인딩Data binding

데이터 바인딩을 사용 하 여 ItemsSource 속성을 IEnumerable 컬렉션에 바인딩하면 CarouselView 데이터를 채울 수 있습니다.CarouselView can be populated with data by using data binding to bind its ItemsSource property to an IEnumerable collection. XAML에서이 작업은 Binding 태그 확장을 사용 하 여 구현 됩니다.In XAML, this is achieved with the Binding markup extension:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 예제에서 ItemsSource 속성 데이터는 연결 된 viewmodel의 Monkeys 속성에 바인딩됩니다.In this example, the ItemsSource property data binds to the Monkeys property of the connected viewmodel.

참고

Xamarin Forms 응용 프로그램에서 데이터 바인딩 성능을 향상 시키기 위해 컴파일된 바인딩을 사용 하도록 설정할 수 있습니다.Compiled bindings can be enabled to improve data binding performance in Xamarin.Forms applications. 자세한 내용은 컴파일된 바인딩을 참조하세요.For more information, see Compiled Bindings.

데이터 바인딩에 대한 자세한 내용은 Xamarin.Forms 데이터 바인딩을 참조하세요.For more information about data binding, see Xamarin.Forms Data Binding.

항목 모양 정의Define item appearance

@No__t_3 속성을 DataTemplate로 설정 하 여 CarouselView 에 있는 각 항목의 모양을 정의할 수 있습니다.The appearance of each item in the CarouselView can be defined by setting the CarouselView.ItemTemplate property to a 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# 코드는 다음과 같습니다.The equivalent C# code is:

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

@No__t_1 에 지정 된 요소는 CarouselView에서 각 항목의 모양을 정의 합니다.The elements specified in the DataTemplate define the appearance of each item in the CarouselView. 이 예제에서 DataTemplate 내의 레이아웃은 StackLayout에 의해 관리 되 고 데이터는 Image 개체 및 세 개의 Label 개체와 함께 표시 됩니다 .이 개체는 모두 Monkey 클래스의 속성에 바인딩됩니다.In the example, layout within the DataTemplate is managed by a StackLayout, and the data is displayed with an Image object, and three Label objects, that all bind to properties of the Monkey class:

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

다음 스크린샷은 각 항목의 템플릿 결과를 보여 줍니다.The following screenshots show the result of templating each item:

IOS 및 Android에서 각 항목이 템플릿 인 CarouselView의 스크린샷Screenshot of CarouselView where each item is templated, on iOS and Android

데이터 템플릿에 대한 자세한 내용은 Xamarin.Forms 데이터 템플릿을 참조하세요.For more information about data templates, see Xamarin.Forms Data Templates.

런타임에 항목 모양 선택Choose item appearance at runtime

@No__t_3 속성을 DataTemplateSelector 개체로 설정 하 여 항목 값을 기준으로 런타임에 CarouselView 에 있는 각 항목의 모양을 선택할 수 있습니다.The appearance of each item in the CarouselView can be chosen at runtime, based on the item value, by setting the CarouselView.ItemTemplate property to a DataTemplateSelector object:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

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

@No__t_1 속성은 MonkeyDataTemplateSelector 개체로 설정 됩니다.The ItemTemplate property is set to a MonkeyDataTemplateSelector object. 다음 예제에서는 MonkeyDataTemplateSelector 클래스를 보여 줍니다.The following example shows the MonkeyDataTemplateSelector class:

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

@No__t_0 클래스는 다른 데이터 템플릿으로 설정 된 AmericanMonkeyOtherMonkey DataTemplate 속성을 정의 합니다.The MonkeyDataTemplateSelector class defines AmericanMonkey and OtherMonkey DataTemplate properties that are set to different data templates. @No__t_0 재정의는 원숭이 이름에 "아메리카"가 포함 된 경우 AmericanMonkey 템플릿을 반환 합니다.The OnSelectTemplate override returns the AmericanMonkey template when the monkey name contains "America". 원숭이 이름에 "아메리카"가 포함 되지 않은 경우 OnSelectTemplate 재정의는 해당 데이터를 회색으로 표시 하는 OtherMonkey 템플릿을 반환 합니다.When the monkey name doesn't contain "America", the OnSelectTemplate override returns the OtherMonkey template, which displays its data grayed out:

IOS 및 Android에서 CarouselView 런타임 항목 템플릿 선택의 스크린샷Screenshot of CarouselView runtime item template selection, on iOS and Android

데이터 템플릿 선택기에 대 한 자세한 내용은 DataTemplateSelector 만들기를 참조 하세요.For more information about data template selectors, see Create a Xamarin.Forms DataTemplateSelector.

중요

@No__t_1사용 하는 경우 DataTemplate 개체의 루트 요소를 ViewCell로 설정 하지 마십시오.When using CarouselView, never set the root element of your DataTemplate objects to a ViewCell. 이로 인해 CarouselView에는 셀 개념이 없으므로 예외가 throw 됩니다.This will result in an exception being thrown because CarouselView has no concept of cells.

새로 고치려면 끌어오기Pull to refresh

CarouselViewRefreshView를 통해 기능을 새로 고치는 기능을 지원 합니다 .이 기능을 사용 하면 항목을 축소 하 여 데이터를 새로 고칠 수 있습니다.CarouselView supports pull to refresh functionality through the RefreshView, which enables the data being displayed to be refreshed by pulling down on the items. @No__t_0은 자식에서 스크롤 가능한 콘텐츠를 지 원하는 경우 해당 자식에 대 한 기능을 새로 고치는 가져오기를 제공 하는 컨테이너 컨트롤입니다.The RefreshView is a container control that provides pull to refresh functionality to its child, provided that the child supports scrollable content. 따라서 RefreshView의 자식으로 설정 하 여 CarouselView에 대 한 끌어오기를 새로 고칩니다.Therefore, pull to refresh is implemented for a CarouselView by setting it as the child of a RefreshView:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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;
// ...

사용자가 새로 고침을 시작 하면 Command 속성으로 정의 된 ICommand 실행 되어 표시 되는 항목을 새로 고쳐야 합니다.When the user initiates a refresh, the ICommand defined by the Command property is executed, which should refresh the items being displayed. 새로 고침이 발생 하는 동안 애니메이션 처리 원으로 구성 된 새로 고침 시각화가 표시 됩니다.A refresh visualization is shown while the refresh occurs, which consists of an animated progress circle:

IOS 및 Android에서 CarouselView 끌어오기-새로 고침의 스크린샷Screenshot of CarouselView pull-to-refresh, on iOS and Android

@No__t_0 속성의 값은 RefreshView의 현재 상태를 나타냅니다.The value of the RefreshView.IsRefreshing property indicates the current state of the RefreshView. 사용자가 새로 고침을 트리거하는 경우이 속성은 자동으로 true로 전환 됩니다.When a refresh is triggered by the user, this property will automatically transition to true. 새로 고침이 완료 되 면 속성을 false으로 다시 설정 해야 합니다.Once the refresh completes, you should reset the property to false.

@No__t_0에 대 한 자세한 내용은 Xamarin.ios RefreshView를 참조 하세요.For more information about RefreshView, see Xamarin.Forms RefreshView.

증분 방식으로 데이터 로드Load data incrementally

사용자가 항목을 스크롤하면 데이터를 증분 로드 하는 CarouselView 지원 됩니다.CarouselView supports loading data incrementally as users scroll through items. 이렇게 하면 사용자가 스크롤할 때 웹 서비스에서 데이터 페이지를 비동기적으로 로드 하는 등의 시나리오를 사용할 수 있습니다.This enables scenarios such as asynchronously loading a page of data from a web service, as the user scrolls. 또한 더 많은 데이터를 로드 하는 지점은 사용자가 빈 공간을 보거나 스크롤에서 중지 되도록 구성할 수 있습니다.In addition, the point at which more data is loaded is configurable so that users don't see blank space, or are stopped from scrolling.

CarouselView 는 다음 속성을 정의 하 여 데이터의 증분 로드를 제어 합니다.CarouselView defines the following properties to control incremental loading of data:

  • int 형식의 RemainingItemsThreshold RemainingItemsThresholdReached 이벤트가 발생 하는 목록에 아직 표시 되지 않는 항목의 임계값입니다.RemainingItemsThreshold, of type int, the threshold of items not yet visible in the list at which the RemainingItemsThresholdReached event will be fired.
  • RemainingItemsThresholdReachedCommand RemainingItemsThreshold에 도달할 때 실행 되는 ICommand 형식입니다.RemainingItemsThresholdReachedCommand, of type ICommand, which is executed when the RemainingItemsThreshold is reached.
  • object 형식의 RemainingItemsThresholdReachedCommandParameter - RemainingItemsThresholdReachedCommand에 전달되는 매개 변수입니다.RemainingItemsThresholdReachedCommandParameter, of type object, which is the parameter that's passed to the RemainingItemsThresholdReachedCommand.

또한 CarouselViewRemainingItemsThreshold 항목이 표시 되지 않을 만큼 CarouselView 스크롤 될 때 발생 하는 RemainingItemsThresholdReached 이벤트를 정의 합니다.CarouselView also defines a RemainingItemsThresholdReached event that is fired when the CarouselView is scrolled far enough that RemainingItemsThreshold items have not been displayed. 이 이벤트를 처리 하 여 더 많은 항목을 로드할 수 있습니다.This event can be handled to load more items. 또한 RemainingItemsThresholdReached 이벤트가 발생 하면 RemainingItemsThresholdReachedCommand 실행 되어 viewmodel에서 증분 데이터 로드가 발생 하도록 할 수 있습니다.In addition, when the RemainingItemsThresholdReached event is fired, the RemainingItemsThresholdReachedCommand is executed, enabling incremental data loading to take place in a viewmodel.

@No__t_0 속성의 기본값은-1입니다 .이 값은 RemainingItemsThresholdReached 이벤트가 발생 되지 않음을 나타냅니다.The default value of the RemainingItemsThreshold property is -1, which indicates that the RemainingItemsThresholdReached event will never be fired. 속성 값이 0 이면 ItemsSource 의 최종 항목이 표시 될 때 RemainingItemsThresholdReached 이벤트가 발생 합니다.When the property value is 0, the RemainingItemsThresholdReached event will be fired when the final item in the ItemsSource is displayed. 값이 0 보다 큰 경우에는 ItemsSource에 아직 스크롤되지 않는 항목 수가 포함 되어 있으면 RemainingItemsThresholdReached 이벤트가 발생 합니다.For values greater than 0, the RemainingItemsThresholdReached event will be fired when the ItemsSource contains that number of items not yet scrolled to.

참고

CarouselViewRemainingItemsThreshold 속성의 유효성을 검사 하 여 해당 값이 항상-1 보다 크거나 같도록 합니다.CarouselView validates the RemainingItemsThreshold property so that its value is always greater than or equal to -1.

다음 XAML 예제에서는 데이터를 증분 로드 하는 CarouselView 보여 줍니다.The following XAML example shows a CarouselView that loads data incrementally:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 코드 예제에서는 두 개의 항목이 아직 스크롤되지 않는 경우 RemainingItemsThresholdReached 이벤트가 발생 하 고, 응답으로 OnCollectionViewRemainingItemsThresholdReached 이벤트 처리기를 실행 합니다.In this code example, the RemainingItemsThresholdReached event fires when there are 2 items not yet scrolled to, and in response executes the OnCollectionViewRemainingItemsThresholdReached event handler:

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

참고

@No__t_0를 viewmodel의 ICommand 구현에 바인딩하여 증분 방식으로 데이터를 로드할 수도 있습니다.Data can also be loaded incrementally by binding the RemainingItemsThresholdReachedCommand to an ICommand implementation in the viewmodel.