ImageTouchBehavior

ImageTouchBehavior rozszerza TouchBehavior, zapewniając możliwość dostosowywania elementów Image na podstawie zdarzeń dotyku, kliknięcia myszy i najechania kursorem. Implementacja ImageTouchBehavior umożliwia dostosowanie właściwości Source elementu Image, do którego jest dołączony.

Notatka

Aby uzyskać dalsze opcje dostosowywania w ImageTouchBehavior, zapoznaj się z implementacją TouchBehavior, którą rozszerza ta Behavior.

Ważny

Zachowania zestawu .NET MAUI Community Toolkit nie ustawiają BindingContext dla danego zachowania, ponieważ zachowania mogą być współdzielone i stosowane do wielu kontrolek za pomocą stylów. Aby uzyskać więcej informacji, zobacz .NET MAUI Behaviors

Składnia

W poniższych przykładach pokazano, jak dodać ImageTouchBehavior do Image i przełączać się między DefaultImageSource, HoveredImageSource a PressedImageSource, gdy użytkownicy wchodzą w interakcję z obrazem za pomocą interakcji na podstawie dotyku lub myszy.

XAML

Uwzględnianie przestrzeni nazw XAML

Aby móc używać zestawu narzędzi XAML, należy dodać następujące xmlns do swojej strony lub widoku:

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

Zatem następujące:

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

Zostanie zmodyfikowana w celu uwzględnienia xmlns w następujący sposób:

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

Korzystanie z elementu 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#

ImageTouchBehavior można użyć w następujący sposób w języku 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;
    }
}

Znaczniki języka C#

Nasz pakiet CommunityToolkit.Maui.Markup zapewnia znacznie bardziej zwięzły sposób korzystania z tego Behavior w języku 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"
            });
    }
}

Właściwości

Własność	Typ	Opis
DefaultImageAspect	Aspect	Pobiera lub ustawia Aspect w domyślnym trybie interakcji – który zasadniczo oznacza brak interakcji.
DefaultImageSource	ImageSource	Pobiera lub ustawia ImageSource w domyślnym trybie interakcji, który praktycznie nie powoduje żadnej interakcji.
HoveredImageAspect	Aspect	Pobiera lub ustawia Aspect, gdy kursor myszy znajduje się nad VisualElement, do którego przymocowany jest ten Behavior.
HoveredImageSource	ImageSource	Pobiera lub ustawia ImageSource, gdy wskaźnik myszy znajduje się nad VisualElement, do którego dołączono ten Behavior.
PressedImageAspect	Aspect	Pobiera lub ustawia Aspect, gdy użytkownik naciskał dotykiem lub myszą na VisualElement, do którego dołączony jest ten Behavior.
PressedImageSource	ImageSource	Pobiera lub ustawia ImageSource, gdy użytkownik naciska dotykiem lub myszą na VisualElement, do którego dołączony jest ten Behavior.
UstawObrazPoZakończeniuAnimacji	bool	Pobiera lub ustawia wartość wskazującą, czy obraz ma być ustawiony po zakończeniu animacji.

Pozostałe dostępne właściwości znajdują się w sekcji właściwości TouchBehavior.

Przykłady

Przykład tego zachowania można zobaczyć w aplikacji przykładowej .NET MAUI Community Toolkit Sample Application.

API

Kod źródłowy ImageTouchBehavior można znaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit platformy .NET.