Xamarin.Forms CollectionView-Bildlauf

Das Beispiel herunterladen

CollectionView definiert 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 anzugeben, zu welcher Gruppe das Element gehört, die genaue Position des Elements nach Abschluss des Bildlaufs und ob der Bildlauf animiert werden soll.

CollectionView 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, das ausgelöst wird, CollectionView 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.

CollectionView definiert auch eine ItemsUpdatingScrollMode -Eigenschaft, die das Bildlaufverhalten des CollectionView darstellt, wenn neue Elemente hinzugefügt werden. Weitere Informationen zu dieser Eigenschaft finden Sie unter Steuern der Bildlaufposition beim Hinzufügen neuer Elemente.

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

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

Erkennen des Bildlaufs

CollectionView definiert ein Scrolled Ereignis, das ausgelöst wird, um anzugeben, dass ein Bildlauf aufgetreten ist. Die ItemsViewScrolledEventArgs -Klasse, die das -Objekt darstellt, das das Scrolled Ereignis begleitet, definiert die folgenden Eigenschaften:

• HorizontalDeltavom Typ doublestellt die Änderung des horizontalen Bildlaufs dar. Dies ist ein negativer Wert beim Scrollen nach links und ein positiver Wert beim Scrollen nach rechts.
• VerticalDeltavom Typ doublestellt die Änderung des vertikalen Bildlaufs dar. Dies ist ein negativer Wert beim Scrollen nach oben und ein positiver Wert beim Scrollen nach unten.
• HorizontalOffsetvom Typ doubledefiniert den Betrag, um den die Liste horizontal vom Ursprung versetzt wird.
• VerticalOffsetvom Typ doubledefiniert den Betrag, um den die Liste vertikal vom Ursprung versetzt wird.
• FirstVisibleItemIndexvom Typ intist der Index des ersten Elements, das in der Liste sichtbar ist.
• CenterItemIndexvom Typ intist der Index des mittleren Elements, das in der Liste sichtbar ist.
• LastVisibleItemIndexvom Typ intist der Index des letzten Elements, das in der Liste sichtbar ist.

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

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

Der entsprechende C#-Code lautet:

CollectionView collectionView = new CollectionView();
collectionView.Scrolled += OnCollectionViewScrolled;

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

void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    // Custom logic
}

Wichtig

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

Scrollen eines Elements an einem Index in die Ansicht

Die erste ScrollTo Methodenüberladung scrollt das Element am angegebenen Index in die Ansicht. Bei einem CollectionView Objekt mit dem Namen collectionViewwird im folgenden Beispiel gezeigt, wie das Element bei Index 12 in die Ansicht scrollt:

collectionView.ScrollTo(12);

Alternativ kann ein Element in gruppierten Daten durch Angabe der Element- und Gruppenindizes in die Ansicht gescrollt werden. Im folgenden Beispiel wird gezeigt, wie Sie das dritte Element in der zweiten Gruppe in die Ansicht scrollen:

// Items and groups are indexed from zero.
collectionView.ScrollTo(2, 1);

Hinweis

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

Scrollen eines Elements in die Ansicht

Die zweite ScrollTo Methodenüberladung führt einen Bildlauf für das angegebene Element in die Ansicht durch. Bei einem CollectionView Objekt namens collectionViewwird im folgenden Beispiel gezeigt, wie Sie den Bildlauf des Proboscis Monkey-Elements in die Ansicht ausführen:

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

Alternativ kann ein Element in gruppierten Daten in die Ansicht gescrollt werden, indem das Element und die Gruppe angegeben werden. Das folgende Beispiel zeigt, wie Sie den Bildlauf für das Element Proboscis Monkey in der Gruppe Monkeys in die Ansicht ausführen:

GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey, group);

Hinweis

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

Deaktivieren der Bildlaufanimation

Beim Scrollen eines Elements in die Ansicht wird eine Bildlaufanimation angezeigt. Diese Animation kann jedoch deaktiviert werden, indem das animate Argument der ScrollTo -Methode auf falsefestgelegt wird:

collectionView.ScrollTo(monkey, animate: false);

Steuern der Bildlaufposition

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

MakeVisible

Der ScrollToPosition.MakeVisible Member gibt an, dass das Element so lange gescrollt werden soll, bis es in der Ansicht sichtbar ist:

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

Dieser Beispielcode führt zu dem minimalen Bildlauf, der zum Scrollen des Elements in die Ansicht erforderlich ist:

Hinweis

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

Start

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

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

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

Zentrum

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

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

Dieser Beispielcode führt dazu, dass das Element in die Mitte der Ansicht gescrollt wird:

Ende

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

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

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

Steuern der Scrollposition beim Hinzufügen neuer Elemente

CollectionView definiert eine ItemsUpdatingScrollMode Eigenschaft, die von einer bindbaren Eigenschaft unterstützt wird. Diese Eigenschaft ruft einen ItemsUpdatingScrollMode Enumerationswert ab, der das Bildlaufverhalten des CollectionView 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 so an, dass 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 CollectionView 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:

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

Der entsprechende C#-Code lautet:

CollectionView collectionView = new CollectionView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Sichtbarkeit der Bildlaufleiste

CollectionViewHorizontalScrollBarVisibility definiert Eigenschaften undVerticalScrollBarVisibility, die durch bindbare Eigenschaften unterstützt werden. Diese Eigenschaften rufen einen Enumerationswert ab oder legen diesen ScrollBarVisibility fest, der angibt, 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 auch dann sichtbar sind, 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 die Elemente vollständig angezeigt werden. Dieses Feature wird als Andocken bezeichnet, da Elemente beim Beenden des Bildlaufs an der Position andocken und von den folgenden Eigenschaften der ItemsLayout -Klasse gesteuert werden:

• SnapPointsTypevom Typ SnapPointsTypegibt das Verhalten von Andockpunkten beim Scrollen an.
• SnapPointsAlignmentvom Typ SnapPointsAlignmentgibt an, wie Andockpunkte an Elementen ausgerichtet werden.

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

Hinweis

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

Andockpunkttyp

Die SnapPointsType-Enumeration definiert die folgenden Member:

• None gibt an, dass der Bildlauf nicht an Elementen angedockt wird.
• Mandatory gibt an, dass der Inhalt immer an dem nächstgelegenen Ausrichtungspunkt ausgerichtet wird, an dem der Bildlauf natürlich 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 SnapPointsType.Nonefestgelegt, wodurch sichergestellt wird, dass beim Scrollen keine Elemente angerackt werden, wie in den folgenden Screenshots gezeigt:

Ausrichtung von Ausrichtungspunkten

Die SnapPointsAlignment -Enumeration definiert , CenterStart- und End -Member.

Wichtig

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

Start

Der SnapPointsAlignment.Start Member gibt an, dass Ausrichtungspunkte an der vorderen Kante von Elementen ausgerichtet sind.

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

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Der entsprechende C#-Code lautet:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf zu initiieren, wird das oberste Element am oberen Rand der Ansicht ausgerichtet:

Zentrum

Der SnapPointsAlignment.Center Member gibt an, dass Ausrichtungspunkte an der Mitte der Elemente ausgerichtet sind. Im folgenden XAML-Beispiel wird gezeigt, wie dieser Enumerationsmember festgelegt wird:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Der entsprechende C#-Code lautet:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf zu initiieren, wird das oberste Element am oberen Rand der Ansicht zentriert ausgerichtet:

Ende

Der SnapPointsAlignment.End Member gibt an, dass Andockpunkte am nachgestellten Rand von Elementen ausgerichtet sind. Im folgenden XAML-Beispiel wird gezeigt, wie dieser Enumerationsmember festgelegt wird:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Der entsprechende C#-Code lautet:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

Wenn ein Benutzer wischt, um einen Bildlauf zu initiieren, wird das untere Element am unteren Rand der Ansicht ausgerichtet:

Verwandte Links

• CollectionView (Beispiel)