Xamarin.Forms SwipeView

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

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

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

SwipeView definiert die folgenden Eigenschaften:

  • LeftItemsvom Typ SwipeItems, das die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von der linken Seite gewischt wird.
  • RightItemsvom Typ SwipeItems, die die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von der rechten Seite gewischt wird.
  • TopItemsvom Typ SwipeItems, der die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von oben nach unten gewischt wird.
  • BottomItemsvom Typ SwipeItems, die die Wischelemente darstellt, die aufgerufen werden können, wenn das Steuerelement von unten nach oben gewischt wird.
  • Thresholdvom Typ double, die die Anzahl der geräteunabhängigen Einheiten darstellt, die eine Wischbewegung auslösen, um Wischelemente vollständig anzuzeigen.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

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

Die SwipeView -Klasse definiert auch drei Ereignisse:

  • SwipeStarted wird ausgelöst, wenn ein Wischvorgang gestartet wird. Das SwipeStartedEventArgs Objekt, das dieses Ereignis begleitet, verfügt über eine SwipeDirection -Eigenschaft vom Typ SwipeDirection.
  • SwipeChanging wird ausgelöst, wenn der Wisch bewegt wird. Das SwipeChangingEventArgs -Objekt, das dieses Ereignis begleitet, verfügt über eine SwipeDirection -Eigenschaft vom Typ SwipeDirectionund eine Offset -Eigenschaft vom Typ double.
  • SwipeEnded wird ausgelöst, wenn ein Wisch endet. Das SwipeEndedEventArgs -Objekt, das dieses Ereignis begleitet, verfügt über eine SwipeDirection -Eigenschaft vom Typ SwipeDirectionund eine IsOpen -Eigenschaft vom Typ bool.

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

Hinweis

SwipeView verfügt über eine plattformspezifische unter iOS und Android, die den Übergang steuert, der beim Öffnen eines SwipeViewverwendet 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 der SwipeView umschließt, und die Wischelemente, die durch die Wischbewegung angezeigt werden. Bei den Wischelementen handelt es sich um ein oder SwipeItem mehrere Objekte, die in einer der vier SwipeView direktionalen Auflistungen platziert werden : LeftItems, RightItems, TopItemsoder BottomItems.

Das folgende Beispiel zeigt, wie sie in SwipeView XAML instanziieren:

<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 Inhalt ein Grid , der SwipeView eine Labelenthält:

Screenshot von SwipeView-Inhalten in iOS- und

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

Screenshot von SwipeView-Wischelementen unter iOS und Android

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

Nachdem ein Wischelement ausgeführt wurde, werden die Wischelemente ausgeblendet, und der SwipeView Inhalt wird erneut 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 LeftItemsAuflistungen , RightItems, TopItemsund BottomItems sind alle vom Typ SwipeItems. Die SwipeItems-Klasse definiert die folgenden Eigenschaften:

  • Modevom Typ SwipeMode, der die Auswirkung einer Wischinteraktion angibt. Weitere Informationen zum Wischmodus finden Sie unter Wischmodus.
  • SwipeBehaviorOnInvokedvom 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 durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Jedes Wischelement ist als Objekt SwipeItem definiert, das in einer der vier SwipeItems richtungsbasierten Auflistungen platziert wird. Die SwipeItem -Klasse wird von der MenuItem -Klasse abgeleitet und fügt die folgenden Member hinzu:

  • Eine BackgroundColor Eigenschaft vom Typ Color, die die Hintergrundfarbe des Wischelements definiert. Diese Eigenschaft wird durch eine bindbare Eigenschaft unterstützt.
  • Ein Invoked Ereignis, das ausgelöst wird, wenn das Wischelement ausgeführt wird.

Wichtig

Die MenuItem -Klasse definiert mehrere Eigenschaften, einschließlich Command, CommandParameterIconImageSource, und Text. Diese Eigenschaften können für ein SwipeItem -Objekt festgelegt werden, um dessen Darstellung zu definieren und eine ICommand zu definieren, die ausgeführt wird, wenn das Wischelement aufgerufen wird. Weitere Informationen finden Sie unter Xamarin.Forms MenuItem.

Das folgende Beispiel zeigt zwei SwipeItem -Objekte in der LeftItems Auflistung von :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>

Die Darstellung jeder SwipeItem wird durch eine Kombination der TextEigenschaften , IconImageSourceund BackgroundColor definiert:

Screenshot von SwipeView-Wischelementen unter iOS und Android

Wenn auf ein SwipeItem getippt wird, wird dessen Invoked Ereignis ausgelöst und vom registrierten Ereignishandler behandelt. Darüber hinaus wird das MenuItem.Clicked Ereignis ausgelöst. Alternativ kann die Command -Eigenschaft auf eine ICommand -Implementierung festgelegt werden, die ausgeführt wird, wenn aufgerufen SwipeItem wird.

Hinweis

Wenn die Darstellung eines SwipeItem nur mithilfe der Text Eigenschaften oder IconImageSource definiert wird, wird der Inhalt immer zentriert.

Zusätzlich zum Definieren von Wischelementen als SwipeItem Objekte ist es auch möglich, benutzerdefinierte Wischelementansichten zu definieren. Weitere Informationen finden Sie unter Benutzerdefinierte Wischelemente.

Wischen der Richtung

SwipeView unterstützt vier verschiedene Wischrichtungen, wobei die Wischrichtung durch die direktionale SwipeItems Auflistung definiert wird, der die SwipeItem Objekte hinzugefügt werden. Jede Wischrichtung kann ihre eigenen Wischelemente halten. Das folgende Beispiel zeigt z. B. eine SwipeView , deren 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 gewischt werden. Beim Wischen nach rechts wird das Wischelement Löschen angezeigt, während beim Wischen nach links die Wischelemente "Favorit" und " Teilen " angezeigt werden.

Warnung

Nur eine instance einer direktionalen SwipeItems Auflistung kann gleichzeitig auf einem SwipeViewfestgelegt werden. Daher können Sie nicht über zwei LeftItems Definitionen für eine SwipeViewverfügen.

Die SwipeStartedEreignisse , SwipeChangingund SwipeEnded melden die Wischrichtung über die SwipeDirection -Eigenschaft in den Ereignisargumenten. Diese Eigenschaft ist vom Typ SwipeDirection, bei der es sich um eine Enumeration handelt, die aus vier Membern besteht:

  • Right gibt an, dass ein Wischen nach rechts erfolgt ist.
  • Left gibt an, dass ein Wischen nach links erfolgt ist.
  • Up gibt an, dass ein Wischen nach oben erfolgt ist.
  • Down gibt an, dass ein Wischen nach unten erfolgt ist.

Schwellenwert für Wischen

SwipeView enthält eine Threshold -Eigenschaft vom Typ double, die die Anzahl geräteunabhängiger Einheiten darstellt, die eine Wischbewegung auslösen, um Wischelemente vollständig anzuzeigen.

Das folgende Beispiel zeigt eine SwipeView , die die Threshold -Eigenschaft festlegt:

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

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

Hinweis

Derzeit ist die Threshold -Eigenschaft nur unter iOS und Android implementiert.

Wischmodus

Die SwipeItems -Klasse verfügt über eine Mode -Eigenschaft, die den Effekt einer Wischinteraktion angibt. Diese Eigenschaft sollte auf eines der SwipeMode Enumerationsmber festgelegt werden:

  • Reveal gibt an, dass durch eine Wischbewegung die Wischelemente angezeigt werden. Dies ist der Standardwert der SwipeItems.Mode-Eigenschaft.
  • Execute gibt an, dass die Wischelemente durch eine Wischbewegung ausgeführt werden.

Im Anzeigemodus wischt der Benutzer mit einem SwipeView , um ein Menü zu öffnen, das aus einem oder mehreren Wischelementen besteht, und muss explizit auf ein Wischelement tippen, um es auszuführen. Nachdem das Wischelement ausgeführt wurde, werden die Wischelemente geschlossen, und der SwipeView Inhalt wird erneut angezeigt. Im Ausführungsmodus wischt der Benutzer ein SwipeView , um ein Menü zu öffnen, das aus einem weiteren Wischelemente besteht, die dann automatisch ausgeführt werden. Nach der Ausführung werden die Wischelemente geschlossen, und der SwipeView Inhalt wird erneut angezeigt.

Das folgende Beispiel zeigt eine SwipeView für die Verwendung des Ausführungsmodus konfigurierte:

<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 SwipeView Inhalt erneut angezeigt.

Wischverhalten

Die SwipeItems -Klasse verfügt über eine SwipeBehaviorOnInvoked -Eigenschaft, die angibt, wie sich ein SwipeView verhält, nachdem ein Wischelement aufgerufen wurde. Diese Eigenschaft sollte auf eines der SwipeBehaviorOnInvoked Enumerationsmber festgelegt werden:

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

Im folgenden Beispiel wird ein so konfiguriert, SwipeView dass nach dem Aufrufen eines Wischelements geöffnet bleibt:

<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 SwipeItemView Typ definiert werden. Die SwipeItemView -Klasse wird von der ContentView -Klasse abgeleitet und fügt die folgenden Eigenschaften hinzu:

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

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

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

Das folgende Beispiel zeigt ein SwipeItemView -Objekt in der LeftItems Auflistung von :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 die SwipeItemView ein StackLayoutEntry - und eine Label- . Nachdem der Benutzer die Eingabe in eingegeben Entryhat, kann auf den Rest der SwipeViewItem getippt werden, wodurch das ICommand durch die SwipeItemView.Command -Eigenschaft definierte ausgeführt wird.

Programmgesteuertes Öffnen und Schließen von SwipeView

SwipeView enthält Open - und Close -Methoden, die die Wischelemente programmgesteuert öffnen bzw. schließen. Standardmäßig animieren diese Methoden das , wenn es SwipeView geöffnet oder geschlossen wird.

Die Open -Methode erfordert ein OpenSwipeItem Argument, um die Richtung anzugeben, von der aus geöffnet SwipeView wird. Die OpenSwipeItem Enumeration verfügt über vier Member:

  • LeftItems, was angibt, dass von SwipeView links geöffnet wird, um die Wischelemente in der LeftItems Auflistung anzuzeigen.
  • TopItems, die angibt, dass von SwipeView oben geöffnet wird, um die Wischelemente in der TopItems Auflistung anzuzeigen.
  • RightItems, was angibt, dass von SwipeView rechts geöffnet wird, um die Wischelemente in der RightItems Auflistung anzuzeigen.
  • BottomItems, was angibt, dass von SwipeView unten geöffnet wird, um die Wischelemente in der BottomItems Auflistung anzuzeigen.

Darüber hinaus akzeptiert die Open -Methode auch ein optionales bool Argument, das definiert, ob animiert SwipeView wird, wenn es geöffnet wird.

Bei einem SwipeView namens swipeViewwird im folgenden Beispiel gezeigt, wie Sie eine öffnen, SwipeView um die Wischelemente in der LeftItems Auflistung anzuzeigen:

swipeView.Open(OpenSwipeItem.LeftItems);

Kann swipeView dann mit der Close -Methode geschlossen werden:

swipeView.Close();

Hinweis

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

Deaktivieren einer SwipeView

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

Darüber hinaus kann beim Definieren der Command -Eigenschaft eines SwipeItem oder SwipeItemView-Elements der CanExecute Delegat von ICommand angegeben werden, um das Wischelement zu aktivieren oder zu deaktivieren.