Partilhar via

Passar o dedo

O comando Passar o dedo é um acelerador para menus de contexto que permite que os usuários acessem facilmente ações comuns do menu por toque, sem a necessidade de alterar estados dentro do aplicativo.

Ativar e Revelar tema claro

Será este o controlo correto?

O comando Passar o dedo economiza espaço. É útil em situações em que o usuário pode executar a mesma operação em vários itens em rápida sucessão. E fornece "ações rápidas" em itens que não precisam de um pop-up completo ou alteração de estado dentro da página.

Você deve usar o comando passar o dedo quando tiver um grupo potencialmente grande de itens e cada item tiver de 1 a 3 ações que um usuário pode querer executar regularmente. Essas ações podem incluir, mas não estão limitadas a:

  • Apagar
  • Marcação ou arquivo
  • Guardar ou transferir
  • Resposta

Como funciona o Swipe?

O comando de passar o dedo UWP tem dois modos: Revelar e Executar. Ele também suporta quatro direções de deslizamento diferentes: para cima, para baixo, para a esquerda e para a direita.

Modo de revelação

No modo de revelação, o usuário passa o dedo em um item para abrir um menu de um ou mais comandos e deve tocar explicitamente em um comando para executá-lo. Quando o utilizador passa o dedo e liberta um item, o menu permanece aberto até que um comando seja selecionado ou o menu seja fechado novamente ao deslizar para trás, tocar fora ou rolar o item aberto para fora do ecrã.

Passar o dedo para revelar

O modo de revelação é um modo de deslizar mais seguro e versátil, podendo ser usado para a maioria dos tipos de ações de menu, incluindo ações potencialmente destrutivas, como eliminação.

Quando o usuário seleciona uma das opções de menu mostradas no estado aberto e de repouso da revelação, o comando para esse item é invocado e o controle de passagem do dedo é fechado.

Modo de execução

No modo Executar, o usuário passa o dedo em um item aberto para revelar e executar um único comando com esse gesto de passar o dedo. Se o utilizador soltar o item que está a ser deslizado antes de ultrapassar um limite, o menu fecha e o comando não é executado. Se o usuário passar o dedo além do limite e, em seguida, liberar o item, o comando será executado imediatamente.

Passar o dedo para executar

Se o usuário não soltar o dedo depois que o limite for atingido e fechar o item de passagem do dedo novamente, o comando não será executado e nenhuma ação será executada no item.

O modo de execução fornece mais feedback visual através das cores e da orientação das etiquetas enquanto um item está a ser deslizado.

Executar é melhor usado quando a ação que o usuário está executando é mais comum.

Ele também pode ser usado para ações mais destrutivas, como excluir um item. No entanto, tenha em mente que Executar requer apenas uma ação de deslizar em uma direção, ao contrário de Revelar, que exige que o usuário clique explicitamente em um botão.

Deslizar direções

Passar o dedo funciona em todas as direções cardeais: para cima, para baixo, para a esquerda e para a direita. Cada direção de passagem do dedo pode conter seus próprios itens ou conteúdo, mas apenas uma instância de uma direção pode ser definida de cada vez em um único elemento que pode passar o dedo.

Por exemplo, você não pode ter duas definições LeftItems no mesmo SwipeControl.

O que fazer e o que não fazer

  • Não use passar o dedo em FlipViews ou Hubs. A combinação pode ser confusa para o usuário devido a direções de deslizamento conflitantes.
  • Não combine o gesto de deslizar horizontalmente com a navegação horizontal ou o gesto de deslizar verticalmente com a navegação vertical.
  • Certifique-se de que o que o utilizador está a deslizar é a mesma ação e que seja consistente em todos os itens relacionados que podem ser deslizados.
  • Use o gesto de deslizar para as principais ações que um utilizador quererá executar.
  • Use passar o dedo em itens em que a mesma ação é repetida muitas vezes.
  • Percorra horizontalmente em itens mais largos e verticalmente em itens mais altos.
  • Use rótulos de texto curtos e concisos.

Criar um comando de passar o dedo

Abra o aplicativo WinUI 3 Gallery e veja SwipeControl em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Os comandos de passar o dedo têm dois componentes que você precisa definir:

  • O SwipeControl, que circunda o seu conteúdo. Em uma coleção, como um ListView, isso fica dentro de seu DataTemplate.
  • Os itens de menu de passar o dedo, que é um ou mais objetos SwipeItem colocados nos contêineres direcionais do controle de passar o dedo: LeftItems, RightItems, TopItems ou BottomItems

O conteúdo de deslizar pode ser colocado diretamente na página ou definido na seção Recursos da sua página ou aplicação.

Aqui está um exemplo simples de um SwipeControl enrolado em torno de algum texto. Ele mostra a hierarquia de elementos XAML necessários para criar um comando de passagem do dedo.

<SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <SwipeControl.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Pin">
                <SwipeItem.IconSource>
                    <SymbolIconSource Symbol="Pin"/>
                </SwipeItem.IconSource>
            </SwipeItem>
        </SwipeItems>
    </SwipeControl.LeftItems>

     <!-- Swipeable content -->
    <Border Width="180" Height="44" BorderBrush="Black" BorderThickness="2">
        <TextBlock Text="Swipe to Pin" Margin="4,8,0,0"/>
    </Border>
</SwipeControl>

Agora vamos dar uma olhada em um exemplo mais completo de como você normalmente usaria comandos de passar o dedo em uma lista. Neste exemplo, você configurará um comando delete que usa o modo Execute e um menu de outros comandos que usa o modo Reveal . Ambos os conjuntos de comandos são definidos na seção Recursos da página. Você aplicará os comandos de passar o dedo aos itens em um ListView.

Primeiro, crie os itens de passagem do dedo, que representam os comandos, como recursos no nível da página. SwipeItem usa um IconSource como seu ícone. Crie os ícones como recursos também.

<Page.Resources>
    <SymbolIconSource x:Key="ReplyIcon" Symbol="MailReply"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
    <SymbolIconSource x:Key="PinIcon" Symbol="Pin"/>

    <SwipeItems x:Key="RevealOptions" Mode="Reveal">
        <SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"/>
        <SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="ExecuteDelete" Mode="Execute">
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
                   Background="Red"/>
    </SwipeItems>
</Page.Resources>

Lembre-se de manter os itens de menu no seu conteúdo deslizável em rótulos curtos e concisos. Essas ações devem ser as principais que um usuário pode querer executar várias vezes durante um curto período.

Configurar um comando de passagem do dedo para funcionar em uma coleção ou ListView é exatamente o mesmo que definir um único comando de passagem do dedo (mostrado anteriormente), exceto que você define seu SwipeControl em um DataTemplate para que ele seja aplicado a cada item da coleção.

Aqui está um ListView com o SwipeControl aplicado no DataTemplate do seu item. As propriedades LeftItems e RightItems fazem referência aos itens de passagem do dedo que você criou como recursos.

<ListView x:Name="sampleList" Width="300">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <SwipeControl x:Name="ListViewSwipeContainer"
                          LeftItems="{StaticResource RevealOptions}"
                          RightItems="{StaticResource ExecuteDelete}"
                          Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Manipular um comando de passagem do dedo invocado

Para agir em um comando de passagem do dedo, manipule seu evento Invoked . (Para saber mais sobre como um usuário pode invocar um comando, revise a seção Como funciona o gesto de passar o dedo? anteriormente neste artigo.) Normalmente, um comando de passar o dedo está em um cenário ListView ou semelhante a uma lista. Nesse caso, quando um comando é invocado, é necessário executar uma ação nesse item deslizado.

Veja como manipular o evento Invoked no item de passagem do dedo de exclusão criado anteriormente.

<SwipeItems x:Key="ExecuteDelete" Mode="Execute">
    <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
               Background="Red" Invoked="Delete_Invoked"/>
</SwipeItems>

O item de dados é o DataContext do SwipeControl. No seu código, pode aceder ao item que foi deslizado obtendo a propriedade SwipeControl.DataContext a partir dos argumentos do evento, conforme mostrado aqui.

 private void Delete_Invoked(SwipeItem sender, SwipeItemInvokedEventArgs args)
 {
     sampleList.Items.Remove(args.SwipeControl.DataContext);
 }

Observação

Aqui, os itens foram adicionados diretamente à coleção ListView.Items para simplificar, portanto, o item também é excluído da mesma maneira. Se, em vez disso, você definir ListView.ItemsSource como uma coleção, que é mais típica, será necessário excluir o item da coleção de origem.

Nesse caso específico, você removeu o item da lista, portanto, o estado visual final do item deslizado não é importante. No entanto, em situações em que você simplesmente deseja executar uma ação e, em seguida, fazer com que o gesto de deslizamento se recolha novamente, você pode definir a propriedade BehaviorOnInvoked para um dos valores de enum SwipeBehaviorOnInvoked.

  • Automático
    • No modo de execução, o item de passagem do dedo aberto permanecerá aberto quando invocado.
    • No modo de revelação, o item de passagem do dedo aberto será recolhido quando invocado.
  • Fechar
    • Quando o item é invocado, o controlo de deslize retrai-se sempre e volta ao normal, independentemente do modo.
  • PermanecerAberto
    • Quando o item é invocado, o controle de passagem do dedo sempre permanecerá aberto, independentemente do modo.

Aqui, um item de passagem do dedo para resposta é definido para fechar após ser invocado.

<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
           Invoked="Reply_Invoked"
           BehaviorOnInvoked = "Close"/>

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

O SwipeControl para aplicativos UWP está incluído como parte do WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem nos namespaces Windows.UI.Xaml.Controls (UWP) e Microsoft.UI.Xaml.Controls (WinUI).

Recomendamos usar a WinUI 2 mais recente para obter os estilos, modelos e recursos mais atuais para todos os controles.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:SwipeControl />
<muxc:SwipeItem />
  • Last updated on