Freigeben über

Xamarin.Forms SwipeView

  • Artikel

Dies SwipeView ist ein Containersteuerelement, das ein Inhaltselement umschließt und Kontextmenüelemente bereitstellt, die durch eine Streifbewegung angezeigt werden:

Screenshot von SwipeView-Wischelementen in einer CollectionView unter iOS und Android

SwipeView definiert die folgenden Eigenschaften:

  • LeftItems vom Typ SwipeItems, der die Streichelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von der linken Seite gestrichen wird.
  • RightItems vom Typ SwipeItems, der die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von der rechten Seite gewischt wird.
  • TopItems, vom Typ SwipeItems, der die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von oben nach unten gewischt wird.
  • BottomItems, vom Typ SwipeItems, der die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von unten nach oben gewischt wird.
  • Threshold, des Typs double, der die Anzahl der geräteunabhängigen Einheiten darstellt, die eine Wischgeste auslösen, um Wischelemente vollständig aufzudecken.

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

Darüber hinaus erbt die SwipeView die Eigenschaft Content von der Klasse ContentView. Die Content-Eigenschaft ist die Inhaltseigenschaft der SwipeView-Klasse und muss daher nicht explizit festgelegt werden.

Die Klasse SwipeView definiert auch drei Ereignisse:

  • SwipeStarted wird ausgelöst, wenn eine Streifbewegung gestartet wird. Das SwipeStartedEventArgs-Objekt, das dieses Ereignis begleitet, hat eine SwipeDirection Eigenschaft vom Typ SwipeDirection.
  • SwipeChanging wird ausgelöst, wenn die Streifbewegung erfolgt. Das SwipeChangingEventArgs-Objekt, das dieses Ereignis begleitet, hat eine SwipeDirection-Eigenschaft vom Typ SwipeDirection und eine Offset-Eigenschaft vom Typ double.
  • SwipeEnded wird ausgelöst, wenn eine Streifbewegung endet. Das SwipeEndedEventArgs-Objekt, das dieses Ereignis begleitet, hat eine SwipeDirection-Eigenschaft vom Typ SwipeDirection und eine IsOpen-Eigenschaft vom Typ bool.

Darüber hinaus enthält SwipeView die Methoden Open und Close, mit denen die Wischelemente programmatisch geöffnet bzw. geschlossen werden.

Hinweis

SwipeView hat auf iOS und Android eine plattformspezifische Funktion, die den Übergang steuert, der beim Öffnen eines SwipeView verwendet wird. Weitere Informationen finden Sie unter SwipeView Swipe Transition Mode unter iOS und SwipeView Swipe Transition Mode unter Android.

Erstellen einer SwipeView

Ein SwipeView muss den Inhalt definieren, um den sich das SwipeView wickelt, und die Elemente, die durch die Wischgeste angezeigt werden. Die Wischelemente sind ein oder mehrere SwipeItem-Objekte, die in einer der vier SwipeView-Richtungssammlungen – LeftItems, RightItems, TopItems oder BottomItems – platziert sind.

Das folgende Beispiel zeigt, wie man ein SwipeView in XAML instanziiert:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

Der entsprechende C#-Code lautet:

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Color.LightGray
};
grid.Children.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

In diesem Beispiel ist der SwipeView-Inhalt ein Grid, der ein Label enthält:

Screenshot von SwipeView-Inhalten unter iOS und Android

Die Wischelemente werden verwendet, um Aktionen auf dem SwipeView-Inhalt auszuführen, und werden angezeigt, wenn das Steuerelement von der linken Seite gewischt wird:

Screenshot der Wischbewegungselemente

Standardmäßig wird ein Wischelement ausgeführt, wenn es von der Benutzer*in angetippt wird. Dieses Verhalten kann jedoch geändert werden. Weitere Informationen finden Sie unter Wischmodus.

Nach der Ausführung eines Wischvorgangs werden die Wischvorgänge ausgeblendet und der SwipeView-Inhalt wird wieder angezeigt. Dieses Verhalten kann jedoch geändert werden. Weitere Informationen finden Sie unter Wischverhalten.

Hinweis

Wischinhalte und Wischelemente können inline platziert oder als Ressourcen definiert werden.

Wischen von Elementen

Die Sammlungen LeftItems, RightItems, TopItems und BottomItems sind alle vom Typ SwipeItems. Die SwipeItems-Klasse definiert die folgenden Eigenschaften:

  • Mode, des Typs SwipeMode, der die Auswirkung einer Wischinteraktion anzeigt. Weitere Informationen zum Wischmodus finden Sie unter Wischmodus.
  • SwipeBehaviorOnInvoked, vom Typ SwipeBehaviorOnInvoked, der angibt, wie sich ein SwipeView verhält, nachdem ein Wischelement aufgerufen wurde. Weitere Informationen zum Wischverhalten finden Sie unter Wischverhalten.

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

Jedes Wischelement ist als SwipeItem-Objekt definiert, das in eine der vier SwipeItems-Richtungssammlungen eingeordnet wird. Die Klasse SwipeItem leitet von der Klasse MenuItem ab und fügt die folgenden Mitglieder hinzu:

  • Eine BackgroundColor-Eigenschaft vom Typ Color, die die Hintergrundfarbe des Swipe-Elements definiert. Diese Eigenschaft wird durch eine bindungsfähige Eigenschaft unterstützt.
  • Ein Invoked Ereignis, das ausgelöst wird, wenn das Wischelement ausgeführt wird.

Wichtig

Die Klasse MenuItem definiert mehrere Eigenschaften, darunter Command, CommandParameter, IconImageSource und Text. Diese Eigenschaften können für ein SwipeItem-Objekt festgelegt werden, um sein Aussehen zu definieren und um ein ICommand zu definieren, das ausgeführt wird, wenn das Streichelement aufgerufen wird. Weitere Informationen finden Sie unter Xamarin.Forms MenuItem.

Das folgende Beispiel zeigt zwei SwipeItem-Objekte in der LeftItems-Sammlung eines SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Das Aussehen der einzelnen SwipeItem wird durch eine Kombination der Eigenschaften Text, IconImageSource und BackgroundColor bestimmt:

Screenshot der Wischbewegungselemente

Wenn ein SwipeItem angetippt wird, wird sein Invoked-Ereignis ausgelöst und von seinem registrierten Ereignishandler behandelt. Außerdem wird das Ereignis MenuItem.Clicked ausgelöst. Alternativ kann die Command-Eigenschaft auf eine ICommand-Implementierung gesetzt werden, die ausgeführt wird, wenn die SwipeItem aufgerufen wird.

Hinweis

Wenn das Aussehen eines SwipeItem nur mit den Eigenschaften Text oder IconImageSource definiert wird, wird der Inhalt immer zentriert.

Neben der Definition von Wischelementen als SwipeItem-Objekte ist es auch möglich, benutzerdefinierte Wischelementansichten zu definieren. Weitere Informationen finden Sie unter Benutzerdefinierte Wischelemente.

Wischrichtungen

SwipeView unterstützt vier verschiedene Wischrichtungen, wobei die Wischrichtung durch die richtungsbezogene SwipeItems-Sammlung definiert wird, der die SwipeItem-Objekte hinzugefügt werden. Jede Wischrichtung kann ihre eigenen Wischelemente enthalten. Das folgende Beispiel zeigt ein SwipeView, dessen Wischelemente von der Wischrichtung abhängen:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

In diesem Beispiel kann der SwipeView-Inhalt nach rechts oder links gestrichen werden. Wenn Sie nach rechts wischen, wird das Wischelement Löschen angezeigt und wenn Sie nach links wischen, werden die Wischelemente Favorit und Teilen angezeigt.

Warnung

Auf einem SwipeView kann jeweils nur eine Instanz einer gerichteten SwipeItems-Sammlung eingestellt werden. Daher können nicht zwei LeftItems-Definitionen für eine SwipeView vorliegen.

Die Ereignisse SwipeStarted, SwipeChanging und SwipeEnded melden die Wischrichtung über die Eigenschaft SwipeDirection in den Ereignisargumenten. Diese Eigenschaft ist vom Typ SwipeDirection, einer Aufzählung, die aus vier Mitgliedern besteht:

  • Right zeigt an, dass eine Wischbewegung nach rechts stattgefunden hat.
  • Left zeigt an, dass eine Wischbewegung nach links stattgefunden hat.
  • Up zeigt an, dass eine Wischbewegung nach oben stattgefunden hat.
  • Down zeigt an, dass eine Wischbewegung nach unten stattgefunden hat.

Schwellenwert für Wischen

SwipeView enthält eine Threshold-Eigenschaft vom Typ double, die die Anzahl der geräteunabhängigen Einheiten darstellt, die eine Wischgeste auslösen, um Wischelemente vollständig aufzudecken.

Das folgende Beispiel zeigt einen SwipeView, der die Eigenschaft Threshold festlegt:

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

In diesem Beispiel muss das SwipeView für 200 geräteunabhängige Einheiten gewischt werden, bevor das SwipeItem vollständig angezeigt wird.

Hinweis

Derzeit wird die Threshold Eigenschaft nur unter iOS und Android implementiert.

Wischmodus

Die Klasse SwipeItems verfügt über eine Mode-Eigenschaft, die die Wirkung einer Wischinteraktion angibt. Diese Eigenschaft sollte auf eines der SwipeMode-Enumerationsmembers gesetzt werden:

  • Reveal zeigt an, dass eine Wischbewegung die Wischelemente aufdeckt. Dies ist der Standardwert der Eigenschaft SwipeItems.Mode.
  • Execute zeigt an, dass eine Wischbewegung die Wischelemente ausführt.

Im Aufdeckungsmodus wischt der/die Benutzer*in über ein SwipeView, um ein Menü zu öffnen, das aus einem oder mehreren Streichelementen besteht, und muss explizit auf ein Streichelement tippen, um es auszuführen. Nach der Ausführung des Wischelements werden die Wischelemente geschlossen und der SwipeView-Inhalt wird wieder angezeigt. Im Ausführungsmodus wischt der/die Benutzer*in über ein SwipeView, um ein Menü zu öffnen, das aus weiteren Wischoptionen besteht, die dann automatisch ausgeführt werden. Nach der Ausführung werden die Wischelemente geschlossen und der SwipeView-Inhalt wird wieder angezeigt.

Das folgende Beispiel zeigt einen SwipeView, der für den Ausführungsmodus konfiguriert ist:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

In diesem Beispiel kann der SwipeView-Inhalt nach rechts gewischt werden, um das Wischelement anzuzeigen, das sofort ausgeführt wird. Nach der Ausführung wird der Inhalt von SwipeView erneut angezeigt.

Wischverhalten

Die SwipeItems-Klasse hat eine SwipeBehaviorOnInvoked-Eigenschaft, die angibt, wie sich ein SwipeView nach dem Aufrufen eines Wischelements verhält. Diese Eigenschaft sollte auf eines der SwipeBehaviorOnInvoked-Enumerationsmembers gesetzt werden:

  • Auto zeigt an, dass SwipeView im Einblendungsmodus geschlossen wird, nachdem ein Wischelement aufgerufen wurde, und im Ausführungsmodus bleibt SwipeView offen, nachdem ein Wischelement aufgerufen wurde. Dies ist der Standardwert der Eigenschaft SwipeItems.SwipeBehaviorOnInvoked.
  • Close zeigt an, dass die SwipeView nach dem Aufrufen eines Wischelements geschlossen wird.
  • RemainOpen zeigt an, dass das SwipeView nach dem Aufrufen eines Wischelements geöffnet bleibt.

Das folgende Beispiel zeigt ein SwipeView, das so konfiguriert ist, dass es offen bleibt, nachdem ein Wischelement aufgerufen wurde:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Benutzerdefinierte Wischelemente

Benutzerdefinierte Wischelemente können mit dem Typ SwipeItemView definiert werden. Die Klasse SwipeItemView leitet sich von der Klasse ContentView ab und fügt die folgenden Eigenschaften hinzu:

  • Command, vom Typ ICommand, die ausgeführt wird, wenn ein Wischelement angetippt wird.
  • CommandParameter, vom Typ object: Parameter, der an den Command übergeben wird.

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

Die SwipeItemView Klasse definiert auch ein Invoked Ereignis, das ausgelöst wird, wenn das Element angetippt wird, nachdem das Command Element ausgeführt wurde.

Das folgende Beispiel zeigt ein SwipeItemView-Objekt in der LeftItems-Sammlung eines SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

In diesem Beispiel umfasst das SwipeItemView ein StackLayout, das ein Entry und ein Label enthält. Nachdem der/die Benutzer*in Eingaben in das Entry eingegeben hat, kann der Rest des SwipeViewItem angetippt werden, wodurch das ICommand ausgeführt wird, das durch die Eigenschaft SwipeItemView.Command definiert ist.

Programmgesteuertes Öffnen und Schließen von SwipeView

SwipeView enthält die Methoden Open und Close, mit denen die Wischelemente programmatisch geöffnet bzw. geschlossen werden. Standardmäßig animieren diese Methoden das SwipeView, wenn es geöffnet oder geschlossen wird.

Die Open-Methode erfordert ein OpenSwipeItem-Argument, um die Richtung anzugeben, aus der SwipeView geöffnet werden soll. Die Enumeration OpenSwipeItem hat vier Mitglieder:

  • LeftItems, was bedeutet, dass SwipeView von links geöffnet wird, um die Wischelemente in der LeftItems-Sammlung zu zeigen.
  • TopItems, was bedeutet, dass die SwipeView von oben geöffnet wird, um die Wischelemente in der TopItems-Sammlung einzublenden.
  • RightItems, was bedeutet, dass SwipeView von rechts geöffnet wird, um die Wischelemente in der RightItems-Sammlung anzuzeigen.
  • BottomItems, was bedeutet, dass SwipeView von unten geöffnet wird, um die Wischelemente in der BottomItems-Sammlung zu zeigen.

Darüber hinaus akzeptiert die Open-Methode auch ein optionales bool-Argument, das festlegt, ob das SwipeView beim Öffnen animiert wird.

Anhand eines SwipeView mit dem Namen swipeView zeigt das folgende Beispiel, wie ein SwipeView geöffnet wird, um die Wischelemente in der Sammlung LeftItems anzuzeigen:

swipeView.Open(OpenSwipeItem.LeftItems);

swipeView kann dann mit der Methode Close geschlossen werden:

swipeView.Close();

Hinweis

Die Close-Methode akzeptiert auch ein optionales bool-Argument, das festlegt, ob das SwipeView beim Schließen animiert wird.

Deaktivieren einer SwipeView

Eine Anwendung kann einen Zustand eingeben, in dem das Wischen eines Inhaltselements kein gültiger Vorgang ist. In solchen Fällen kann die SwipeView deaktiviert werden, indem die zugehörige IsEnabled-Eigenschaft auf false festgelegt wird. Dadurch wird verhindert, dass die Benutzenden Inhalte durch Wischen anzeigen können, um Wischelemente anzuzeigen.

Außerdem kann bei der Definition der Command-Eigenschaft eines SwipeItem oder SwipeItemView der CanExecute-Delegat des ICommand angegeben werden, um das Wischelement zu aktivieren oder zu deaktivieren.