ImageTouchBehavior

Artigo
01/04/2025

O ImageTouchBehavior estende o TouchBehavior, fornecendo a capacidade de personalizar Image elementos com base em toque, clique do mouse e eventos de passagem do cursor. A implementação ImageTouchBehavior torna possível personalizar a propriedade Source do elemento Image ao qual ele está anexado.

Observação

Para obter mais opções de personalização no ImageTouchBehavior, consulte a implementação TouchBehavior que este Behavior estende.

Importante

Os Comportamentos do Kit de Ferramentas da Comunidade .NET MAUI não definem o BindingContext de um comportamento, porque os comportamentos podem ser compartilhados e aplicados a vários controles por meio de estilos. Para obter mais informações, consulte Comportamentos do .NET MAUI

Sintaxe

Os exemplos a seguir mostram como adicionar o ImageTouchBehavior a um Image e alternar entre o DefaultImageSource, HoveredImageSource e o PressedImageSource quando os usuários interagem com a imagem por meio de interações baseadas em toque ou mouse.

XAML

Incluindo o namespace XAML

Para usar o kit de ferramentas em XAML, a seguinte xmlns precisa ser adicionada à sua página ou vista.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Por conseguinte, o seguinte:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Seria modificado para incluir o xmlns da seguinte forma:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Usando o ImageTouchBehavior

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.TouchBehaviorPage"
    x:Name="Page">

    <Image HeightRequest="100" WidthRequest="100">
        <Image.Behaviors>
            <toolkit:ImageTouchBehavior
                Command="{Binding Source={x:Reference Page}, Path=BindingContext.IncreaseTouchCountCommand, x:DataType=ContentPage}"
                DefaultImageSource="button.png"
                HoveredImageSource="button_hovered.png"
                PressedImageSource="button_pressed.png" />
        </Image.Behaviors>
    </Image>

</ContentPage>

C#

O ImageTouchBehavior pode ser usado da seguinte forma em C#:

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        InitializeComponent();

        var image = new Image
        {
            HeightRequest = 100,
            WidthRequest = 100
        };

        var imageTouchBehavior = new ImageTouchBehavior
        {
            Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
            DefaultImageSource = "button.png",
            HoveredImageSource = "button_hovered.png",
            PressedImageSource = "button_pressed.png"
        };

        image.Behaviors.Add(imageTouchBehavior);

        Content = label;
    }
}

Marcação C#

Nosso pacote CommunityToolkit.Maui.Markup fornece uma maneira muito mais concisa de usar esse Behavior em C#.

using CommunityToolkit.Maui.Markup;

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        Content = new Image()
            .Size(100, 100)
            .Behaviors(new ImageTouchBehavior
            {
                Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
                DefaultImageSource = "button.png",
                HoveredImageSource = "button_hovered.png",
                PressedImageSource = "button_pressed.png"
            });
    }
}

Propriedades

Propriedade	Tipo	Descrição
DefaultImageAspect	`Aspect`	Obtém ou define o `Aspect` no modo padrão de interação - que é essencialmente nenhuma interação.
FonteDeImagemPadrão	`ImageSource`	Obtém ou define o `ImageSource` no modo padrão de interação - que é essencialmente nenhuma interação.
HoveredImageAspect	`Aspect`	Obtém ou define o `Aspect` quando o rato passa sobre o `VisualElement` ao qual o `Behavior` está ligado.
HoveredImageSource	`ImageSource`	Obtém ou define o `ImageSource` quando o rato está a pairar sobre o `VisualElement` ao qual este `Behavior` está ligado.
PressedImageAspect	`Aspect`	Obtém ou define o `Aspect` quando o utilizador pressionou com o toque ou o rato no `VisualElement` ao qual este `Behavior` está anexado.
PressedImageSource	`ImageSource`	Obtém ou define o `ImageSource` quando o usuário pressionou com o toque ou o mouse na `VisualElement` à qual este `Behavior` está conectado.
DeveDefinirImagemNoFimDaAnimação	`bool`	Obtém ou define um valor que indica se a imagem deve ser definida quando a animação termina.

Para obter as restantes propriedades disponíveis, consulte a seção propriedades TouchBehavior.

Exemplos

Você pode encontrar um exemplo desse comportamento em ação no .NET MAUI Community Toolkit Sample Application.

API

Você pode encontrar o código-fonte para ImageTouchBehavior no repositório GitHub do .NET MAUI Community Toolkit.

Partilhar via