ImageTouchBehavior

ImageTouchBehavior utökar TouchBehavior genom att ge möjlighet att anpassa Image element baserat på pek-, musklick- och hovringshändelser. Den ImageTouchBehavior implementeringen gör det möjligt att anpassa egenskapen Source för det Image element som det är kopplat till.

Obs

För ytterligare anpassningsalternativ i ImageTouchBehavior, hänvisa till den TouchBehavior-implementering som denna Behavior utökar.

Viktig

.NET MAUI Community Toolkit Behaviors anger inte BindingContext för ett beteende, eftersom beteenden kan delas och tillämpas på flera kontroller via formatmallar. Mer information finns i .NET MAUI Behaviors

Syntax

I följande exempel visas hur du lägger till ImageTouchBehavior i en Image och växlar mellan DefaultImageSource, HoveredImageSource och PressedImageSource när användarna interagerar med bilden med antingen pekbaserade eller musbaserade interaktioner.

XAML

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

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

Använda 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 kan användas på följande sätt i 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;
    }
}

C#-markup

Vårt CommunityToolkit.Maui.Markup-paket ger ett mycket mer koncist sätt att använda den här Behavior i 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"
            });
    }
}

Egenskaper

Egenskap	Typ	Beskrivning
Standardbildförhållande	Aspect	Hämtar eller anger Aspect i standardläget för interaktion – vilket i princip inte är någon interaktion.
DefaultImageSource	ImageSource	Hämtar eller anger ImageSource i standardläget för interaktion – vilket i princip inte är någon interaktion.
SvävandeBildAspekt	Aspect	Hämtar eller ställer in Aspect när musen hovrar över VisualElement den här Behavior är kopplad till.
HoveredImageSource	ImageSource	Hämtar eller ställer in ImageSource när musen hovrar över VisualElement som den här Behavior är fäst vid.
PressedImageAspect	Aspect	Hämtar eller ställer in Aspect när användaren har tryckt ner med touch eller mus på VisualElement som den här Behavior är kopplad till.
PressedImageSource	ImageSource	Hämtar eller ställer in ImageSource när användaren har tryckt med touch eller musen på VisualElement som den här Behavior är ansluten till.
ShouldSetImageOnAnimationEnd	bool	Hämtar eller anger ett värde som anger om bilden ska anges när animeringen slutar.

Resten av de tillgängliga egenskaperna finns i avsnittet TouchBehavior-egenskaper.

Exempel

Du hittar ett exempel på det här beteendet i praktiken i .NET MAUI Community Toolkit Sample Application.

API

Du hittar källkoden för ImageTouchBehavior på github-lagringsplatsen .NET MAUI Community Toolkit.