Share via

ImageTouchBehavior

  • 아티클

터치ImageTouchBehavior, 마우스 클릭 및 가리키기 이벤트에 따라 요소를 사용자 지정 Image 하는 기능을 제공하여 확장 TouchBehavior 합니다. 구현을 ImageTouchBehavior 사용하면 연결된 요소의 Image 속성을 사용자 지정할 Source 수 있습니다.

참고 항목

추가 사용자 지정 옵션은 ImageTouchBehavior 확장 Behavior 되는 구현을 TouchBehavior 참조하세요.

Important

동작을 공유하고 스타일을 통해 여러 컨트롤에 적용할 수 있으므로 .NET MAUI 커뮤니티 도구 키트 동작은 동작을 설정 BindingContext 하지 않습니다. 자세한 내용은 .NET MAUI 동작을 참조 하세요.

구문

다음 예제에서는 터치 기반 또는 마우스 기반 상호 작용을 통해 이미지와 상호 작용하는 경우 및 PressedImageSource 사용자 간에 DefaultImageSourceHoveredImageSource 토글을 추가하는 ImageTouchBehaviorImage 방법을 보여 줍니다.

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>

AnimationBehavior 사용

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

속성

속성 Type 설명
DefaultImageAspect Aspect 기본적으로 상호 작용이 Aspect 없는 상호 작용의 기본 모드를 가져오거나 설정합니다.
DefaultImageSource ImageSource 기본적으로 상호 작용이 ImageSource 없는 상호 작용의 기본 모드를 가져오거나 설정합니다.
HoveredImageAspect Aspect 마우스가 Aspect 연결된 마우스 위로 마우스를 가져가는 경우를 VisualElementBehavior 가져오거나 설정합니다.
HoveredImageSource ImageSource 마우스가 ImageSource 연결된 마우스 위로 마우스를 가져가는 경우를 VisualElementBehavior 가져오거나 설정합니다.
PressedImageAspect Aspect 사용자가 터치로 누른 경우 또는 연결된 마우스를 VisualElementBehavior 가져오거나 설정합니다Aspect.
PressedImageSource ImageSource 사용자가 터치로 누른 경우 또는 연결된 마우스를 VisualElementBehavior 가져오거나 설정합니다ImageSource.
ShouldSetImageOnAnimationEnd bool 애니메이션이 끝날 때 이미지를 설정해야 하는지 여부를 나타내는 값을 가져오거나 설정합니다.

사용 가능한 나머지 속성은 TouchBehavior 속성 섹션을 참조하세요.

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 이 동작의 예를 찾을 수 있습니다.

API

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 ImageTouchBehavior 소스 코드를 찾을 수 있습니다.