Xamarin.Forms CarouselView Scrolling

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

CarouselView definiert die folgenden bildlaufbezogenen Eigenschaften:

  • HorizontalScrollBarVisibility, vom Typ ScrollBarVisibility, der angibt, wann die horizontale Bildlaufleiste sichtbar ist.
  • IsDragging, vom Typ bool, der angibt, ob der CarouselView scrollt. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist false.
  • IsScrollAnimated, vom Typ bool, der angibt, ob eine Animation beim Scrollen von CarouselViewausgeführt wird. Standardwert: true.
  • ItemsUpdatingScrollMode, vom Typ ItemsUpdatingScrollMode, der das Scrollverhalten des CarouselView darstellt, wenn neue Elemente hinzugefügt werden.
  • VerticalScrollBarVisibility, vom Typ ScrollBarVisibility, der angibt, wann die vertikale Bildlaufleiste sichtbar ist.

Alle diese Eigenschaften werden durch BindableProperty Objekte unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können.

CarouselView definiert auch zwei ScrollTo Methoden, die Elemente in die Ansicht scrollen. Eine der Überladungen scrollt das Element am angegebenen Index in die Ansicht, während die andere das angegebene Element in die Ansicht scrollt. Beide Überladungen verfügen über zusätzliche Argumente, die angegeben werden können, um die genaue Position des Elements nach Abschluss des Bildlaufs anzugeben und anzugeben, ob der Bildlauf animiert werden soll.

CarouselView definiert ein ScrollToRequested Ereignis, das ausgelöst wird, wenn eine der ScrollTo Methoden aufgerufen wird. Das ScrollToRequestedEventArgs -Objekt, das das ScrollToRequested Ereignis begleitet, verfügt über viele Eigenschaften, einschließlich IsAnimated, Index, Itemund ScrollToPosition. Diese Eigenschaften werden aus den Argumenten festgelegt, die in den ScrollTo Methodenaufrufen angegeben sind.

Definiert außerdem ein Scrolled Ereignis, CarouselView das ausgelöst wird, um anzugeben, dass ein Bildlauf aufgetreten ist. Das ItemsViewScrolledEventArgs -Objekt, das das Scrolled Ereignis begleitet, verfügt über viele Eigenschaften. Weitere Informationen finden Sie unter Erkennen von Bildlaufvorgängen.

Wenn ein Benutzer wischt, um einen Bildlauf zu initiieren, kann die Endposition des Bildlaufs gesteuert werden, sodass Elemente vollständig angezeigt werden. Dieses Feature wird als Snapping bezeichnet, da Elemente an positionieren, wenn der Bildlauf angehalten wird. Weitere Informationen finden Sie unter Einrastpunkte.

CarouselView kann Daten auch beim Scrollen des Benutzers inkrementell laden. Weitere Informationen finden Sie unter Inkrementelles Laden von Daten.

Erkennen des Bildlaufs

Die IsDragging -Eigenschaft kann untersucht werden, um zu ermitteln, ob derzeit CarouselView ein Bildlauf durch Elemente ausgeführt wird.

Definiert außerdem ein Scrolled Ereignis, das ausgelöst wird, CarouselView um anzugeben, dass ein Bildlauf aufgetreten ist. Dieses Ereignis sollte verwendet werden, wenn Daten zum Scrollen erforderlich sind.

Das folgende XAML-Beispiel zeigt ein CarouselView , das einen Ereignishandler für das Scrolled Ereignis festlegt:

<CarouselView Scrolled="OnCollectionViewScrolled">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView();
carouselView.Scrolled += OnCarouselViewScrolled;

In diesem Codebeispiel wird der OnCarouselViewScrolled Ereignishandler ausgeführt, wenn das Scrolled Ereignis ausgelöst wird:

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

In diesem Beispiel gibt der OnCarouselViewScrolled Ereignishandler die Werte des ItemsViewScrolledEventArgs Objekts aus, das das Ereignis begleitet.

Wichtig

Das Scrolled Ereignis wird für benutzerinitiierte Bildlaufvorgänge und programmgesteuerte Bildlaufvorgänge ausgelöst.

Scrollen eines Elements in einem Index in die Ansicht

Bei der ersten ScrollTo Methodenüberladung wird das Element am angegebenen Index angezeigt. Bei einem CarouselView Objekt namens carouselViewzeigt das folgende Beispiel, wie Sie das Element bei Index 6 in die Ansicht scrollen:

carouselView.ScrollTo(6);

Hinweis

Das ScrollToRequested Ereignis wird ausgelöst, wenn die ScrollTo -Methode aufgerufen wird.

Scrollen eines Elements in die Ansicht

Die zweite ScrollTo Methodenüberladung scrollt das angegebene Element in die Ansicht. Bei einem CarouselView Objekt namens carouselViewzeigt das folgende Beispiel, wie sie das Proboscis Monkey-Element in die Ansicht scrollen:

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
carouselView.ScrollTo(monkey);

Hinweis

Das ScrollToRequested Ereignis wird ausgelöst, wenn die ScrollTo -Methode aufgerufen wird.

Deaktivieren der Scrollanimation

Beim Verschieben zwischen Elementen in einem wird eine CarouselViewBildlaufanimation angezeigt. Diese Animation erfolgt sowohl für benutzerinitiierte Bildlaufvorgänge als auch für programmgesteuerte Bildlaufvorgänge. Wenn Sie die IsScrollAnimated Eigenschaft auf festlegen, false wird die Animation für beide Bildlaufkategorien deaktiviert.

Alternativ kann das animate Argument der ScrollTo -Methode auf false festgelegt werden, um die Bildlaufanimation bei programmgesteuerten Bildläufen zu deaktivieren:

carouselView.ScrollTo(monkey, animate: false);

Scrollposition steuern

Beim Scrollen eines Elements in die Ansicht kann die genaue Position des Elements nach Abschluss des Bildlaufs mit dem Argument der positionScrollTo Methoden angegeben werden. Dieses Argument akzeptiert einen Enumerationsmember ScrollToPosition .

MakeVisible

Das ScrollToPosition.MakeVisible Element gibt an, dass das Element scrollen soll, bis es in der Ansicht sichtbar ist:

carouselView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);

Dieser Beispielcode führt zu dem minimalen Bildlauf, der erforderlich ist, um das Element in die Ansicht zu scrollen.

Hinweis

Das ScrollToPosition.MakeVisible Element wird standardmäßig verwendet, wenn das position Argument beim Aufrufen der ScrollTo Methode nicht angegeben wird.

Start

Das ScrollToPosition.Start Element gibt an, dass das Element bis zum Anfang der Ansicht gescrollt werden soll:

carouselView.ScrollTo(monkey, position: ScrollToPosition.Start);

Dieser Beispielcode führt dazu, dass das Element bis zum Anfang der Ansicht gescrollt wird.

Zentrum

Das ScrollToPosition.Center Element gibt an, dass das Element in die Mitte der Ansicht gescrollt werden soll:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.Center);

Dieser Beispielcode führt dazu, dass das Element in die Mitte der Ansicht scrollt.

Ende

Das ScrollToPosition.End Element gibt an, dass das Element bis zum Ende der Ansicht gescrollt werden soll:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.End);

Dieser Beispielcode führt dazu, dass das Element bis zum Ende der Ansicht scrollt.

Steuern der Bildlaufposition beim Hinzufügen neuer Elemente

CarouselView definiert eine ItemsUpdatingScrollMode Eigenschaft, die durch eine bindungsfähige Eigenschaft unterstützt wird. Diese Eigenschaft ruft einen ItemsUpdatingScrollMode Enumerationswert ab, der das Bildlaufverhalten des CarouselView darstellt, wenn neue Elemente hinzugefügt werden, oder legt diesen fest. Die ItemsUpdatingScrollMode-Enumeration definiert die folgenden Member:

  • KeepItemsInView behält das erste Element in der Liste bei, wenn neue Elemente hinzugefügt werden.
  • KeepScrollOffset stellt sicher, dass die aktuelle Bildlaufposition beibehalten wird, wenn neue Elemente hinzugefügt werden.
  • KeepLastItemInView passt den Bildlaufoffset an, damit das letzte Element in der Liste angezeigt wird, wenn neue Elemente hinzugefügt werden.

Der Standardwert der ItemsUpdatingScrollMode -Eigenschaft ist KeepItemsInView. Wenn also neue Elemente zu einem CarouselView hinzugefügt werden, bleibt das erste Element in der Liste angezeigt. Um sicherzustellen, dass das letzte Element in der Liste angezeigt wird, wenn neue Elemente hinzugefügt werden, legen Sie die ItemsUpdatingScrollMode -Eigenschaft auf KeepLastItemInViewfest:

<CarouselView ItemsUpdatingScrollMode="KeepLastItemInView">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Sichtbarkeit der Bildlaufleiste

CarouselView definiert HorizontalScrollBarVisibility und VerticalScrollBarVisibility Eigenschaften, die durch bindungsfähige Eigenschaften unterstützt werden. Mit diesen Eigenschaften wird ein ScrollBarVisibility Enumerationswert abgerufen oder festgelegt, der darstellt, wann die horizontale oder vertikale Bildlaufleiste sichtbar ist. Die ScrollBarVisibility-Enumeration definiert die folgenden Member:

  • Default gibt das Standardverhalten der Bildlaufleiste für die Plattform an und ist der Standardwert für die HorizontalScrollBarVisibility Eigenschaften und VerticalScrollBarVisibility .
  • Always gibt an, dass Bildlaufleisten sichtbar sind, auch wenn der Inhalt in die Ansicht passt.
  • Never gibt an, dass Bildlaufleisten nicht sichtbar sind, auch wenn der Inhalt nicht in die Ansicht passt.

Andockpunkte

Wenn ein Benutzer wischt, um einen Bildlauf zu initiieren, kann die Endposition des Bildlaufs gesteuert werden, sodass Elemente vollständig angezeigt werden. Dieses Feature wird als Snapping bezeichnet, da Elemente an position ausrichten, wenn der Bildlauf angehalten wird und von den folgenden Eigenschaften der ItemsLayout -Klasse gesteuert wird:

Diese Eigenschaften werden durch BindableProperty Objekte unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Hinweis

Wenn das Einrasten erfolgt, erfolgt dies in der Richtung, die die geringste Bewegung erzeugt.

Einrastpunkttyp

Die SnapPointsType-Enumeration definiert die folgenden Member:

  • None gibt an, dass der Bildlauf nicht an Elementen angerast wird.
  • Mandatory gibt an, dass Der Inhalt immer an dem nächstgelegenen Einrastpunkt einrastet, an dem das Scrollen auf natürliche Weise beendet wird, entlang der Richtung der Tia.
  • MandatorySingle gibt das gleiche Verhalten wie Mandatoryan, scrollt jedoch nur jeweils ein Element.

Standardmäßig ist die SnapPointsType -Eigenschaft auf CarouselViewSnapPointsType.MandatorySinglefestgelegt, wodurch sichergestellt wird, dass beim Scrollen jeweils nur ein Element scrollt.

Die folgenden Screenshots zeigen ein CarouselView mit deaktiviertem Snapping:

Screenshot einer CarouselView ohne Einrastpunkte unter iOS und Android

Ausrichtung der Einrastpunkte

Die SnapPointsAlignment Enumeration definiert Start, Centerund End Member.

Wichtig

Der Wert der SnapPointsAlignment -Eigenschaft wird nur berücksichtigt, wenn die SnapPointsType -Eigenschaft auf Mandatoryoder MandatorySinglefestgelegt ist.

Start

Das SnapPointsAlignment.Start Element gibt an, dass Einrastpunkte am spitzen Rand von Elementen ausgerichtet sind. Das folgende XAML-Beispiel zeigt, wie dieser Enumerationsmember festgelegt wird:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf in einem horizontalen Bildlauf CarouselViewzu initiieren, wird das linke Element links neben der Ansicht ausgerichtet:

Screenshot einer CarouselView mit Start-Snap-Punkten unter iOS und Android

Zentrum

Das SnapPointsAlignment.Center Element gibt an, dass Einrastpunkte am Mittelpunkt der Elemente ausgerichtet sind.

Standardmäßig ist die SnapPointsAlignment -Eigenschaft auf CarouselViewfestgelegtCenter. Aus Gründen der Vollständigkeit zeigt das folgende XAML-Beispiel jedoch, wie dieser Enumerationsmember festgelegt wird:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf in einem horizontalen Bildlauf CarouselViewzu initiieren, wird das mittlere Element an der Mitte der Ansicht ausgerichtet:

Screenshot einer CarouselView mit Zentrierungspunkten unter iOS und Android

Ende

Das SnapPointsAlignment.End Element gibt an, dass Einrastpunkte am nachfolgenden Rand von Elementen ausgerichtet sind. Das folgende XAML-Beispiel zeigt, wie dieser Enumerationsmember festgelegt wird:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf in einem horizontalen Bildlauf CarouselViewzu initiieren, wird das rechte Element an der rechten Seite der Ansicht ausgerichtet.

Screenshot einer CarouselView mit Endpunkten für iOS und Android