Xamarin.Forms CarouselView 스크롤
CarouselView
는 다음 스크롤 관련 속성을 정의합니다.
HorizontalScrollBarVisibility
가로 스크롤 막대가 표시되는 시기를 지정하는 형식ScrollBarVisibility
의 입니다.IsDragging
은 스크롤 중인지 여부를 나타내는 형식bool
의CarouselView />입니다. 기본값은 읽기 전용 속성입니다 false
.IsScrollAnimated
를 스크롤할 때 애니메이션이 발생할지 여부를 지정하는 형식bool
의 입니다CarouselView
. 기본값은true
입니다.ItemsUpdatingScrollMode
새 항목이 추가되는 경우의 스크롤 동작을CarouselView
나타내는 형식ItemsUpdatingScrollMode
의 입니다.VerticalScrollBarVisibility
세로 스크롤 막대가 표시되는 시기를 지정하는 형식ScrollBarVisibility
의 입니다.
이러한 모든 속성은 개체에 의해 BindableProperty
지원되므로 데이터 바인딩의 대상이 될 수 있습니다.
CarouselView
또한 항목을 보기로 스크롤하는 두 가지 ScrollTo
메서드를 정의합니다. 오버로드 중 하나는 지정된 인덱스의 항목을 보기로 스크롤하고 다른 하나는 지정된 항목을 보기로 스크롤합니다. 두 오버로드에는 스크롤이 완료된 후 항목의 정확한 위치와 스크롤에 애니메이션 효과를 주는지 여부를 나타내기 위해 지정할 수 있는 추가 인수가 있습니다.
CarouselView
는 ScrollToRequested
메서드 중 ScrollTo
하나가 호출될 때 발생하는 이벤트를 정의합니다. ScrollToRequestedEventArgs
이벤트와 함께 ScrollToRequested
제공되는 개체에는 , Index
, 및 ScrollToPosition
를 비롯한 IsAnimated
많은 속성이 Item
있습니다. 이러한 속성은 메서드 호출에 지정된 인수에서 ScrollTo
설정됩니다.
또한 CarouselView
스크롤이 발생했음을 Scrolled
나타내기 위해 발생하는 이벤트를 정의합니다. ItemsViewScrolledEventArgs
이벤트와 함께 Scrolled
제공되는 개체에는 많은 속성이 있습니다. 자세한 내용은 스크롤 검색을 참조 하세요.
사용자가 스크롤을 시작하기 위해 살짝 밀면 항목이 완전히 표시되도록 스크롤의 끝 위치를 제어할 수 있습니다. 스크롤이 중지되면 항목이 위치에 맞춰지므로 이 기능을 맞추기라고 합니다. 자세한 내용은 끌기 지점을 참조 하세요.
CarouselView
는 사용자가 스크롤할 때 데이터를 증분 방식으로 로드할 수도 있습니다. 자세한 내용은 데이터 증분 로드를 참조 하세요.
스크롤 감지
속성을 IsDragging
검사하여 현재 항목을 스크롤하고 있는지 여부를 CarouselView
확인할 수 있습니다.
또한 CarouselView
스크롤이 발생했음을 Scrolled
나타내기 위해 발생하는 이벤트를 정의합니다. 스크롤에 대한 데이터가 필요한 경우 이 이벤트를 사용해야 합니다.
다음 XAML 예제에서는 이벤트에 대한 Scrolled
이벤트 처리기를 설정하는 방법을 보여줍니다CarouselView
.
<CarouselView Scrolled="OnCollectionViewScrolled">
...
</CarouselView>
해당하는 C# 코드는 다음과 같습니다.
CarouselView carouselView = new CarouselView();
carouselView.Scrolled += OnCarouselViewScrolled;
이 코드 예제 OnCarouselViewScrolled
에서는 이벤트가 발생할 때 Scrolled
이벤트 처리기가 실행됩니다.
void OnCarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}
이 예제 OnCarouselViewScrolled
에서 이벤트 처리기는 이벤트와 함께 개체의 ItemsViewScrolledEventArgs
값을 출력합니다.
Important
이 Scrolled
이벤트는 사용자가 시작한 스크롤 및 프로그래밍 방식 스크롤에 대해 발생합니다.
인덱스에서 항목을 보기로 스크롤합니다.
첫 번째 ScrollTo
메서드 오버로드는 지정된 인덱스의 항목을 보기로 스크롤합니다. 이름이 지정된 carouselView
개체를 CarouselView
지정하면 다음 예제에서는 인덱스 6에서 항목을 보기로 스크롤하는 방법을 보여 주었습니다.
carouselView.ScrollTo(6);
참고 항목
ScrollToRequested
메서드가 호출될 때 ScrollTo
이벤트가 발생합니다.
항목을 보기로 스크롤
두 번째 ScrollTo
메서드 오버로드는 지정된 항목을 보기로 스크롤합니다. 이름이 지정된 carouselView
개체를 CarouselView
지정하면 다음 예제에서는 Proboscis Monkey 항목을 보기로 스크롤하는 방법을 보여 줍니다.
MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
carouselView.ScrollTo(monkey);
참고 항목
ScrollToRequested
메서드가 호출될 때 ScrollTo
이벤트가 발생합니다.
스크롤 애니메이션 사용 안 함
에 있는 항목 간에 이동할 때 스크롤 애니메이션이 CarouselView
표시됩니다. 이 애니메이션은 사용자가 시작한 스크롤과 프로그래밍 방식 스크롤 모두에 대해 발생합니다. IsScrollAnimated
속성을 설정하면 false
두 스크롤 범주 모두에 대한 애니메이션이 비활성화됩니다.
animate
또는 프로그래밍 방식 스크롤에서 스크롤 애니메이션을 ScrollTo
사용하지 않도록 메서드의 인수를 설정할 false
수 있습니다.
carouselView.ScrollTo(monkey, animate: false);
컨트롤 스크롤 위치
항목을 보기로 스크롤할 때 스크롤이 완료된 후 항목의 정확한 위치를 메서드의 ScrollTo
인수로 position
지정할 수 있습니다. 이 인수는 열거형 멤버를 ScrollToPosition
허용합니다.
MakeVisible
멤버는 ScrollToPosition.MakeVisible
항목이 보기에 표시될 때까지 스크롤되어야 임을 나타냅니다.
carouselView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);
이 예제 코드는 항목을 보기로 스크롤하는 데 필요한 최소 스크롤을 생성합니다.
참고 항목
메서드를 ScrollToPosition.MakeVisible
호출 ScrollTo
할 때 인수가 position
지정되지 않은 경우 멤버는 기본적으로 사용됩니다.
Start
멤버는 ScrollToPosition.Start
항목이 보기의 시작 부분까지 스크롤되어야 했음을 나타냅니다.
carouselView.ScrollTo(monkey, position: ScrollToPosition.Start);
이 예제 코드에서는 항목이 보기의 시작 부분까지 스크롤됩니다.
가운데 맞춤
멤버는 ScrollToPosition.Center
항목이 보기의 가운데로 스크롤되어야 임을 나타냅니다.
carouselViewView.ScrollTo(monkey, position: ScrollToPosition.Center);
이 예제 코드에서는 항목이 보기의 가운데로 스크롤됩니다.
끝
멤버는 ScrollToPosition.End
항목이 보기의 끝까지 스크롤되어야 했음을 나타냅니다.
carouselViewView.ScrollTo(monkey, position: ScrollToPosition.End);
이 예제 코드에서는 항목이 보기의 끝으로 스크롤됩니다.
새 항목이 추가되면 스크롤 위치 제어
CarouselView
는 ItemsUpdatingScrollMode
바인딩 가능한 속성으로 지원되는 속성을 정의합니다. 이 속성은 새 항목을 추가할 때의 CarouselView
스크롤 동작을 나타내는 열거형 값을 가져오거나 설정합니다ItemsUpdatingScrollMode
. ItemsUpdatingScrollMode
열거형은 다음 멤버를 정의합니다.
KeepItemsInView
는 새 항목이 추가될 때 표시되는 목록의 첫 번째 항목을 유지합니다.KeepScrollOffset
는 새 항목이 추가될 때 현재 스크롤 위치가 유지되도록 합니다.KeepLastItemInView
새 항목을 추가할 때 목록의 마지막 항목을 표시하도록 스크롤 오프셋을 조정합니다.
기본값은 ItemsUpdatingScrollMode
속성은 KeepItemsInView
합니다. 따라서 목록의 첫 번째 항목에 CarouselView
새 항목이 추가되면 계속 표시됩니다. 새 항목이 추가될 때 목록의 마지막 항목이 표시되도록 하려면 속성을 다음으로 KeepLastItemInView
설정합니다ItemsUpdatingScrollMode
.
<CarouselView ItemsUpdatingScrollMode="KeepLastItemInView">
...
</CarouselView>
해당하는 C# 코드는 다음과 같습니다.
CarouselView carouselView = new CarouselView
{
ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};
스크롤 막대 표시 유형
CarouselView
바인딩 가능한 속성에 HorizontalScrollBarVisibility
의해 지원되는 정의 및 VerticalScrollBarVisibility
속성입니다. 이러한 속성은 가로 또는 세로 ScrollBarVisibility
스크롤 막대가 표시되는 시기를 나타내는 열거형 값을 얻거나 설정합니다. ScrollBarVisibility
열거형은 다음 멤버를 정의합니다.
Default
는 플랫폼의 기본 스크롤 막대 동작을 나타내며, 해당 및VerticalScrollBarVisibility
속성의HorizontalScrollBarVisibility
기본값입니다.Always
은 콘텐츠가 보기에 맞는 경우에도 스크롤 막대가 표시될 것임을 나타냅니다.Never
는 내용이 보기에 맞지 않더라도 스크롤 막대가 표시되지 않음을 나타냅니다.
끌기 지점
사용자가 스크롤을 시작하기 위해 살짝 밀면 항목이 완전히 표시되도록 스크롤의 끝 위치를 제어할 수 있습니다. 스크롤이 중지될 때 항목이 위치에 맞춰지고 클래스의 ItemsLayout
다음 속성에 의해 제어되기 때문에 이 기능을 맞추기라고 합니다.
SnapPointsType
형식SnapPointsType
의 은 스크롤할 때 맞춤 지점의 동작을 지정합니다.SnapPointsAlignment
형식SnapPointsAlignment
의 스냅 포인트가 항목과 정렬되는 방법을 지정합니다.
이러한 속성은 개체에 의해 BindableProperty
지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.
참고 항목
스냅이 발생하면 가장 적은 양의 동작을 생성하는 방향으로 발생합니다.
맞춤 지점 유형
SnapPointsType
열거형은 다음 멤버를 정의합니다.
None
는 스크롤이 항목에 맞춰지지 않음을 나타냅니다.Mandatory
는 콘텐츠가 관성의 방향을 따라 스크롤이 자연스럽게 중지되는 가장 가까운 스냅 지점에 항상 맞춰지도록 나타냅니다.MandatorySingle
는 동일한 동작Mandatory
을 나타내지만 한 번에 하나의 항목만 스크롤합니다.
기본적으로 CarouselView
SnapPointsType
속성은 한 번에 하나의 항목만 스크롤하도록 하는 속성으로 설정SnapPointsType.MandatorySingle
됩니다.
다음 스크린샷은 스냅이 꺼진 것을 보여 CarouselView
줍니다.
맞춤 점 맞춤
열거형은 SnapPointsAlignment
및 Center
End
멤버를 정의합니다Start
.
Important
속성 값은 속성이 SnapPointsAlignment
설정된 Mandatory
MandatorySingle
경우에만 SnapPointsType
적용됩니다.
Start
멤버는 SnapPointsAlignment.Start
끌기 지점이 항목의 선행 가장자리에 맞춰지게 됨을 나타냅니다. 다음 XAML 예제에서는 이 열거형 멤버를 설정하는 방법을 보여줍니다.
<CarouselView ItemsSource="{Binding Monkeys}"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Start" />
</CarouselView.ItemsLayout>
...
</CarouselView>
해당하는 C# 코드는 다음과 같습니다.
CarouselView carouselView = new CarouselView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.Start
},
// ...
};
사용자가 살짝 밀어 가로 스크롤에서 스크롤을 CarouselView
시작하면 왼쪽 항목이 보기의 왼쪽에 맞춰 표시됩니다.
가운데 맞춤
멤버는 SnapPointsAlignment.Center
맞춤 지점이 항목의 가운데에 맞춰지게 됨을 나타냅니다.
기본적으로 속성은 CarouselView
SnapPointsAlignment
.로 설정됩니다Center
. 그러나 완전성을 위해 다음 XAML 예제에서는 이 열거형 멤버를 설정하는 방법을 보여 있습니다.
<CarouselView ItemsSource="{Binding Monkeys}"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Center" />
</CarouselView.ItemsLayout>
...
</CarouselView>
해당하는 C# 코드는 다음과 같습니다.
CarouselView carouselView = new CarouselView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.Center
},
// ...
};
사용자가 살짝 밀어 가로 스크롤에서 스크롤을 CarouselView
시작하면 가운데 항목이 보기의 가운데에 맞춰 정렬됩니다.
끝
멤버는 SnapPointsAlignment.End
끌기 지점이 항목의 후행 가장자리에 맞춰지게 됨을 나타냅니다. 다음 XAML 예제에서는 이 열거형 멤버를 설정하는 방법을 보여줍니다.
<CarouselView ItemsSource="{Binding Monkeys}"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="End" />
</CarouselView.ItemsLayout>
...
</CarouselView>
해당하는 C# 코드는 다음과 같습니다.
CarouselView carouselView = new CarouselView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.End
},
// ...
};
사용자가 살짝 밀어 가로 스크롤에서 스크롤을 CarouselView
시작하면 오른쪽 항목이 보기 오른쪽에 정렬됩니다.