ImageTouchBehavior

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

Nota

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

Importante

Os Comportamentos do Kit de Ferramentas da Comunidade .NET MAUI não definem o BindingContext de um comportamento, pois os comportamentos podem ser compartilhados e aplicados a vários controles por meio de estilos. Para mais informações confira 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 interações baseadas em toque ou com o mouse.

XAML

Incluindo o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

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

Portanto, 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 maneira:

<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 maneira 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 em 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 não é nenhuma interação.
DefaultImageSource	ImageSource	Obtém ou define o ImageSource no modo padrão de interação , que essencialmente não é nenhuma interação.
HoveredImageAspect	Aspect	Obtém ou define o Aspect quando o mouse está sobre o VisualElement ao qual este Behavior está vinculado.
HoveredImageSource	ImageSource	Obtém ou define o ImageSource quando o mouse está sobre o VisualElement ao qual este Behavior está vinculado.
PressedImageAspect	Aspect	Obtém ou define o Aspect quando o usuário pressiona com toque ou o mouse no VisualElement ao qual este Behavior está vinculado.
PressedImageSource	ImageSource	Obtém ou define o ImageSource quando o usuário pressiona com toque ou o mouse no VisualElement ao qual este Behavior está vinculado.
ShouldSetImageOnAnimationEnd	bool	Obtém ou define um valor que indica se a imagem deve ser definida quando a animação termina.

Para o restante das propriedades disponíveis, consulte a seção propriedades do TouchBehavior.

Exemplos

Você pode encontrar um exemplo desse comportamento em ação no Aplicativo de exemplo do .NET MAUI Community Toolkit.

Interface de Programação de Aplicações (API)

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