Xamarin.Forms SwipeView
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:
SwipeView
define as propriedades a seguir:
LeftItems
, do tipoSwipeItems
, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado o dedo do lado esquerdo.RightItems
, do tipoSwipeItems
, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado o dedo do lado direito.TopItems
, do tipoSwipeItems
, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado de cima para baixo.BottomItems
, do tipoSwipeItems
, que representa os itens de passar o dedo que podem ser invocados quando o controle é passado de baixo para cima.Threshold
, do tipodouble
, 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 objetos BindableProperty
, o que significa que podem ser alvos de associações de dados e ser estilizada.
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
é acionado quando um gesto de percorrer é iniciado. OSwipeStartedEventArgs
objeto que acompanha esse evento tem umaSwipeDirection
propriedade, do tipoSwipeDirection
.SwipeChanging
é disparado à medida que o gesto de percorrer se move. OSwipeChangingEventArgs
objeto que acompanha esse evento tem umaSwipeDirection
propriedade, do tipoSwipeDirection
, e umaOffset
propriedade do tipodouble
.SwipeEnded
é acionado quando um gesto de passar o dedo termina. OSwipeEndedEventArgs
objeto que acompanha esse evento tem umaSwipeDirection
propriedade, do tipoSwipeDirection
, e umaIsOpen
propriedade do tipobool
.
Além disso, SwipeView
inclui Open
e Close
métodos, que programaticamente abrem e fecham os itens de passar o dedo, respectivamente.
Observação
SwipeView
tem uma plataforma específica para iOS e Android, que controla a transição usada ao abrir um SwipeView
arquivo . Para obter mais informações, consulte Modo de transição de deslizamento do dedo no iOS e Modo de transição do gesto de percorrer 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
, RightItems
, TopItems
ou 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 = 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
:
Os itens de passar o SwipeView
dedo são usados para executar ações no conteúdo e são revelados quando o controle é deslizado do lado esquerdo:
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 LeftItems
coleções , RightItems
, TopItems
e BottomItems
são todas do tipo SwipeItems
. A classe SwipeItems
define as seguintes propriedades:
Mode
, do tipoSwipeMode
, 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 tipoSwipeBehaviorOnInvoked
, que indica como umSwipeView
se comporta após um 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 objetos BindableProperty
, o que significa que podem ser alvos de associações de dados e ser estilizada.
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 tipoColor
, 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 é acionado quando o item de passar o dedo é executado.
Importante
A MenuItem
classe define várias propriedades, incluindo Command
, CommandParameter
, IconImageSource
e 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 é chamado. Para obter mais informações, consulte Xamarin.Forms MenuItem.
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 Text
propriedades , IconImageSource
e BackgroundColor
:
Quando um SwipeItem
é tocado, seu Invoked
evento é acionado e é manipulado por seu 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 SwipeView
arquivo . Portanto, você não pode ter duas LeftItems
definições em um SwipeView
arquivo .
Os SwipeStarted
eventos , SwipeChanging
e 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 SwipeView
deve ser passado para 200 unidades independentes de dispositivo antes que o SwipeItem
seja totalmente revelado.
Observação
Atualmente, a propriedade é implementada Threshold
apenas em iOS e Android.
Modo de passar o dedo
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 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 propriedadeSwipeItems.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 SwipeView
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 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 SwipeView
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 é chamado. Essa propriedade deve ser definida como um dos SwipeBehaviorOnInvoked
membros da enumeração:
Auto
indica que, no modo de revelação, oSwipeView
fecha depois que um item de passar o dedo é chamado e, no modo de execução, permaneceSwipeView
aberto depois que um item de passar o dedo é chamado. Este é o valor padrão da propriedadeSwipeItems.SwipeBehaviorOnInvoked
.Close
indica que o fecha depois que um item de passar oSwipeView
dedo é chamado.RemainOpen
indica que oSwipeView
permanece aberto depois que um item de passar o dedo é chamado.
O exemplo a seguir mostra um SwipeView
configurado para permanecer aberto depois que um 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 tipoICommand
, que é executado quando um item de passar o dedo é tocado.CommandParameter
, do tipoobject
, que é o parâmetro passado paraCommand
.
Essas propriedades são apoiadas por objetos BindableProperty
, o que significa que podem ser alvos de associações de dados e ser estilizada.
A SwipeItemView
classe também define um Invoked
evento que é disparado quando o item é tocado, depois que o Command
é executado.
O exemplo a LeftItems
seguir mostra um SwipeItemView
objeto na 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
contendo um Entry
e um Label
. Depois que o usuário insere a entrada no Entry
, o restante do pode ser tocado, o SwipeViewItem
que executa o ICommand
definido pela SwipeItemView.Command
propriedade.
Abrir e fechar um SwipeView programaticamente
SwipeView
inclui Open
e Close
métodos, que programaticamente abrem e 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 oSwipeView
será aberto a partir da esquerda, para revelar os itens de deslizamento naLeftItems
coleção.TopItems
, que indica que oSwipeView
será aberto a partir do topo, para revelar os itens de deslizamento naTopItems
coleção.RightItems
, que indica que oSwipeView
será aberto a partir da direita, para revelar os itens de deslizamento naRightItems
coleção.BottomItems
, que indica que oSwipeView
será aberto a partir da parte inferior, para revelar os itens de deslizamento naBottomItems
coleção.
Além disso, o Open
método também aceita um argumento opcional bool
que define se o será animado SwipeView
quando for aberto.
Dado um SwipeView
nome swipeView
, o exemplo a seguir mostra como abrir um 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 SwipeItemView
, o CanExecute
delegado do pode ser especificado para habilitar ou desabilitar o item de ICommand
passar o dedo.