ImageTouchBehavior

ImageTouchBehavior rozšiřuje TouchBehavior tím, že poskytuje možnost přizpůsobit Image prvky na základě událostí dotykového ovládání, kliknutí myší a najetí myší. Implementace ImageTouchBehavior umožňuje přizpůsobit vlastnost Source prvku Image, ke kterému je připojen.

Poznámka

Další možnosti přizpůsobení v ImageTouchBehavior hledejte v implementaci TouchBehavior, kterou rozšiřuje tato Behavior.

Důležitý

Chování v sadě nástrojů .NET MAUI Community Toolkit nenastavuje vlastnost BindingContext, protože chování mohou být sdílena a použita u více ovládacích prvků prostřednictvím stylů. Další informace najdete v tématu chování rozhraní .NET MAUI

Syntax

Následující příklady ukazují, jak přidat ImageTouchBehavior do Image a přepínat mezi DefaultImageSource, HoveredImageSource a PressedImageSource, když uživatelé interagují s obrázkem pomocí dotykové interakce nebo interakce na základě myši.

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následujícím způsobem:

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

Použití 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 lze použít v jazyce 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;
    }
}

Značkování C#

Náš balíček CommunityToolkit.Maui.Markup poskytuje mnohem stručnější způsob použití tohoto Behavior v jazyce 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"
            });
    }
}

Vlastnosti

Vlastnost	Typ	Popis
VýchozíPoměrObrázku	Aspect	Získá nebo nastaví Aspect ve výchozím režimu interakce – což je v podstatě žádná interakce.
VýchozíZdrojObrazu	ImageSource	Získá nebo nastaví ImageSource ve výchozím režimu interakce – což je v podstatě žádná interakce.
HoveredImageAspect	Aspect	Získá nebo nastaví Aspect, když myš přejíždí přes VisualElement, ke kterému je tento Behavior připojen.
HoveredImageSource	ImageSource	Získá nebo nastaví ImageSource, když myš najede na VisualElement, ke kterému je tento Behavior připojen.
PressedImageAspect	Aspect	Získá nebo nastaví Aspect, když uživatel stiskne prstem nebo myší na VisualElement, ke kterému je tento Behavior připojen.
PressedImageSource	ImageSource	Získá nebo nastaví ImageSource, když uživatel prstem nebo myší stiskne na VisualElement, ke kterému je tento Behavior připojen.
NastavitObrazNaKonciAnimace	bool	Získá nebo nastaví hodnotu určující, zda má být obrázek nastaven při ukončení animace.

Zbývající dostupné vlastnosti najdete v části Vlastnosti TouchBehavior.

Příklady

Příklad tohoto chování v akci najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

Rozhraní API

Zdrojový kód pro ImageTouchBehavior najdete v úložišti .NET MAUI Community Toolkit na GitHubu.