ImageTouchBehavior

El ImageTouchBehavior amplía el TouchBehavior al proporcionar la capacidad de personalizar elementos Image basados en la entrada táctil, el clic del mouse y los eventos de desplazamiento. La implementación de ImageTouchBehavior permite personalizar la propiedad Source del elemento Image al que está asociado.

Nota

Para obtener más opciones de personalización en el ImageTouchBehavior consulte la implementación TouchBehavior que amplía este Behavior.

Importante

Los comportamientos de .NET MAUI Community Toolkit no establecen el BindingContext de un comportamiento, ya que los comportamientos se pueden compartir y aplicar a varios controles a través de estilos. Para obtener más información, consulte comportamientos de MAUI de .NET

Sintaxis

En los ejemplos siguientes se muestra cómo agregar el ImageTouchBehavior a un Image y alternar entre la DefaultImageSource, HoveredImageSource y la PressedImageSource cuando los usuarios interactúan con la imagen mediante interacciones basadas en el mouse o táctiles.

XAML

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

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

Por lo tanto, lo siguiente:

<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>

Se modificaría para incluir el xmlns de la siguiente manera:

<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>

Uso de 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#

El ImageTouchBehavior se puede usar de la siguiente manera en 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;
    }
}

Marcado de C#

Nuestro paquete de CommunityToolkit.Maui.Markup proporciona una manera mucho más concisa de usar este Behavior en 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"
            });
    }
}

Propiedades

Propiedad	Tipo	Descripción
DefaultImageAspect	Aspect	Obtiene o establece el Aspect en el modo de interacción predeterminado, que en esencia no implica ninguna interacción.
FuenteDeImagenPredeterminada	ImageSource	Obtiene o establece el ImageSource en el modo predeterminado de interacción, que esencialmente no implica interacción.
HoveredImageAspect	Aspect	Obtiene o establece el Aspect cuando el mouse mantiene el puntero sobre el VisualElement al que se adjunta este Behavior.
HoveredImageSource	ImageSource	Obtiene o establece el ImageSource cuando el mouse mantiene el puntero sobre el VisualElement al que se adjunta este Behavior.
PressedImageAspect	Aspect	Obtiene o establece el Aspect cuando el usuario ha presionado con la entrada táctil o el mouse en el VisualElement al que este Behavior está asociado.
PressedImageSource	ImageSource	Obtiene o establece el ImageSource cuando el usuario ha presionado con la entrada táctil o el mouse en el VisualElement al que este Behavior está asociado.
DeberíaEstablecerImagenAlFinalDeLaAnimación	bool	Obtiene o establece un valor que indica si la imagen debe establecerse cuando finaliza la animación.

Para el resto de las propiedades disponibles, consulte la sección Propiedades de TouchBehavior.

Ejemplos

Puede encontrar un ejemplo de este comportamiento en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de ImageTouchBehavior en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.