Teilen über

Xamarin.Forms KarussellView-Interaktion

CarouselView definiert die folgenden Eigenschaften, die die Benutzerinteraktion steuern:

  • CurrentItem, vom Typ object, das aktuelle Element, das angezeigt wird. Diese Eigenschaft weist einen Standardbindungsmodus von TwoWay auf und weist einen null-Wert auf, wenn keine Daten angezeigt werden sollen.
  • CurrentItemChangedCommand, vom Typ ICommand, der ausgeführt wird, wenn sich das aktuelle Element ändert.
  • CurrentItemChangedCommandParameter, vom Typ object: Parameter, der an den CurrentItemChangedCommand übergeben wird.
  • IsBounceEnabled, vom Typ bool, der angibt, ob die CarouselView an einer Inhaltsgrenze abprallt. Der Standardwert ist true.
  • IsSwipeEnabled, vom Typ bool, der bestimmt, ob eine Wischbewegung das angezeigte Element ändert. Der Standardwert ist true.
  • Loop, vom Typ bool, der bestimmt, ob die CarouselView Schleifenzugriff auf seine Sammlung von Elementen bereitstellt. Der Standardwert ist true.
  • Position, vom Typ int, der Index des aktuellen Elements in der zugrunde liegenden Sammlung. Diese Eigenschaft hat einen Standardbindungsmodus von TwoWay, und hat einen Wert von 0, wenn keine Daten angezeigt werden.
  • PositionChangedCommand, vom Typ ICommand, der ausgeführt wird, wenn sich die Position ändert.
  • PositionChangedCommandParameter, vom Typ object: Parameter, der an den PositionChangedCommand übergeben wird.
  • VisibleViews, vom Typ ObservableCollection<View>, wobei es sich um eine schreibgeschützte Eigenschaft handelt, die die Objekte für die aktuell sichtbaren Elemente enthält.

Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein können.

CarouselView definiert ein Ereignis CurrentItemChanged, das ausgelöst wird, wenn sich die Eigenschaft CurrentItem ändert, entweder aufgrund eines Bildlaufs durch die Benutzer*innen oder wenn eine Anwendung die Eigenschaft festlegt. Das CurrentItemChangedEventArgs-Objekt, das das Ereignis CurrentItemChanged begleitet, hat zwei Eigenschaften, beide vom Typ object:

  • PreviousItem – das vorherige Element nach der Änderung der Eigenschaft.
  • CurrentItem – das aktuelle Element nach der Änderung der Eigenschaft.

CarouselView definiert außerdem ein Ereignis PositionChanged, das ausgelöst wird, wenn sich die Eigenschaft Position ändert, entweder aufgrund eines Bildlaufs durch die Benutzer*innen oder wenn eine Anwendung die Eigenschaft festlegt. Das PositionChangedEventArgs-Objekt, das das Ereignis PositionChanged begleitet, hat zwei Eigenschaften, beide vom Typ int:

  • PreviousPosition – die vorherige Position, nach der Änderung der Eigenschaft.
  • CurrentPosition – die aktuelle Position, nach der Änderung der Eigenschaft.

Reagieren auf das aktuelle geänderte Element

Wenn sich das aktuell angezeigte Element ändert, wird die Eigenschaft CurrentItem auf den Wert des Elements festgelegt. Wenn sich diese Eigenschaft ändert, wird der CurrentItemChangedCommand mit dem Wert des CurrentItemChangedCommandParameter ausgefüht, der an den ICommand übergeben wird. Die Eigenschaft Position wird dann aktualisiert, und das Ereignis CurrentItemChanged wird ausgelöst.

Wichtig

Die Eigenschaft Position ändert sich, wenn sich die Eigenschaft CurrentItem ändert. Dies führt dazu, dass das Ereignis PositionChangedCommand ausgeführt wird und das Ereignis PositionChanged ausgelöst wird.

Ereignis

Das folgende XAML-Beispiel zeigt eine CarouselView, die einen Ereignishandler verwendet, der auf die Änderung des aktuellen Elements reagiert:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChanged="OnCurrentItemChanged">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

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

In diesem Beispiel wird der Ereignishandler OnCurrentItemChanged ausgeführt, wenn das Ereignis CurrentItemChanged ausgelöst wird:

void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    Monkey previousItem = e.PreviousItem as Monkey;
    Monkey currentItem = e.CurrentItem as Monkey;
}

In diesem Beispiel macht der Ereignishandler OnCurrentItemChanged die vorherigen und aktuellen Elemente verfügbar:

Screenshot einer Karussellansicht mit vorherigen und aktuellen Elementen unter iOS und Android

Get-Help

Das folgende XAML-Beispiel zeigt eine CarouselView, die einen Befehl verwendet, um auf die Änderung des aktuellen Elements zu reagieren:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChangedCommand="{Binding ItemChangedCommand}"
              CurrentItemChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=CurrentItem}">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandProperty, "ItemChangedCommand");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandParameterProperty, new Binding("CurrentItem", source: RelativeBindingSource.Self));

In diesem Beispiel wird die Eigenschaft CurrentItemChangedCommand an die Eigenschaft ItemChangedCommand gebunden, wobei der Eigenschaftswert CurrentItem als Argument übergeben wird. Der ItemChangedCommand kann dann je nach Bedarf auf das aktuelle Element reagieren, das sich ändert:

public ICommand ItemChangedCommand => new Command<Monkey>((item) =>
{
    PreviousMonkey = CurrentMonkey;
    CurrentMonkey = item;
});

In diesem Beispiel aktualisiert der ItemChangedCommand Objekte, die die vorherigen und aktuellen Elemente speichern.

Reagieren auf die Position, die sich ändert

Wenn sich das aktuell angezeigte Element ändert, wird die Eigenschaft Position auf den Index des aktuellen Elements in der zugrunde liegenden Sammlung festgelegt. Wenn sich diese Eigenschaft ändert, wird der PositionChangedCommand mit dem Wert des PositionChangedCommandParameter ausgeführt, der an den ICommand weitergegeben wird. Das Ereignis PositionChanged wird dann ausgelöst. Wenn die Eigenschaft Position programmgesteuert geändert wurde, wird in der CarouselView ein Bildlauf zum Element ausgeführt, das dem Position-Wert entspricht.

Hinweis

Wenn Sie die Eigenschaft Position auf 0 festlegen, wird das erste Element in der zugrunde liegenden Sammlung angezeigt.

Ereignis

Das folgende XAML-Beispiel zeigt eine CarouselView, die einen Ereignishandler verwendet, der auf die Änderung der Eigenschaft Position reagiert:

<CarouselView ItemsSource="{Binding Monkeys}"              
              PositionChanged="OnPositionChanged">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

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

In diesem Beispiel wird der Ereignishandler OnPositionChanged ausgeführt, wenn das Ereignis PositionChanged ausgelöst wird:

void OnPositionChanged(object sender, PositionChangedEventArgs e)
{
    int previousItemPosition = e.PreviousPosition;
    int currentItemPosition = e.CurrentPosition;
}

In diesem Beispiel macht der Ereignishandler OnCurrentItemChanged die vorherigen und aktuellen Positionen verfügbar:

Screenshot einer Karussellansicht mit früheren und aktuellen Positionen unter iOS und Android

Get-Help

Das folgende XAML-Beispiel zeigt eine CarouselView, die einen Befehl verwendet, der auf die Änderung der Eigenschaft Position reagiert:

<CarouselView ItemsSource="{Binding Monkeys}"
              PositionChangedCommand="{Binding PositionChangedCommand}"
              PositionChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=Position}">
    ...
</CarouselView>

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionChangedCommandProperty, "PositionChangedCommand");
carouselView.SetBinding(CarouselView.PositionChangedCommandParameterProperty, new Binding("Position", source: RelativeBindingSource.Self));

In diesem Beispiel wird die Eigenschaft PositionChangedCommand an die Eigenschaft PositionChangedCommand gebunden, wobei der Eigenschaftswert Position als Argument übergeben wird. Der PositionChangedCommand kann dann bei Bedarf auf die Position reagieren, die sich ändert:

public ICommand PositionChangedCommand => new Command<int>((position) =>
{
    PreviousPosition = CurrentPosition;
    CurrentPosition = position;
});

In diesem Beispiel werden die PositionChangedCommand-Objekte aktualisiert, die die vorherigen und aktuellen Positionen speichern.

Aktuelles Element voreinstellen

Das aktuelle Element in einer CarouselView kann programmgesteuert festgelegt werden, indem die Eigenschaft CurrentItem auf das Element festgelegt wird. Im folgenden XAML-Beispiel wird eine CarouselView gezeigt, die das aktuelle Element vorab auswählt:

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

Der entsprechende C#-Code lautet:

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

Hinweis

Die CurrentItem-Eigenschaft verfügt über den Standardbindungsmodus TwoWay.

Die Eigenschaftendaten der CarouselView.CurrentItem werden an die Eigenschaft CurrentItem des verbundenen Ansichtsmodells gebunden, das vom Typ Monkey ist. Standardmäßig wird eine TwoWay-Bindung verwendet, sodass der Wert der Eigenschaft CurrentItem auf das aktuelle Objekt festgelegt wird, wenn die Benutzer*innen das aktuelle Monkey-Objekt ändern. Die Eigenschaft CurrentItem wird in der MonkeysViewModel-Klasse definiert:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public ObservableCollection<Monkey> Monkeys { get; private set; }

    public Monkey CurrentItem { get; set; }

    public MonkeysViewModel()
    {
        // ...
        CurrentItem = Monkeys.Skip(3).FirstOrDefault();
        OnPropertyChanged("CurrentItem");
    }
}

In diesem Beispiel wird die Eigenschaft CurrentItem auf das vierte Element in der Monkeys-Sammlung festgelegt:

Screenshot einer Karussellansicht mit voreingestelltem Element unter iOS und Android

Position voreinstellen

Das angezeigte Element in einem CarouselView-Objekt kann programmgesteuert festgelegt werden, indem die Eigenschaft Position auf den Index des Elements in der zugrunde liegenden Sammlung festgelegt wird. Das folgende XAML-Beispiel zeigt eine CarouselView, die das angezeigte Element festlegt:

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

Der entsprechende C#-Code lautet:

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

Hinweis

Die Position-Eigenschaft verfügt über den Standardbindungsmodus TwoWay.

Die Eigenschaftendaten von CarouselView.Position werden an die Eigenschaft Position des verbundenen Ansichtsmodells gebunden, das vom Typ int ist. Standardmäßig wird eine TwoWay-Bindung verwendet, sodass bei einem Bildlauf durch die CarouselView durch Benutzer*innen der Wert der Eigenschaft Position auf den Index des angezeigten Elements festgelegt wird. Die Eigenschaft Position wird in der MonkeysViewModel-Klasse definiert:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public int Position { get; set; }

    public MonkeysViewModel()
    {
        // ...
        Position = 3;
        OnPropertyChanged("Position");
    }
}

In diesem Beispiel wird die Eigenschaft Position auf das vierte Element in der Monkeys-Sammlung festgelegt:

Screenshot einer Karussellansicht mit voreingestellter Position unter iOS und Android

Definieren von visuellen Zuständen

CarouselView definiert vier visuelle Zustände:

  • CurrentItem stellt den visuellen Zustand für das aktuell angezeigte Element dar.
  • PreviousItem stellt den visuellen Zustand für das zuvor angezeigte Element dar.
  • NextItem stellt den visuellen Zustand für das nächste Element dar.
  • DefaultItem stellt den visuellen Zustand für den Rest der Elemente dar.

Diese visuellen Zustände können verwendet werden, um visuelle Änderungen an den Elementen zu initiieren, die von der CarouselView angezeigt werden.

Das folgende XAM-Beispiel zeigt, wie man die visuellen Zustände CurrentItem, PreviousItem, NextItem und DefaultItem definiert:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="CurrentItem">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="1.1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PreviousItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NextItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="DefaultItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.25" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- Item template content -->
                <Frame HasShadow="true">
                    ...
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

In diesem Beispiel gibt der visuelle Zustand CurrentItem an, dass das aktuelle Element, das von der CarouselView angezeigt wird, seine Eigenschaft Scale auf einen Standardwort von 1 auf 1,1 ändern lassen wird. Die visuellen Zustände PreviousItem und NextItem geben an, dass die Elemente, die das aktuelle Element umgeben, mit einem Opacity-Wert von 0,5 angezeigt werden. Der visuelle Zustand DefaultItem gibt an, dass die restlichen Elemente, die von der CarouselView angezeigt werden, mit einem Opacity-Wert von 0,25 angezeigt werden.

Hinweis

Alternativ können die visuellen Zustände in einem Style definiert werden, der einen TargetType-Eigenschaftswert aufweist, der der Typ des Stammelements der DataTemplate ist, die als der ItemTemplate-Eigenschaftswert festgelegt wird.

Die folgenden Screenshots zeigen die CurrentItemZustände , PreviousItemund NextItem visuelle Zustände:

Screenshot einer Karussellansicht mit visuellen Zuständen unter iOS und Android

Weitere Informationen zu visuellen Zuständen finden Sie unter Xamarin.Forms: Visual State-Manager.

Löschen des aktuellen Elements

Die Eigenschaft CurrentItem kann gelöscht werden, indem Sie sie oder das Objekt, an das sie gebunden ist, auf null festlegen.

Abprallen deaktivieren

Standardmäßig lässt die CarouselView Elemente an Inhaltsgrenzen abprallen. Sie können dieses Verhalten deaktivieren, indem Sie die Eigenschaft IsBounceEnabled auf false festlegen.

Deaktivieren von Schleifen

Standardmäßig bietet die CarouselView Schleifenzugriff auf ihre Sammlung von Elementen. Daher wird durch rückwärtiges Wischen vom ersten Element in der Sammlung das letzte Element in der Sammlung angezeigt. Entsprechend wird beim Vorwärtswischen vom letzten Element in der Sammlung das erste Element in der Sammlung zurückgegeben. Sie können dieses Verhalten deaktivieren, indem Sie die Eigenschaft Loop auf false festlegen.

Deaktivieren der Wischinteraktion

Standardmäßig ermöglicht die CarouselView es Benutzer*innen, mithilfe einer Wischbewegung durch Elemente zu navigieren. Diese Wischinteraktion kann durch Festlegen der Eigenschaft IsSwipeEnabled auf false deaktiviert werden.

  • Last updated on