ImageTouchBehavior

ImageTouchBehavior 通过提供基于触摸、鼠标单击和悬停事件自定义 Image 元素的功能来扩展 TouchBehavior。 通过 ImageTouchBehavior 实现，可以自定义附加到 Image 元素的 Source 属性。

注意

有关 ImageTouchBehavior 中的进一步自定义的选项，请参阅此 Behavior 扩展的 TouchBehavior 实现。

重要

.NET MAUI 社区工具包行为不会设置行为的 BindingContext，因为可以通过样式共享行为，并将其应用于多个控件。 有关详细信息，请参阅 .NET MAUI 行为特性

语法

以下示例演示如何将 ImageTouchBehavior 添加到 Image，并在用户通过基于触摸或基于鼠标的交互与图像交互时在 DefaultImageSource、HoveredImageSource 和 PressedImageSource 之间切换。

XAML

包括 XAML 命名空间

若要在 XAML 中使用工具包，需要将以下 xmlns 添加到页面或视图中：

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

因此，以下内容：

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

将被修改为包括 xmlns，如下所示：

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

使用 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 可在 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# 标记

我们的 CommunityToolkit.Maui.Markup 包提供了一种更简洁的方式来在 C# 中使用此 Behavior。

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"
            });
    }
}

性能

财产	类型	描述
DefaultImageAspect	Aspect	获取或设置默认交互模式下的 Aspect，这实质上不是交互。
默认图片来源	ImageSource	获取或设置默认交互模式下的 ImageSource，这实质上不是交互。
HoveredImageAspect	Aspect	当鼠标悬停在此 Behavior 附加的 VisualElement 时，获取或设置 Aspect。
HoveredImageSource	ImageSource	当鼠标悬停在此 Behavior 附加的 VisualElement 时，获取或设置 ImageSource。
PressedImageAspect	Aspect	当用户按下触摸或鼠标按下此 Behavior 附加的 VisualElement 时，获取或设置 Aspect。
PressedImageSource	ImageSource	当用户按下触摸或鼠标按下此 Behavior 附加的 VisualElement 时，获取或设置 ImageSource。
ShouldSetImageOnAnimationEnd	bool	获取或设置一个值，该值指示在动画结束时是否应设置图像。

有关可用属性的其余部分，请参阅 TouchBehavior 属性 部分。

例子

可以在 .NET MAUI 社区工具包示例应用程序中找到此行为的示例。

API

可以在 .NET MAUI 社区工具包 GitHub 存储库中找到 ImageTouchBehavior 的源代码。