TouchBehavior

아티클
04/05/2024

터치 TouchBehaviorBehavior , 마우스 클릭 및 가리키기 이벤트에 따라 상호 VisualElement 작용하는 기능을 제공하는 것입니다. 구현을 TouchBehavior 통해 , 및 Scale기타 많은 속성과 같이 BackgroundColorOpacityRotation 연결된 다양한 시각적 속성을 VisualElement 사용자 지정할 수 있습니다.

참고 항목

또한 도구 키트는 요소의 ImageTouchBehaviorImage 사용자 지정 기능을 제공하여 이를 TouchBehavior 확장하는 구현을 Source 제공합니다.

Important

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

구문

다음 예제에서는 부모 HorizontalStackLayout 에 추가하고 TouchBehavior 사용자가 자식을 터치하거나 클릭할 때 다음 애니메이션을 HorizontalStackLayout 수행하는 방법을 보여 줍니다.

250밀리초 동안 애니메이션
을 적용합니다. CubicInOutEasing
Opacity 0.6으로 변경
Scale 0.8로 변경

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

   <HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <HorizontalStackLayout.Behaviors>
            <toolkit:TouchBehavior
                DefaultAnimationDuration="250"
                DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                PressedOpacity="0.6"
                PressedScale="0.8" />
        </HorizontalStackLayout.Behaviors>

        <ContentView
            HeightRequest="100"
            WidthRequest="10"
            BackgroundColor="Gold" />
        <Label Text="The entire layout receives touches" VerticalOptions="Center" LineBreakMode="TailTruncation"/>
        <ContentView
            HeightRequest="100"
            WidthRequest="10"
            BackgroundColor="Gold" />
    </HorizontalStackLayout>

</ContentPage>

C#

TouchBehavior C#에서 다음과 같이 사용할 수 있습니다.

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        var firstContent = new ContentView
        {
            HeightRequest = 100,
            WidthRequest = 10,
            BackgroundColor = Colors.Gold
        };

        var label = new Label
        {
            Text = "The entire layout receives touches",
            VerticalOptions = LayoutOptions.Center,
            LineBreakMode = LineBreakMode.TailTruncation
        };

        var secondContent = new ContentView
        {
            HeightRequest = 100,
            WidthRequest = 10,
            BackgroundColor = Colors.Gold
        };

        var layout = new HorizontalStackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            Children = 
            {
                firstContent,
                label,
                secondContent
            }
        }

        var touchBehavior = new TouchBehavior
        {
            DefaultAnimationDuration = 250,
            DefaultAnimationEasing = Easing.CubicInOut,
            PressedOpacity = 0.6,
            PressedScale = 0.8
        };

        layout.Behaviors.Add(touchBehavior);

        Content = layout;
    }
}

C# 태그

이 CommunityToolkit.Maui.Markup 패키지는 C#에서 이를 Behavior 사용하는 훨씬 더 간결한 방법을 제공합니다.

using CommunityToolkit.Maui.Markup;

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        Content = new HorizontalStackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            Children = 
            {
                new ContentView()
                    .Size(10, 100)
                    .BackgroundColor(Colors.Gold),

                new Label
                {
                    LineBreakMode = LineBreakMode.TailTruncation
                }
                    .Text("The entire layout receives touches"
                    .CenterVertical(),

                new ContentView()
                    .Size(10, 100)
                    .BackgroundColor(Colors.Gold)
            }
        }
            .Behaviors(new TouchBehavior
            {
                DefaultAnimationDuration = 250,
                DefaultAnimationEasing = Easing.CubicInOut,
                PressedOpacity = 0.6,
                PressedScale = 0.8
            });
    }
}

추가 예제

가리키기 상호 작용 처리

요소 TouchBehavior 위로 마우스를 가져가는지 여부에 따라 연결된 VisualElement 속성을 사용자 지정하는 기능을 제공합니다.

다음 예제에서는 사용자가 레이아웃 및 자식 요소 위에 마우스 커서를 놓을 때 a에 연결 TouchBehaviorHorizontalStackLayout 하고 해당 커서를 변경하는 BackgroundColorScaleHorizontalStackLayout 방법을 보여 줍니다.

<HorizontalStackLayout
    Padding="20"
    Background="Black"
    HorizontalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            HoveredBackgroundColor="{StaticResource Gray900}"
            HoveredScale="1.2" />
    </HorizontalStackLayout.Behaviors>
</HorizontalStackLayout>

긴 누름 조작 처리

사용자가 TouchBehavior 오랜 시간 동안 누를 때 시나리오를 처리하는 기능을 제공합니다. 이 기간은 밀리초 단위로 정의 LongPressDuration 할 수 있습니다.

다음 예제에서는 백업 뷰 모델에 정의된 값을 바인딩 LongPressCommandIncreaseLongPressCountCommand 하고 750밀리초로 설정하는 LongPressDuration 방법을 TouchBehaviorHorizontalStackLayout보여 줍니다.

<HorizontalStackLayout
    Padding="20"
    Background="Black"
    HorizontalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            LongPressDuration="750"
            LongPressCommand="{Binding Source={x:Reference Page}, Path=BindingContext.IncreaseLongPressCountCommand}"/>
    </HorizontalStackLayout.Behaviors>
</HorizontalStackLayout>

속성

속성	Type	설명
명령	`ICommand`	사용자가 터치 제스처를 완료할 때 호출할 값을 가져오거나 설정합니다 `ICommand` .
CommandParameter	`object`	속성에 전달할 매개 변수를 `Command` 가져오거나 설정합니다.
CurrentHoverState	`HoverState`	동작의 현재 `HoverState` 를 가져오거나 설정합니다.
CurrentHoverStatus	`HoverStatus`	동작의 현재 `HoverStatus` 를 가져오거나 설정합니다.
CurrentInteractionStatus	`TouchInteractionStatus`	동작의 현재 `TouchInteractionStatus` 를 가져오거나 설정합니다.
CurrentTouchState	`TouchState`	동작의 현재 `TouchState` 를 가져오거나 설정합니다.
CurrentTouchStatus	`TouchStatus`	동작의 현재 `TouchStatus` 를 가져오거나 설정합니다.
DefaultAnimationDuration	`int`	속성`TouchState.Default`이 .인 경우 `CurrentTouchState` 애니메이션의 기간을 가져오거나 설정합니다.
DefaultAnimationEasing	`Easing`	속성`TouchState.Default`이 될 때 애니메이션의 감속/가속을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultBackgroundColor	`Color`	속성`TouchState.Default`이 될 때 요소의 배경색을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultOpacity	`double`	속성`TouchState.Default`이 될 때 요소의 불투명도를 `CurrentTouchState` 가져오거나 설정합니다.
DefaultRotation	`double`	속성`TouchState.Default`이 있을 때 요소의 X축과 Y축 둘 다에서 회전을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultRotationX	`double`	속성`TouchState.Default`이 있을 때 요소의 X 축을 중심으로 회전을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultRotationY	`double`	속성`TouchState.Default`이 될 때 요소의 Y 축을 중심으로 회전을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultScale	`double`	속성`TouchState.Default`이 될 때 `CurrentTouchState` 요소의 배율을 가져오거나 설정합니다.
DefaultTranslationX	`double`	속성`TouchState.Default`이 될 때 요소의 X 변환을 `CurrentTouchState` 가져오거나 설정합니다.
DefaultTranslationY	`double`	속성`TouchState.Default`이 될 때 요소의 Y 변환을 `CurrentTouchState` 가져오거나 설정합니다.
DisallowTouchThreshold	`int`	터치를 허용하지 않는 임계값을 가져오거나 설정합니다.
HoveredAnimationDuration	`int`	속성`HoverState.Hovered`이 .인 경우 `CurrentHoverState` 애니메이션의 기간을 가져오거나 설정합니다.
HoveredAnimationEasing	`Easing`	속성`HoverState.Hovered`이 될 때 애니메이션의 감속/가속을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredBackgroundColor	`Color`	속성`HoverState.Hovered`이 될 때 요소의 배경색을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredOpacity	`double`	속성`HoverState.Hovered`이 될 때 요소의 불투명도를 `CurrentHoverState` 가져오거나 설정합니다.
HoveredRotation	`double`	속성`HoverState.Hovered`이 있을 때 요소의 X축과 Y축 둘 다에서 회전을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredRotationX	`double`	속성`HoverState.Hovered`이 있을 때 요소의 X 축을 중심으로 회전을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredRotationY	`double`	속성`HoverState.Hovered`이 될 때 요소의 Y 축을 중심으로 회전을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredScale	`double`	속성`HoverState.Hovered`이 될 때 `CurrentHoverState` 요소의 배율을 가져오거나 설정합니다.
HoveredTranslationX	`double`	속성`HoverState.Hovered`이 될 때 요소의 X 변환을 `CurrentHoverState` 가져오거나 설정합니다.
HoveredTranslationY	`double`	속성`HoverState.Hovered`이 될 때 요소의 Y 변환을 `CurrentHoverState` 가져오거나 설정합니다.
IsEnabled	`bool`	동작을 사용할 수 있는지 여부를 나타내는 값을 가져오거나 설정합니다.
LongPressCommand	`ICommand`	사용자가 긴 누름을 완료할 때 호출할 값을 가져오거나 설정합니다 `ICommand` .
LongPressCommandParameter	`object`	속성에 전달할 매개 변수를 `LongPressCommand` 가져오거나 설정합니다.
LongPressDuration	`int`	긴 누름 제스처를 트리거하는 데 필요한 기간을 밀리초 단위로 가져오거나 설정합니다.
PressedAnimationDuration	`int`	속성`TouchState.Pressed`이 .인 경우 `CurrentTouchState` 애니메이션의 기간을 가져오거나 설정합니다.
PressedAnimationEasing	`Easing`	속성`TouchState.Pressed`이 될 때 애니메이션의 감속/가속을 `CurrentTouchState` 가져오거나 설정합니다.
PressedBackgroundColor	`Color`	속성`TouchState.Pressed`이 될 때 요소의 배경색을 `CurrentTouchState` 가져오거나 설정합니다.
PressedOpacity	`double`	속성`TouchState.Pressed`이 될 때 요소의 불투명도를 `CurrentTouchState` 가져오거나 설정합니다.
PressedRotation	`double`	속성`TouchState.Pressed`이 있을 때 요소의 X축과 Y축 둘 다에서 회전을 `CurrentTouchState` 가져오거나 설정합니다.
PressedRotationX	`double`	속성`TouchState.Pressed`이 있을 때 요소의 X 축을 중심으로 회전을 `CurrentTouchState` 가져오거나 설정합니다.
PressedRotationY	`double`	속성`TouchState.Pressed`이 될 때 요소의 Y 축을 중심으로 회전을 `CurrentTouchState` 가져오거나 설정합니다.
PressedScale	`double`	속성`TouchState.Pressed`이 될 때 `CurrentTouchState` 요소의 배율을 가져오거나 설정합니다.
PressedTranslationX	`double`	속성`TouchState.Pressed`이 될 때 요소의 X 변환을 `CurrentTouchState` 가져오거나 설정합니다.
PressedTranslationY	`double`	속성`TouchState.Pressed`이 될 때 요소의 Y 변환을 `CurrentTouchState` 가져오거나 설정합니다.
ShouldMakeChildrenInputTransparent	`bool`	요소의 자식이 입력을 투명하게 만들어야 하는지 여부를 나타내는 값을 가져오거나 설정합니다.

이벤트

이벤트	설명
`CurrentTouchStateChanged`	변경 시 `CurrentTouchState` 발생합니다.
`CurrentTouchStatusChanged`	변경 시 `CurrentTouchStatus` 발생합니다.
`HoverStateChanged`	변경 시 `CurrentHoverState` 발생합니다.
`HoverStatusChanged`	변경 시 `CurrentHoverStatus` 발생합니다.
`InteractionStatusChanged`	변경 시 `CurrentInteractionStatus` 발생합니다.
`LongPressCompleted`	긴 누름 제스처가 완료되면 발생합니다.
`TouchGestureCompleted`	터치 제스처가 완료되면 발생합니다.

예제

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

API

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

Xamarin 커뮤니티 도구 키트에서 마이그레이션

Xamarin Community Toolkit TouchEffect에서 Xamarin.Forms에서 .NET MAUI로 앱을 업그레이드하는 경우 다음과 같은 몇 가지 주요 변경 내용이 있습니다.

API 이름 변경
이제 TouchBehavior가 로 구현되었습니다. PlatformBehavior

API 이름 변경

Xamarin 커뮤니티 도구 키트의 이름	MAUI 커뮤니티 도구 키트의 이름
TouchEffect	TouchBehavior
NormalBackgroundColor	DefaultBackgroundColor
NormalScale	DefaultScale
NormalOpacity	DefaultOpacity
NormalTranslationX	DefaultTranslationX
NormalTranslationY	DefaultTranslationY
NormalRotation	DefaultRotation
NormalRotationX	DefaultRotationX
NormalRotationY	DefaultRotationY
NormalAnimationDuration	DefaultAnimationDuration
NormalAnimationEasing	DefaultAnimationEasing
NormalBackgroundImageSource	DefaultImageSource(이동됨 `ImageTouchBehavior`)
NormalBackgroundImageAspect	DefaultImageAspect(이동됨 `ImageTouchBehavior` )

이제 TouchBehavior가 로 구현되었습니다. `PlatformBehavior`

Xamarin 커뮤니티 도구 키트에서 이 도구 키트는 TouchEffect . AttachedEffect로 구현되었습니다. 효과를 사용하려면 연결된 속성을 사용하고 모든 속성에 적용합니다. VisualElement

.NET MAUI TouchBehavior 에서 이제 요소 동작 컬렉션에 적용되는 것으로 PlatformBehavior 구현됩니다. 자세한 내용은 플랫폼 동작을 참조하세요.

참고: 기본적으로 .NET MAUI PlatformBehavior에서는 속성을 설정 BindingContext 하지 않습니다. 이는 동작을 스타일에서 공유할 수 있기 때문입니다. 이 속성은 TouchBehaviorBindingContext 적용되는 속성과 VisualElement 동일하게 설정됩니다. 즉, 스타일을 통해 요소 간에 공유 TouchBehavior 해서는 안 됩니다.

다음은 Xamarin.Forms의 TouchEffect 보기에 적용되는 예제입니다.

XAML
C#

<StackLayout Orientation="Horizontal"
            HorizontalOptions="CenterAndExpand"
            xct:TouchEffect.AnimationDuration="250"
            xct:TouchEffect.AnimationEasing="{x:Static Easing.CubicInOut}"
            xct:TouchEffect.PressedScale="0.8"
            xct:TouchEffect.PressedOpacity="0.6"
            xct:TouchEffect.Command="{Binding Command}">
    <BoxView Color="Gold" />
    <Label Text="The entire layout receives touches" />
    <BoxView Color="Gold"/>
</StackLayout>

var stackLayout = new StackLayout()
{
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    Orientation = StackOrientation.Horizontal,
    Children =
    {
        new BoxView() { Color = Color.Gold, },
        new Label() { Text = "The entire layout receives touches", },
        new BoxView() { Color = Color.Gold, },
    }
};

TouchEffect.SetAnimationDuration(stackLayout, 250);
TouchEffect.SetAnimationEasing(stackLayout, Easing.CubicInOut);
TouchEffect.SetPressedScale(stackLayout, 0.8);
TouchEffect.SetPressedOpacity(stackLayout, 0.6);
TouchEffect.SetCommand(stackLayout, command);

.NET MAUI의 해당 TouchBehavior 항목은 다음과 같습니다.

XAML
C#

<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            DefaultAnimationDuration="250"
            DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
            PressedOpacity="0.6"
            PressedScale="0.8"
            Command="{Binding Command}" />
    </HorizontalStackLayout.Behaviors>

    <ContentView
        BackgroundColor="Gold"
        HeightRequest="100"
        WidthRequest="10" />
    <Label
        LineBreakMode="TailTruncation"
        Text="The entire layout receives touches"
        VerticalOptions="Center" />
    <ContentView
        BackgroundColor="Gold"
        HeightRequest="100"
        WidthRequest="10" />
</HorizontalStackLayout>

var stackLayout = new HorizontalStackLayout()
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Children =
    {
        new ContentView()
        {
            BackgroundColor = Colors.Gold,
            HeightRequest = 100,
            WidthRequest = 10,
        },
        new Label()
        {
            LineBreakMode = LineBreakMode.TailTruncation,
            Text = "The entire layout receives touches",
            VerticalOptions = LayoutOptions.Center,
        },
        new ContentView()
        {
            BackgroundColor = Colors.Gold,
            HeightRequest = 100,
            WidthRequest = 10,
        },
    },
    Behaviors =
    {
        new TouchBehavior()
        {
            DefaultAnimationDuration = 250,
            DefaultAnimationEasing = Easing.CubicInOut,
            PressedOpacity = 0.6,
            PressedScale = 0.8,
            Command = command,
        }
    }
};

Share via

TouchBehavior

구문

XAML

XAML 네임스페이스 포함

AnimationBehavior 사용

C#

C# 태그

추가 예제

가리키기 상호 작용 처리

긴 누름 조작 처리

속성

이벤트

예제

API

Xamarin 커뮤니티 도구 키트에서 마이그레이션

API 이름 변경

이제 TouchBehavior가 로 구현되었습니다. `PlatformBehavior`

피드백

추가 리소스

Share via

TouchBehavior

구문

XAML

XAML 네임스페이스 포함

AnimationBehavior 사용

C#

C# 태그

추가 예제

가리키기 상호 작용 처리

긴 누름 조작 처리

속성

이벤트

예제

API

Xamarin 커뮤니티 도구 키트에서 마이그레이션

API 이름 변경

이제 TouchBehavior가 로 구현되었습니다. PlatformBehavior

피드백

추가 리소스

이제 TouchBehavior가 로 구현되었습니다. `PlatformBehavior`