ImageTouchBehavior

Article
01/06/2025

Le ImageTouchBehavior étend le TouchBehavior en offrant la possibilité de personnaliser des éléments Image en fonction des événements tactiles, des clics de souris et des survols. L’implémentation ImageTouchBehavior permet de personnaliser la propriété Source de l’élément Image auquel il est attaché.

Remarque

Pour obtenir d’autres options de personnalisation dans le ImageTouchBehavior, reportez-vous à l’implémentation TouchBehavior que cette Behavior étend.

Important

Les comportements de .NET MAUI Community Toolkit ne définissent pas la BindingContext d’un comportement, car les comportements peuvent être partagés et appliqués à plusieurs contrôles par le biais de styles. Pour obtenir plus d’informations, voir Comportements MAUI .NET

Syntaxe

Les exemples suivants montrent comment ajouter le ImageTouchBehavior à un Image et basculer entre le DefaultImageSource, HoveredImageSource et le PressedImageSource lorsque les utilisateurs interagissent avec l’image en fonction des interactions tactiles ou basées sur la souris.

XAML

Y compris l’espace de noms XAML

Pour utiliser le toolkit en XAML, le xmlns suivant doit être ajouté à votre page ou vue :

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

Il en résulte ce qui suit :

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

Serait modifié pour inclure la xmlns comme suit :

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

Utilisation du 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#

Les ImageTouchBehavior peuvent être utilisées comme suit 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;
    }
}

Balisage C#

Notre package CommunityToolkit.Maui.Markup offre un moyen beaucoup plus concis d’utiliser cette 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"
            });
    }
}

Propriétés

Propriété	Type	Description
DefaultImageAspect	`Aspect`	Obtient ou définit l'`Aspect` en mode d’interaction par défaut, qui est essentiellement sans aucune interaction.
DefaultImageSource	`ImageSource`	Obtient ou définit l'`ImageSource` en mode d’interaction par défaut, ce qui revient essentiellement à aucune interaction.
HoveredImageAspect	`Aspect`	Obtient ou définit le `Aspect` lorsque la souris survole le `VisualElement` auquel ce `Behavior` est attaché.
HoveredImageSource	`ImageSource`	Obtient ou définit l'`ImageSource` lorsque la souris survole le `VisualElement` auquel est attaché ce `Behavior`.
PressedImageAspect	`Aspect`	Obtient ou définit le `Aspect` lorsque l’utilisateur a appuyé de manière tactile ou avec la souris sur le `VisualElement` auquel ce `Behavior` est attaché.
PressedImageSource	`ImageSource`	Obtient ou définit le `ImageSource` lorsque l’utilisateur a appuyé de manière tactile ou avec la souris sur le `VisualElement` auquel ce `Behavior` est attaché.
ShouldSetImageOnAnimationEnd	`bool`	Obtient ou définit une valeur indiquant si l’image doit être définie lorsque l’animation se termine.

Pour le reste des propriétés disponibles, veuillez vous référer à la section Propriétés de TouchBehavior.

Exemples

Vous trouverez un exemple de ce comportement en action dans l’exemple d’application .NET MAUI Community Toolkit.

API

Vous trouverez le code source de ImageTouchBehavior sur le dépôt GitHub du .NET MAUI Community Toolkit .

Partager via