Xamarin.FormsCarouselview-Interaktion CarouselView Interaction

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

CarouselViewdefiniert die folgenden Eigenschaften, die die Benutzerinteraktion steuern:CarouselView defines the following properties that control user interaction:

  • CurrentItem, vom Typ object , das aktuelle Element, das angezeigt wird.CurrentItem, of type object, the current item being displayed. Diese Eigenschaft verfügt über einen Standard Bindungs Modus von TwoWay und verfügt über einen null Wert, wenn keine anzuzeigenden Daten vorhanden sind.This property has a default binding mode of TwoWay, and has a null value when there isn't any data to display.
  • CurrentItemChangedCommandvom Typ ICommand , der ausgeführt wird, wenn sich das aktuelle Element ändert.CurrentItemChangedCommand, of type ICommand, which is executed when the current item changes.
  • CurrentItemChangedCommandParameter vom Typ object: der Parameter, der an CurrentItemChangedCommand übergeben wird.CurrentItemChangedCommandParameter, of type object, which is the parameter that's passed to the CurrentItemChangedCommand.
  • IsBounceEnabledvom Typ bool , der angibt, ob das CarouselView an einer Inhalts Grenze springt.IsBounceEnabled, of type bool, which specifies whether the CarouselView will bounce at a content boundary. Standardwert: true.The default value is true.
  • IsSwipeEnabledvom Typ bool , der bestimmt, ob das angezeigte Element durch eine Schwenkbewegung geändert wird.IsSwipeEnabled, of type bool, which determines whether a swipe gesture will change the displayed item. Standardwert: true.The default value is true.
  • Position, vom Typ int , der Index des aktuellen Elements in der zugrunde liegenden Auflistung.Position, of type int, the index of the current item in the underlying collection. Diese Eigenschaft verfügt über einen Standard Bindungs Modus von TwoWay und verfügt über einen Wert von 0, wenn keine anzuzeigenden Daten vorhanden sind.This property has a default binding mode of TwoWay, and has a 0 value when there isn't any data to display.
  • PositionChangedCommandvom Typ ICommand , der ausgeführt wird, wenn sich die Position ändert.PositionChangedCommand, of type ICommand, which is executed when the position changes.
  • PositionChangedCommandParameter vom Typ object: der Parameter, der an PositionChangedCommand übergeben wird.PositionChangedCommandParameter, of type object, which is the parameter that's passed to the PositionChangedCommand.
  • VisibleViewsvom Typ ObservableCollection<View> , bei dem es sich um eine schreibgeschützte Eigenschaft handelt, die die-Objekte für die Elemente enthält, die zurzeit sichtbar sind.VisibleViews, of type ObservableCollection<View>, which is a read-only property that contains the objects for the items that are currently visible.

Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein können.All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

CarouselViewdefiniert ein CurrentItemChanged -Ereignis, das ausgelöst wird, wenn die- CurrentItem Eigenschaft geändert wird, entweder aufgrund eines Benutzer Bildlaufs oder wenn eine Anwendung die-Eigenschaft festlegt.CarouselView defines a CurrentItemChanged event that's fired when the CurrentItem property changes, either due to user scrolling, or when an application sets the property. Das CurrentItemChangedEventArgs Objekt, das das CurrentItemChanged Ereignis begleitet, verfügt über zwei Eigenschaften, beide vom Typ object :The CurrentItemChangedEventArgs object that accompanies the CurrentItemChanged event has two properties, both of type object:

  • PreviousItem– das vorherige Element, nachdem die-Eigenschaft geändert wurde.PreviousItem – the previous item, after the property change.
  • CurrentItem– das aktuelle Element, nachdem die-Eigenschaft geändert wurde.CurrentItem – the current item, after the property change.

CarouselViewdefiniert auch ein PositionChanged -Ereignis, das ausgelöst wird, wenn die- Position Eigenschaft geändert wird, entweder aufgrund eines Benutzer Bildlaufs oder wenn eine Anwendung die-Eigenschaft festlegt.CarouselView also defines a PositionChanged event that's fired when the Position property changes, either due to user scrolling, or when an application sets the property. Das PositionChangedEventArgs Objekt, das das PositionChanged Ereignis begleitet, verfügt über zwei Eigenschaften, beide vom Typ int :The PositionChangedEventArgs object that accompanies the PositionChanged event has two properties, both of type int:

  • PreviousPosition– die vorherige Position nach der Eigenschafts Änderung.PreviousPosition – the previous position, after the property change.
  • CurrentPosition– die aktuelle Position nach der Eigenschafts Änderung.CurrentPosition – the current position, after the property change.

Reagieren auf das aktuelle Element ändernRespond to the current item changing

Wenn sich das aktuell angezeigte Element ändert, wird die- CurrentItem Eigenschaft auf den Wert des Elements festgelegt.When the currently displayed item changes, the CurrentItem property will be set to the value of the item. Wenn diese Eigenschaft geändert wird, CurrentItemChangedCommand wird der mit dem Wert von ausgeführt, der an das-Objekt über CurrentItemChangedCommandParameter mittelt wird ICommand .When this property changes, the CurrentItemChangedCommand is executed with the value of the CurrentItemChangedCommandParameter being passed to the ICommand. PositionAnschließend wird die-Eigenschaft aktualisiert, und das-Ereignis wird ausgelöst CurrentItemChanged .The Position property is then updated, and the CurrentItemChanged event fires.

Wichtig

Die- Position Eigenschaft ändert sich, wenn sich die CurrentItem Eigenschaft ändert.The Position property changes when the CurrentItem property changes. Dies führt dazu PositionChangedCommand , dass der ausgeführt wird und das PositionChanged Ereignis ausgelöst wird.This will result in the PositionChangedCommand being executed, and the PositionChanged event firing.

eventEvent

Das folgende XAML-Beispiel zeigt einen CarouselView , der einen Ereignishandler verwendet, um auf das aktuelle Element zu reagieren, das sich ändert:The following XAML example shows a CarouselView that uses an event handler to respond to the current item changing:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

In diesem Beispiel wird der OnCurrentItemChanged Ereignishandler ausgeführt, wenn das CurrentItemChanged Ereignis ausgelöst wird:In this example, the OnCurrentItemChanged event handler is executed when the CurrentItemChanged event fires:

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

In diesem Beispiel macht der OnCurrentItemChanged Ereignishandler die vorherigen und aktuellen Elemente verfügbar:In this example, the OnCurrentItemChanged event handler exposes the previous and current items:

Screenshot einer carouselview mit vorherigen und aktuellen Elementen unter IOS und AndroidScreenshot of a CarouselView with previous and current items, on iOS and Android

Get-HelpCommand

Das folgende XAML-Beispiel zeigt einen CarouselView , der einen Befehl verwendet, um auf das aktuelle Element zu reagieren, das sich ändert:The following XAML example shows a CarouselView that uses a command to respond to the current item changing:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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- CurrentItemChangedCommand Eigenschaft an die- ItemChangedCommand Eigenschaft gebunden, wobei der CurrentItem Eigenschafts Wert als Argument übergeben wird.In this example, the CurrentItemChangedCommand property binds to the ItemChangedCommand property, passing the CurrentItem property value to it as an argument. Der ItemChangedCommand kann dann wie erforderlich auf das aktuelle Element reagieren, das geändert wird:The ItemChangedCommand can then respond to the current item changing, as required:

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

In diesem Beispiel aktualisiert die ItemChangedCommand Objekte, die die vorherigen und aktuellen Elemente speichern.In this example, the ItemChangedCommand updates objects that store the previous and current items.

Reagieren auf die Änderung der PositionRespond to the position changing

Wenn sich das aktuell angezeigte Element ändert, wird die- Position Eigenschaft auf den Index des aktuellen Elements in der zugrunde liegenden Auflistung festgelegt.When the currently displayed item changes, the Position property will be set to the index of the current item in the underlying collection. Wenn diese Eigenschaft geändert wird, PositionChangedCommand wird der mit dem Wert von ausgeführt, der an das-Objekt über PositionChangedCommandParameter mittelt wird ICommand .When this property changes, the PositionChangedCommand is executed with the value of the PositionChangedCommandParameter being passed to the ICommand. Das PositionChanged Ereignis wird ausgelöst.The PositionChanged event then fires. Wenn die Position Eigenschaft Programm gesteuert geändert wurde, wird der CarouselView auf das Element gescrollt, das dem Wert entspricht Position .If the Position property has been programmatically changed, the CarouselView will be scrolled to the item that corresponds to the Position value.

Hinweis

Wenn Sie die- Position Eigenschaft auf 0 festlegen, wird das erste Element in der zugrunde liegenden Auflistung angezeigt.Setting the Position property to 0 will result in the first item in the underlying collection being displayed.

eventEvent

Das folgende XAML-Beispiel zeigt einen CarouselView , der einen Ereignishandler verwendet, um auf die Eigenschaft zu reagieren, die Position geändert wird:The following XAML example shows a CarouselView that uses an event handler to respond to the Position property changing:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

In diesem Beispiel wird der OnPositionChanged Ereignishandler ausgeführt, wenn das PositionChanged Ereignis ausgelöst wird:In this example, the OnPositionChanged event handler is executed when the PositionChanged event fires:

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

In diesem Beispiel macht der OnCurrentItemChanged Ereignishandler die vorherigen und aktuellen Positionen verfügbar:In this example, the OnCurrentItemChanged event handler exposes the previous and current positions:

Screenshot einer carouselview mit früheren und aktuellen Positionen unter IOS und AndroidScreenshot of a CarouselView with previous and current positions, on iOS and Android

Get-HelpCommand

Das folgende XAML-Beispiel zeigt einen CarouselView , der einen Befehl verwendet, um auf die Eigenschaft zu reagieren, die Position geändert wird:The following XAML example shows a CarouselView that uses a command to respond to the Position property changing:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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- PositionChangedCommand Eigenschaft an die- PositionChangedCommand Eigenschaft gebunden, wobei der Position Eigenschafts Wert als Argument übergeben wird.In this example, the PositionChangedCommand property binds to the PositionChangedCommand property, passing the Position property value to it as an argument. Der PositionChangedCommand kann dann wie erforderlich auf die ändernde Position reagieren:The PositionChangedCommand can then respond to the position changing, as required:

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

In diesem Beispiel aktualisiert die PositionChangedCommand Objekte, die die vorherige und die aktuelle Position speichern.In this example, the PositionChangedCommand updates objects that store the previous and current positions.

Aktuelles Element voreingestelltPreset the current item

Das aktuelle Element in einem CarouselView kann Programm gesteuert festgelegt werden, indem die- CurrentItem Eigenschaft auf das-Element festgelegt wird.The current item in a CarouselView can be programmatically set by setting the CurrentItem property to the item. Das folgende XAML-Beispiel zeigt einen CarouselView , der das aktuelle Element vorab auswählt:The following XAML example shows a CarouselView that pre-chooses the current item:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Hinweis

Die- CurrentItem Eigenschaft verfügt über einen Standard Bindungs Modus von TwoWay .The CurrentItem property has a default binding mode of TwoWay.

Die CarouselView.CurrentItem Eigenschaften Daten werden an die- CurrentItem Eigenschaft des verbundenen Ansichts Modells gebunden, das vom Typ ist Monkey .The CarouselView.CurrentItem property data binds to the CurrentItem property of the connected view model, which is of type Monkey. Standardmäßig wird eine TwoWay Bindung verwendet, damit der Wert der- CurrentItem Eigenschaft auf das aktuelle-Objekt festgelegt wird, wenn der Benutzer das aktuelle Element ändert Monkey .By default, a TwoWay binding is used so that if the user changes the current item, the value of the CurrentItem property will be set to the current Monkey object. Die- CurrentItem Eigenschaft ist in der- MonkeysViewModel Klasse definiert:The CurrentItem property is defined in the MonkeysViewModel class:

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- CurrentItem Eigenschaft auf das vierte Element in der-Auflistung festgelegt Monkeys :In this example, the CurrentItem property is set to the fourth item in the Monkeys collection:

Screenshot einer carouselview mit voreingestellten Element unter IOS und AndroidScreenshot of a CarouselView with preset item, on iOS and Android

Position der VoreinstellungPreset the position

Das angezeigte Element CarouselView kann Programm gesteuert festgelegt werden, indem die- Position Eigenschaft auf den Index des Elements in der zugrunde liegenden Auflistung festgelegt wird.The displayed item CarouselView can be programmatically set by setting the Position property to the index of the item in the underlying collection. Das folgende XAML-Beispiel zeigt CarouselView , wie das angezeigte Element festgelegt wird:The following XAML example shows a CarouselView that sets the displayed item:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Hinweis

Die- Position Eigenschaft verfügt über einen Standard Bindungs Modus von TwoWay .The Position property has a default binding mode of TwoWay.

Die CarouselView.Position Eigenschaften Daten werden an die- Position Eigenschaft des verbundenen Ansichts Modells gebunden, das vom Typ ist int .The CarouselView.Position property data binds to the Position property of the connected view model, which is of type int. Standardmäßig wird eine TwoWay Bindung verwendet, damit der CarouselView Wert der Position Eigenschaft auf den Index des angezeigten Elements festgelegt wird, wenn der Benutzer durch den scrollt.By default, a TwoWay binding is used so that if the user scrolls through the CarouselView, the value of the Position property will be set to the index of the displayed item. Die- Position Eigenschaft ist in der- MonkeysViewModel Klasse definiert:The Position property is defined in the MonkeysViewModel class:

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

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

In diesem Beispiel wird die- Position Eigenschaft auf das vierte Element in der-Auflistung festgelegt Monkeys :In this example, the Position property is set to the fourth item in the Monkeys collection:

Screenshot einer carouselview mit vordefinierter Position unter IOS und AndroidScreenshot of a CarouselView with preset position, on iOS and Android

Definieren von visuellen ZuständenDefine visual states

CarouselViewdefiniert vier visuelle Zustände:CarouselView defines four visual states:

  • CurrentItemstellt den visuellen Zustand für das aktuell angezeigte Element dar.CurrentItem represents the visual state for the currently displayed item.
  • PreviousItemstellt den visuellen Zustand für das zuvor angezeigte Element dar.PreviousItem represents the visual state for the previously displayed item.
  • NextItemstellt den visuellen Zustand für das nächste Element dar.NextItem represents the visual state for the next item.
  • DefaultItemstellt den visuellen Zustand für die restlichen Elemente dar.DefaultItem represents the visual state for the remainder of the items.

Diese visuellen Zustände können verwendet werden, um visuelle Änderungen an den Elementen zu initiieren, die von angezeigt werden CarouselView .These visual states can be used to initiate visual changes to the items displayed by the CarouselView.

Das folgende XAML-Beispiel zeigt, wie die CurrentItem PreviousItem visuellen Zustände,, und definiert werden NextItem DefaultItem :The following XAML example shows how to define the CurrentItem, PreviousItem, NextItem, and DefaultItem visual states:

<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 CurrentItem visuelle Zustand an, dass die-Eigenschaft des aktuellen Elements, das von angezeigt CarouselView wird, Scale von seinem Standardwert von 1 in 1,1 geändert wird.In this example, the CurrentItem visual state specifies that the current item displayed by the CarouselView will have its Scale property changed from its default value of 1 to 1.1. Die PreviousItem NextItem visuellen Zustände und geben an, dass die Elemente, die das aktuelle Element umgeben, mit dem Opacity Wert 0,5 angezeigt werden.The PreviousItem and NextItem visual states specify that the items surrounding the current item will be displayed with an Opacity value of 0.5. Der DefaultItem visuelle Zustand gibt an, dass die restlichen Elemente, die von angezeigt werden, CarouselView mit dem Opacity Wert 0,25 angezeigt werden.The DefaultItem visual state specifies that the remainder of the items displayed by the CarouselView will be displayed with an Opacity value of 0.25.

Hinweis

Alternativ können die visuellen Zustände in einer definiert werden Style , die über einen TargetType -Eigenschafts Wert verfügt, der der Typ des Stamm Elements von DataTemplate ist, das als ItemTemplate Eigenschafts Wert festgelegt wird.Alternatively, the visual states can be defined in a Style that has a TargetType property value that's the type of the root element of the DataTemplate, which is set as the ItemTemplate property value.

Die folgenden Screenshots zeigen die CurrentItem PreviousItem NextItem visuellen Zustände, und:The following screenshots show the CurrentItem, PreviousItem, and NextItem visual states:

Screenshot einer carouselview mit visuellen Zuständen unter IOS und AndroidScreenshot of a CarouselView using visual states, on iOS and Android

Weitere Informationen zu visuellen Zuständen finden Sie unter Xamarin.Forms: Visual State-Manager.For more information about visual states, see Xamarin.Forms Visual State Manager.

Aktuelles Element löschenClear the current item

Die- CurrentItem Eigenschaft kann gelöscht werden, indem Sie oder das Objekt, an das Sie gebunden wird, auf festgelegt wird null .The CurrentItem property can be cleared by setting it, or the object it binds to, to null.

Springen deaktivierenDisable bounce

Standardmäßig CarouselView springt Elemente an Inhalts Grenzen.By default, CarouselView bounces items at content boundaries. Dies kann deaktiviert werden, indem die-Eigenschaft auf festgelegt wird IsBounceEnabled false .This can be disabled by setting the IsBounceEnabled property to false.

Deaktivieren der wischen-InteraktionDisable swipe interaction

Standardmäßig CarouselView ermöglicht es Benutzern, mithilfe einer Schwenkbewegung durch Elemente zu navigieren.By default, CarouselView allows users to move through items using a swipe gesture. Diese Schwenk Interaktion kann deaktiviert werden, indem die- IsSwipeEnabled Eigenschaft auf festgelegt wird false .This swipe interaction can be disabled by setting the IsSwipeEnabled property to false.