Xamarin.Forms SwipeView

Descarga del ejemplo

es un control de contenedor que se ajusta alrededor de un elemento de contenido y proporciona elementos de menú contextual que se revelan SwipeView mediante un gesto de deslizar el dedo:

SwipeView define las siguientes propiedades:

• LeftItems, de tipo , que representa los elementos de deslizamiento que se pueden invocar cuando se desliza el SwipeItems control desde el lado izquierdo.
• RightItems, de tipo , que representa los elementos de deslizamiento que se pueden invocar cuando se desliza el SwipeItems control desde el lado derecho.
• TopItems, de tipo , que representa los elementos de deslizamiento que se pueden invocar cuando se desliza el SwipeItems control de arriba hacia abajo.
• BottomItems, de tipo , que representa los elementos de deslizamiento que se pueden invocar cuando se desliza el SwipeItems control de abajo hacia arriba.
• Threshold, de tipo , que representa el número de unidades independientes del dispositivo que desencadenan un gesto de deslizar el dedo para mostrar completamente los elementos double de deslizamiento.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Además, hereda la propiedad SwipeView Xamarin_Forms SwipeView _ContentView_Content" data-linktype="absolute-path">de Content la ContentView clase . La propiedad Content es la propiedad de contenido de la clase SwipeView y, por tanto, no hay que establecerla explícitamente.

La SwipeView clase también define tres eventos:

• SwipeStarted se desencadena cuando se inicia un deslizamiento. El SwipeStartedEventArgs objeto que acompaña a este evento tiene una propiedad de tipo SwipeDirectionSwipeDirection .
• SwipeChanging se desencadena a medida que se mueve el deslizamiento. El SwipeChangingEventArgs objeto que acompaña a este evento tiene una SwipeDirection propiedad, de tipo , y una SwipeDirection propiedad de tipo Offsetdouble .
• SwipeEnded se desencadena cuando finaliza un deslizamiento. El SwipeEndedEventArgs objeto que acompaña a este evento tiene una SwipeDirection propiedad, de tipo , y una SwipeDirection propiedad de tipo IsOpenbool .

Además, incluye los métodos y , que abren y cierran los elementos de deslizar el dedo SwipeView mediante programación, OpenClose respectivamente.

Creación de un swipeview

Debe definir el contenido que contiene y los elementos de deslizar el dedo que se SwipeViewSwipeView revelan mediante el gesto de deslizar el dedo. Los elementos de deslizar rápidamente son uno o varios objetos que se colocan en una de las SwipeItem cuatro SwipeView colecciones direccionales: LeftItems , , o RightItemsTopItemsBottomItems .

En el ejemplo siguiente se muestra cómo crear instancias de SwipeView en XAML:

<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>

El código de C# equivalente es el siguiente:

// 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
};

En este ejemplo, el SwipeView contenido es un que contiene GridLabel :

en contenido de

Los elementos de deslizar rápidamente se usan para realizar acciones en el contenido y se revelan cuando el control se desliza SwipeView desde el lado izquierdo:

De forma predeterminada, se ejecuta un elemento de deslizamiento cuando el usuario lo pulsa. No obstante, se puede modificar este comportamiento. Para obtener más información, vea Swipe mode.

Una vez ejecutado un elemento de deslizar el dedo, los elementos de deslizamiento se ocultan y se vuelve a SwipeView mostrar el contenido. No obstante, se puede modificar este comportamiento. Para obtener más información, vea Comportamiento de deslizar el dedo.

Deslizar el dedo de los elementos

Las LeftItemsRightItemsTopItems colecciones , , BottomItems y son de tipo SwipeItems . La clase SwipeItems define las propiedades siguientes:

• Mode, de tipo SwipeMode , que indica el efecto de una interacción de deslizar el dedo. Para obtener más información sobre el modo de deslizar rápidamente, vea Swipe mode.
• SwipeBehaviorOnInvoked, de tipo , que indica cómo se comporta después de invocar un elemento SwipeBehaviorOnInvokedSwipeView de deslizamiento. Para obtener más información sobre el comportamiento del deslizamiento, vea Comportamiento de deslizar el dedo.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Cada elemento de deslizar rápidamente se define como SwipeItem un objeto que se coloca en una de las cuatro SwipeItems colecciones direccionales. La SwipeItem clase se deriva de la clase y agrega los miembros MenuItem siguientes:

• Propiedad, BackgroundColor de tipo , que define el color de fondo del elemento de Color deslizamiento. Esta propiedad está copiada por una propiedad enlazable.
• Evento Invoked que se desencadena cuando se ejecuta el elemento de deslizamiento.

En el ejemplo siguiente se SwipeItem muestran dos objetos en la colección de LeftItemsSwipeView :

<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>

La apariencia de cada SwipeItem una se define mediante una combinación de las propiedades , y TextIconImageSourceBackgroundColor :

Cuando se pulsa , su evento se SwipeItemInvoked despeda y lo controla su controlador de eventos registrado. Además, se MenuItem.Clicked produce el evento . Como alternativa, la Command propiedad se puede establecer en una implementación que se ejecutará cuando se ICommandSwipeItem invoque .

Además de definir elementos de deslizar el dedo como objetos, también es posible definir vistas personalizadas SwipeItem de elementos de deslizamiento. Para obtener más información, vea Elementos de deslizar rápidamente personalizados.

Dirección del deslizamiento

SwipeView admite cuatro direcciones de deslizamiento diferentes, con la dirección de deslizamiento definida por la colección direccional a la que se SwipeItemsSwipeItem agregan los objetos. Cada dirección de deslizamiento puede contener sus propios elementos de deslizamiento. Por ejemplo, en el ejemplo siguiente se muestra un SwipeView cuyos elementos de deslizar rápidamente dependen de la dirección del deslizamiento:

<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>

En este ejemplo, el SwipeView contenido se puede deslizar a la derecha o a la izquierda. Al deslizar el dedo hacia la derecha se mostrará el elemento Eliminar deslizar el dedo, mientras que al deslizar el dedo hacia la izquierda se mostrarán los elementos Favoritos y Compartir deslizar el dedo.

Los SwipeStarted eventos , y SwipeChangingSwipeEnded informan de la dirección del deslizamiento a través SwipeDirection de la propiedad en los argumentos de evento. Esta propiedad es de tipo SwipeDirection , que es una enumeración que consta de cuatro miembros:

• Right indica que se produjo un deslizamiento a la derecha.
• Left indica que se produjo un deslizamiento a la izquierda.
• Up indica que se produjo un deslizamiento hacia arriba.
• Down indica que se produjo un deslizamiento hacia abajo.

Umbral del gesto de pasar el dedo

SwipeView incluye una propiedad, de tipo , que representa el número de unidades independientes del dispositivo que desencadenan un gesto de deslizar el dedo para mostrar completamente los elementos de Thresholddouble deslizamiento.

En el ejemplo siguiente se SwipeView muestra un que establece la propiedad Threshold :

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

En este ejemplo, se debe deslizar el SwipeView dedo por 200 unidades independientes del dispositivo antes de SwipeItem que se revela por completo.

Modo de deslizar rápidamente

La SwipeItems clase tiene una propiedad , que indica el efecto de una interacción de Mode deslizamiento. Esta propiedad debe establecerse en uno de los miembros de SwipeMode enumeración:

• Reveal indica que un deslizamiento revela los elementos de deslizar el dedo. Este es el valor predeterminado de la propiedad SwipeItems.Mode.
• Execute indica que un deslizamiento ejecuta los elementos de deslizar el dedo.

En el modo reveal, el usuario desliza un dedo para abrir un menú que consta de uno o varios elementos de deslizar el dedo y debe pulsar explícitamente un elemento de deslizar el dedo para SwipeView ejecutarlo. Una vez ejecutado el elemento de deslizar el dedo, los elementos de deslizar rápidamente se cierran y se vuelve a SwipeView mostrar el contenido. En el modo de ejecución, el usuario desliza un dedo para abrir un menú que consta de uno más elementos de deslizar el dedo, que se SwipeView ejecutan automáticamente. Después de la ejecución, los elementos de deslizar rápidamente se cierran y se vuelve SwipeView a mostrar el contenido.

En el ejemplo siguiente se muestra SwipeView un configurado para usar el modo de ejecución:

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

En este ejemplo, el contenido se puede deslizar hacia la derecha para mostrar el elemento de deslizar SwipeView rápidamente, que se ejecuta inmediatamente. Después de la ejecución, SwipeView se vuelve a mostrar el contenido.

Comportamiento de deslizar rápidamente

La clase tiene una propiedad , que indica cómo se comporta después de invocar un elemento de deslizar SwipeItemsSwipeBehaviorOnInvokedSwipeView rápidamente. Esta propiedad debe establecerse en uno de los miembros de SwipeBehaviorOnInvoked enumeración:

• Auto indica que, en modo de revelación, se cierra después de invocar un elemento de deslizar rápidamente y, en modo de ejecución, permanece abierto después de invocar un elemento de deslizar SwipeViewSwipeView rápidamente. Este es el valor predeterminado de la propiedad SwipeItems.SwipeBehaviorOnInvoked.
• Close indica que se cierra SwipeView después de invocar un elemento de deslizar rápidamente.
• RemainOpen indica que permanece abierto SwipeView después de invocar un elemento de deslizar rápidamente.

En el ejemplo siguiente se muestra SwipeView un configurado para permanecer abierto después de invocar un elemento de deslizar rápidamente:

<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>

Elementos de deslizar rápidamente personalizados

Los elementos de deslizar rápidamente personalizados se pueden definir con el SwipeItemView tipo . La SwipeItemView clase se deriva de la clase y agrega las siguientes ContentView propiedades:

• Command, de tipo , que se ejecuta cuando se pulsa un elemento de deslizar ICommand rápidamente.
• CommandParameter, de tipo object, que es el parámetro que se pasa a Command.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

La clase también define un evento que se desencadena cuando se pulsa SwipeItemViewInvoked el elemento, después de ejecutar Command .

En el ejemplo siguiente se SwipeItemView muestra un objeto en la colección de un LeftItemsSwipeView :

<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>

En este ejemplo, SwipeItemView consta de que contiene y StackLayoutEntryLabel . Después de que el usuario escriba la entrada en , se puede pulsar el resto del , que Entry ejecuta el definido por la propiedad SwipeViewItemICommandSwipeItemView.Command .

Abrir y cerrar un SwipeView mediante programación

SwipeView incluye Open los Close métodos y , que abren y cierran mediante programación los elementos de deslizar rápidamente, respectivamente. De forma predeterminada, estos métodos animarán SwipeView cuando se abra o se cierre.

El Open método requiere un argumento para especificar la dirección desde la que se abrirá OpenSwipeItemSwipeView . La OpenSwipeItem enumeración tiene cuatro miembros:

• LeftItems, que indica que se abrirá desde la izquierda para mostrar los SwipeView elementos de deslizar rápidamente en la LeftItems colección.
• TopItems, que indica que se abrirá desde la parte superior para mostrar los SwipeView elementos de deslizar rápidamente en la TopItems colección.
• RightItems, que indica que se abrirá desde la derecha para mostrar los SwipeView elementos de deslizar rápidamente en la RightItems colección.
• BottomItems, que indica que se abrirá desde la parte inferior para mostrar los SwipeView elementos de deslizar rápidamente en la BottomItems colección.

Además, el método también acepta un argumento opcional que define si Openbool se SwipeView animará cuando se abra.

Dado un SwipeView denominado , en el ejemplo siguiente se muestra cómo abrir para mostrar los elementos de deslizar rápidamente swipeView en la SwipeViewLeftItems colección:

swipeView.Open(OpenSwipeItem.LeftItems);

A swipeView continuación, se puede cerrar con el Close método :

swipeView.Close();

Deshabilitar swipeview

Una aplicación puede entrar en un estado en el que deslizar un elemento de contenido no es una operación válida. En tales casos, se puede deshabilitar el objeto SwipeView estableciendo su propiedad IsEnabled en false. Esto impedirá que los usuarios puedan deslizar el contenido para mostrar los elementos de deslizar rápidamente.

Además, al definir la propiedad de o , se puede especificar el delegado de para habilitar Command o deshabilitar el elemento de deslizar SwipeItemSwipeItemViewCanExecuteICommand rápidamente.

Vínculos relacionados

• SwipeView (ejemplo)
• Xamarin.Forms MenuItem