Xamarin.Forms SwipeView

  • Artigo

Baixar exemplo Baixar o exemplo

O SwipeView é um controle de contêiner que envolve um item de conteúdo e fornece itens de menu de contexto que são revelados por um gesto de passar o dedo:

Captura de tela dos itens swipeView em um CollectionView, em itens de passar o dedo para iOS e Android

SwipeView define as propriedades a seguir:

  • LeftItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é apagado do lado esquerdo.
  • RightItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é apagado do lado direito.
  • TopItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é apagado de cima para baixo.
  • BottomItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é apagado de baixo para cima.
  • Threshold, do tipo double, que representa o número de unidades independentes de dispositivo que disparam um gesto de passar o dedo para revelar totalmente os itens de passar o dedo.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.

Além disso, o SwipeView herda a Content propriedade da ContentView classe . A Content propriedade é a propriedade de conteúdo da SwipeView classe e, portanto, não precisa ser definida explicitamente.

A SwipeView classe também define três eventos:

  • SwipeStarted é acionado quando um dedo é iniciado. O SwipeStartedEventArgs objeto que acompanha esse evento tem uma SwipeDirection propriedade do tipo SwipeDirection.
  • SwipeChanging é acionado à medida que o dedo se move. O SwipeChangingEventArgs objeto que acompanha esse evento tem uma SwipeDirection propriedade, do tipo SwipeDirectione uma Offset propriedade do tipo double.
  • SwipeEnded é acionado quando um deslize termina. O SwipeEndedEventArgs objeto que acompanha esse evento tem uma SwipeDirection propriedade, do tipo SwipeDirectione uma IsOpen propriedade do tipo bool.

Além disso, SwipeView inclui Open métodos e Close , que abrem e fecham programaticamente os itens de passar o dedo, respectivamente.

Observação

SwipeView tem uma plataforma específica no iOS e no Android, que controla a transição usada ao abrir um SwipeView. Para obter mais informações, consulte SwipeView Modo de Transição de Dedo No iOS e SwipeView Modo de Transição de Dedo No Android.

Criar um SwipeView

Um SwipeView deve definir o conteúdo que o SwipeView encapsula e os itens de passar o dedo que são revelados pelo gesto de passar o dedo. Os itens de passar o dedo são um ou mais SwipeItem objetos colocados em uma das quatro SwipeView coleções direcionais - LeftItems, RightItems, TopItemsou BottomItems.

O exemplo a seguir mostra como instanciar um SwipeView no 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>

Este é o código C# equivalente:

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

Neste exemplo, o SwipeView conteúdo é um Grid que contém um Label:

Captura de tela do conteúdo SwipeView, no conteúdo iOS e Android

Os itens de passar o SwipeView dedo são usados para executar ações no conteúdo e são revelados quando o controle é apagado do lado esquerdo:

Captura de tela dos itens swipeView, em itens de passar o dedo para iOS e Android

Por padrão, um item de passar o dedo é executado quando ele é tocado pelo usuário. No entanto, esse comportamento pode ser alterado. Para obter mais informações, consulte Modo de passar o dedo.

Depois que um item de passar o dedo for executado, os itens de passar o dedo ficarão ocultos e o SwipeView conteúdo será exibido novamente. No entanto, esse comportamento pode ser alterado. Para obter mais informações, consulte Comportamento de deslizar o dedo.

Observação

Os itens de deslizar o dedo e o conteúdo do dedo podem ser colocados embutidos ou definidos como recursos.

Passar o dedo em itens

As LeftItemscoleções , RightItems, TopItemse BottomItems são do tipo SwipeItems. A SwipeItems classe define as seguintes propriedades:

  • Mode, do tipo SwipeMode, que indica o efeito de uma interação de passar o dedo. Para obter mais informações sobre o modo de passar o dedo, consulte Modo de passar o dedo.
  • SwipeBehaviorOnInvoked, do tipo SwipeBehaviorOnInvoked, que indica como um SwipeView se comporta depois que um item de passar o dedo é invocado. Para obter mais informações sobre o comportamento de deslizar o dedo, consulte Comportamento de deslizar o dedo.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.

Cada item de passar o dedo é definido como um SwipeItem objeto colocado em uma das quatro SwipeItems coleções direcionais. A SwipeItem classe deriva da MenuItem classe e adiciona os seguintes membros:

  • Uma BackgroundColor propriedade, do tipo Color, que define a cor da tela de fundo do item de passar o dedo. Essa propriedade é apoiada por uma propriedade associável.
  • Um Invoked evento, que é acionado quando o item de passar o dedo é executado.

Importante

A MenuItem classe define várias propriedades, incluindo Command, CommandParameter, IconImageSourcee Text. Essas propriedades podem ser definidas em um SwipeItem objeto para definir sua aparência e definir um ICommand que é executado quando o item de passar o dedo é invocado. Para obter mais informações, consulte Xamarin.Forms MenuItem.

O exemplo a seguir mostra dois SwipeItem objetos na LeftItems coleção de um 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>

A aparência de cada SwipeItem um é definida por uma combinação das Textpropriedades , IconImageSourcee BackgroundColor :

Captura de tela dos itens swipeView, em itens de passar o dedo para iOS e Android

Quando um SwipeItem é tocado, seu Invoked evento é acionado e é manipulado por seu manipulador de eventos registrado. Além disso, o evento é acionado MenuItem.Clicked . Como alternativa, a Command propriedade pode ser definida como uma implementação ICommand que será executada quando o SwipeItem for invocado.

Observação

Quando a aparência de um SwipeItem é definida apenas usando as Text propriedades ou IconImageSource , o conteúdo é sempre centralizado.

Além de definir itens de passar o dedo como SwipeItem objetos, também é possível definir exibições personalizadas de item de passar o dedo. Para obter mais informações, consulte Itens de passar o dedo personalizados.

Passar o dedo na direção

SwipeView dá suporte a quatro direções de passar o dedo diferentes, com a direção do dedo sendo definida pela coleção direcional SwipeItems à qual os SwipeItem objetos são adicionados. Cada direção de passar o dedo pode manter seus próprios itens de passar o dedo. Por exemplo, o exemplo a seguir mostra um SwipeView cujos itens de passar o dedo dependem da direção do dedo:

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

Neste exemplo, o SwipeView conteúdo pode ser apagado para a direita ou para a esquerda. Passar o dedo para a direita mostrará o item Excluir dedo, enquanto passar o dedo para a esquerda mostrará os itens Favorito e Compartilhar deslizar o dedo.

Aviso

Somente uma instância de uma coleção direcional SwipeItems pode ser definida por vez em um SwipeView. Portanto, você não pode ter duas LeftItems definições em um SwipeView.

Os SwipeStartedeventos , SwipeChanginge SwipeEnded relatam a direção do dedo por meio da SwipeDirection propriedade nos argumentos de evento. Essa propriedade é do tipo SwipeDirection, que é uma enumeração composta por quatro membros:

  • Right indica que ocorreu um deslize para a direita.
  • Left indica que ocorreu um dedo esquerdo.
  • Up indica que ocorreu um dedo para cima.
  • Down indica que ocorreu um deslize para baixo.

Passar o dedo no limite

SwipeView inclui uma Threshold propriedade, do tipo double, que representa o número de unidades independentes do dispositivo que disparam um gesto de passar o dedo para revelar totalmente os itens de passar o dedo.

O exemplo a seguir mostra um SwipeView que define a Threshold propriedade :

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

Neste exemplo, o SwipeView deve ser apagado para 200 unidades independentes de dispositivo antes que o SwipeItem seja totalmente revelado.

Observação

Atualmente, a Threshold propriedade só é implementada no iOS e no Android.

Passar o dedo no modo

A SwipeItems classe tem uma Mode propriedade , que indica o efeito de uma interação de passar o dedo. Essa propriedade deve ser definida como um dos membros de SwipeMode enumeração:

  • Reveal indica que um dedo revela os itens de passar o dedo. Este é o valor padrão da propriedade SwipeItems.Mode.
  • Execute indica que um dedo executa os itens de passar o dedo.

No modo de revelação, o usuário desliza um SwipeView para abrir um menu que consiste em um ou mais itens de passar o dedo e deve tocar explicitamente em um item de passar o dedo para executá-lo. Depois que o item de passar o dedo for executado, os itens de passar o dedo serão fechados e o SwipeView conteúdo será exibido novamente. No modo de execução, o usuário desliza um SwipeView para abrir um menu que consiste em mais um item de passar o dedo, que são executados automaticamente. Após a execução, os itens de passar o dedo são fechados e o SwipeView conteúdo é exibido novamente.

O exemplo a seguir mostra um SwipeView configurado para usar o modo de execução:

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

Neste exemplo, o SwipeView conteúdo pode ser apagado para a direita para revelar o item de passar o dedo, que é executado imediatamente. Após a execução, o SwipeView conteúdo é exibido novamente.

Comportamento de passar o dedo

A SwipeItems classe tem uma SwipeBehaviorOnInvoked propriedade , que indica como um SwipeView se comporta depois que um item de passar o dedo é invocado. Essa propriedade deve ser definida como um dos membros de SwipeBehaviorOnInvoked enumeração:

  • Auto indica que, no modo de revelação, o SwipeView fecha depois que um item de passar o dedo é invocado e, no modo de execução, o SwipeView permanece aberto depois que um item de passar o dedo é invocado. Este é o valor padrão da propriedade SwipeItems.SwipeBehaviorOnInvoked.
  • Close indica que o fecha depois que um item de passar o SwipeView dedo é invocado.
  • RemainOpen indica que o SwipeView permanece aberto depois que um item de passar o dedo é invocado.

O exemplo a seguir mostra um SwipeView configurado para permanecer aberto depois que um item de passar o dedo é invocado:

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

Itens de passar o dedo personalizados

Os itens de passar o dedo personalizados podem ser definidos com o SwipeItemView tipo . A SwipeItemView classe deriva da ContentView classe e adiciona as seguintes propriedades:

  • Command, do tipo ICommand, que é executado quando um item de passar o dedo é tocado.
  • CommandParameter, do tipo object, que é o parâmetro passado para Command.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.

A SwipeItemView classe também define um Invoked evento que é acionado quando o item é tocado, depois que o Command é executado.

O exemplo a seguir mostra um SwipeItemView objeto na LeftItems coleção de um 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>

Neste exemplo, o SwipeItemView compreende um StackLayout que contém um Entry e um Label. Depois que o usuário insere a Entryentrada no , o restante do SwipeViewItem pode ser tocado, o que executa o ICommand definido pela SwipeItemView.Command propriedade .

Abrir e fechar um SwipeView programaticamente

SwipeView inclui Open métodos e Close , que abrem e fecham programaticamente os itens de passar o dedo, respectivamente. Por padrão, esses métodos animarão o SwipeView quando for aberto ou fechado.

O Open método requer um OpenSwipeItem argumento para especificar a direção da qual o SwipeView será aberto. A OpenSwipeItem enumeração tem quatro membros:

  • LeftItems, que indica que o SwipeView será aberto da esquerda, para revelar os itens de passar o dedo na LeftItems coleção.
  • TopItems, que indica que o SwipeView será aberto na parte superior, para revelar os itens de passar o dedo na TopItems coleção.
  • RightItems, que indica que o SwipeView será aberto à direita, para revelar os itens de passar o dedo na RightItems coleção.
  • BottomItems, que indica que o SwipeView será aberto na parte inferior, para revelar os itens de passar o dedo na BottomItems coleção.

Além disso, o Open método também aceita um argumento opcional bool que define se o SwipeView será animado quando for aberto.

Dado um SwipeView chamado swipeView, o exemplo a seguir mostra como abrir um SwipeView para revelar os itens de passar o dedo na LeftItems coleção:

swipeView.Open(OpenSwipeItem.LeftItems);

Em swipeView seguida, o pode ser fechado com o Close método :

swipeView.Close();

Observação

O Close método também aceita um argumento opcional bool que define se o SwipeView será animado quando for fechado.

Desabilitar um SwipeView

Um aplicativo pode inserir um estado em que passar o dedo de um item de conteúdo não é uma operação válida. Nesses casos, o SwipeView pode ser desabilitado definindo sua IsEnabled propriedade como false. Isso impedirá que os usuários possam deslizar o conteúdo para revelar itens de passar o dedo.

Além disso, ao definir a Command propriedade de um SwipeItem ou SwipeItemView, o CanExecute delegado do ICommand pode ser especificado para habilitar ou desabilitar o item de passar o dedo.