Compartilhar via

SwipeView

  • Artigo

Browse sample. Navegue pelo exemplo

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) 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:

Screenshot of SwipeView swipe items in a CollectionView.

Importante

SwipeView é projetado para interfaces de toque. No Windows, ele só pode ser deslizado em uma interface de toque e não funcionará com um dispositivo de ponteiro, como um mouse.

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 é passado o dedo do lado esquerdo.
  • RightItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado o dedo do lado direito.
  • TopItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado de cima para baixo.
  • BottomItems, do tipo SwipeItems, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado de baixo para cima.
  • Threshold, do tipo double, que representa o número de unidades independentes de dispositivo que acionam 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 alvos de associações de dados e estilizadas.

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

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

  • SwipeStarted é gerado quando um gesto de percorrer é iniciado. O SwipeStartedEventArgs objeto que acompanha esse evento tem uma SwipeDirection propriedade, do tipo SwipeDirection.
  • SwipeChanging é levantado à medida que o gesto de percorrer se move. O SwipeChangingEventArgs objeto que acompanha esse evento tem uma propriedade, do tipo , e uma SwipeDirection Offset propriedade do tipo SwipeDirectiondouble.
  • SwipeEnded é gerado quando um gesto de percorrer termina. O SwipeEndedEventArgs objeto que acompanha esse evento tem uma propriedade, do tipo , e uma SwipeDirection IsOpen propriedade do tipo SwipeDirectionbool.

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

Observação

SwipeView tem uma plataforma específica para iOS e Android, que controla a transição usada ao abrir um SwipeViewarquivo . Para obter mais informações, consulte Modo de transição de deslizamento do SwipeView no iOS e Modo de transição do gesto de percorrer do SwipeView no Android.

Criar um SwipeView

A SwipeView deve definir o conteúdo que envolve SwipeView 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, , RightItemsTopItemsou BottomItems.

O exemplo a seguir mostra como instanciar um SwipeView em 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 = Colors.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

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

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

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Colors.LightGray
};
grid.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 que contém um Grid Label:

Screenshot of SwipeView content.

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

Screenshot of SwipeView swipe items.

Por padrão, um item de passar o dedo é executado quando é 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 é executado, os itens de passar o dedo ficam ocultos e o SwipeView conteúdo é exibido novamente. No entanto, esse comportamento pode ser alterado. Para obter mais informações, consulte Comportamento de passar o dedo.

Observação

O conteúdo do gesto de percorrer e os itens de passagem podem ser colocados em linha ou definidos como recursos.

Passar o dedo em itens

As LeftItemscoleções , RightItems, TopItemse BottomItems são todas 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 se comporta após um SwipeView item de passar o dedo ser chamado. Para obter mais informações sobre o comportamento de passar o dedo, consulte Comportamento de passar o dedo.

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

Cada item de passar o dedo é definido como um SwipeItem objeto que é 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 do plano de fundo do item de passar o dedo. Esta propriedade é apoiada por uma propriedade vinculável.
  • Um Invoked evento, que é gerado quando o item de passar o dedo é executado.

Importante

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

O exemplo a LeftItems seguir mostra dois SwipeItem objetos na 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 um SwipeItem é definida por uma combinação das Textpropriedades , IconImageSourcee BackgroundColor :

Screenshot of SwipeView swipe items.

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

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 itens de passar o dedo. Para obter mais informações, consulte Itens de passar o dedo personalizados.

Direção do gesto de percorrer

SwipeView Oferece suporte a quatro direções de deslizamento diferentes, com a direção do gesto de passar o dedo sendo definida pela coleção direcional SwipeItems à qual os SwipeItem objetos são adicionados. Cada direção de passar o dedo pode conter 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 gesto de passar:

<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 conteúdo pode ser deslizado para a SwipeView direita ou para a esquerda. Passar o dedo para a direita mostrará o item Excluir passar o dedo, enquanto deslizar para a esquerda mostrará os itens de deslizamento Favoritos e Compartilhar.

Aviso

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

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

  • Right indica que ocorreu um gesto de percorrer para a direita.
  • Left indica que ocorreu um gesto de percorrer para a esquerda.
  • Up indica que ocorreu um gesto de percorrer para cima.
  • Down indica que ocorreu um gesto de percorrer para baixo.

Limite de passar o dedo

SwipeView Inclui uma Threshold propriedade, 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.

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 deve ser passado para 200 unidades independentes de dispositivo antes que o SwipeView SwipeItem seja totalmente revelado.

Modo de passar o dedo

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

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

No modo de revelação, o usuário passa o dedo 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 SwipeView 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 passa o SwipeView dedo a 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 conteúdo pode ser deslizado para a direita para revelar o item de passar o SwipeView 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 se comporta depois que um SwipeView item de passar o dedo é chamado. Essa propriedade deve ser definida como um dos SwipeBehaviorOnInvoked membros da enumeração:

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

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

<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

Itens de passar o dedo personalizados podem ser definidos com o SwipeItemView tipo. A SwipeItemView classe deriva ContentView da 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 alvos de associações de dados e estilizadas.

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

O exemplo a seguir mostra um objeto na coleção de um SwipeItemView SwipeView:LeftItems

<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 contendo um e um Entry StackLayout Label. Depois que o usuário insere a entrada no Entry, o restante do pode ser tocado SwipeViewItem que executa o ICommand definido pela SwipeItemView.Command propriedade.

Abrir e fechar um SwipeView programaticamente

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

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

  • LeftItems, que indica que o SwipeView será aberto a partir da esquerda, para revelar os itens de deslizamento na LeftItems coleção.
  • TopItems, que indica que o SwipeView será aberto a partir do topo, para revelar os itens de deslizamento na TopItems coleção.
  • RightItems, que indica que o SwipeView será aberto a partir da direita, para revelar os itens de deslizamento na RightItems coleção.
  • BottomItems, que indica que o SwipeView será aberto a partir da parte inferior, para revelar os itens de deslizamento na BottomItems coleção.

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

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

swipeView.Open(OpenSwipeItem.LeftItems);

O swipeView pode então 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 será animado SwipeView quando for fechado.

Desativar um SwipeView

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

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