Share via


끌어서 놓기 제스처 인식

.NET 다중 플랫폼 앱 UI(.NET MAUI) 끌어서 놓기 제스처 인식기를 사용하면 연속 제스처를 사용하여 항목 및 관련 데이터 패키지를 화면의 한 위치에서 다른 위치로 끌 수 있습니다. 끌어서 놓기는 단일 애플리케이션에서 수행되거나 한 애플리케이션에서 시작하여 다른 애플리케이션에서 끝날 수 있습니다.

끌기 제스처가 시작되는 요소인 끌기 소스는 데이터 패키지 개체를 채워 전송할 데이터를 제공할 수 있습니다. 끌기 원본이 해제되면 놓기가 발생합니다. 끌어서 놓기 대상(끌어서 놓기 원본 아래의 요소)은 데이터 패키지를 처리합니다.

앱에서 끌어서 놓기를 사용하도록 설정하는 프로세스는 다음과 같습니다.

  1. DragGestureRecognizer 개체를 GestureRecognizers 컬렉션에 추가하여 요소에 대한 끌기를 사용 설정합니다. 자세한 내용은 끌기 사용을 참조하세요.
  2. [선택 사항] 데이터 패키지를 빌드합니다. .NET MAUI는 이미지 및 텍스트 컨트롤에 대한 데이터 패키지를 자동으로 채우지만 다른 콘텐츠의 경우 사용자 고유의 데이터 패키지를 구성해야 합니다. 자세한 내용은 데이터 패키지 빌드를 참조하세요.
  3. 컬렉션에 개체를 추가하여 DropGestureRecognizer 요소에서 삭제를 GestureRecognizers 사용하도록 설정합니다. 자세한 내용은 놓기 사용을 참조하세요.
  4. [선택 사항] DropGestureRecognizer.DragOver 이벤트를 처리하여 놓기 대상에서 허용하는 작업 유형을 표시합니다. 자세한 내용은 DragOver 이벤트 처리를 참조하세요.
  5. [선택 사항] 데이터 패키지를 처리하여 놓인 콘텐츠를 검색합니다. .NET MAUI는 데이터 패키지에서 이미지 및 텍스트 데이터를 자동으로 검색하지만 다른 콘텐츠의 경우 데이터 패키지를 처리해야 합니다. 자세한 내용은 데이터 패키지 처리를 참조하세요.

끌기 사용

.NET MAUI에서 끌기 제스처 인식은 클래스에서 DragGestureRecognizer 제공합니다. 이 클래스는 다음과 같은 속성을 정의합니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

클래스는 DragGestureRecognizerDragStarting 또한 정의 하 고 DropCompleted 속성인 경우 CanDrag 발생 하는 이벤트입니다 true. DragGestureRecognizer 개체는 끌기 제스처를 감지하면 DragStartingCommand를 실행하고 DragStarting 이벤트를 호출합니다. 그런 다음 DragGestureRecognizer 개체는 놓기 제스처 완료를 감지하면 DropCompletedCommand를 실행하고 DropCompleted 이벤트를 호출합니다.

DragStarting 이벤트와 함께 제공되는 DragStartingEventArgs 개체는 다음 속성을 정의합니다.

  • bool 형식의 Cancel - 이벤트를 취소할지 여부를 나타냅니다.
  • DataPackage 형식의 Data - 끌기 원본과 함께 제공되는 데이터 패키지를 나타냅니다. 읽기 전용 속성입니다.
  • PlatformArgs형식 PlatformDragStartingEventArgs?의 는 이벤트와 연결된 플랫폼별 인수를 나타냅니다.

Android에서 클래스는 PlatformDragStartingEventArgs 다음 속성을 정의합니다.

  • Sender형식 View은 이벤트에 연결된 네이티브 뷰를 나타냅니다.
  • MotionEvent형식MotionEvent의 는 끌어서 놓기 상태 대한 정보를 포함하는 이벤트를 나타냅니다.

또한 Android에서 클래스는 PlatformDragStartingEventArgs 다음 메서드를 정의합니다.

  • SetDragShadowBuilderView.DragShadowBuilder 끌기 시작할 때 사용할 값을 설정합니다.
  • SetClipData은 끌기 시작할 때 사용할 값을 설정합니다 ClipData .
  • SetLocalData- 끌기가 시작될 때 사용할 로컬 데이터를 설정합니다.
  • SetDragFlagsDragFlags 끌기 시작할 때 사용할 값을 설정합니다.

예를 들어 이 메서드를 SetClipData 사용하여 끌어간 항목과 연결 ClipData 합니다.

void OnDragStarting(object sender, DragStartingEventArgs e)
{
#if ANDROID
    string content = "insert your content here";
    e.PlatformArgs.SetClipData(Android.Content.ClipData.NewPlainText("Drag data", content));
#endif
}

이벤트와 DropCompleted 함께 제공되는 개체는 DropCompletedEventArgs 이벤트와 연결된 플랫폼별 인수를 나타내는 형식PlatformDropCompletedEventArgs?의 속성을 정의 PlatformArgs 합니다.

Android에서 클래스는 PlatformDropCompletedEventArgs 다음 속성을 정의합니다.

  • Sender형식 View은 이벤트에 연결된 네이티브 뷰를 나타냅니다.
  • DragEvent형식 DragEvent의 는 끌어서 놓기 작업 중에 여러 번 전송되는 이벤트를 나타냅니다.

다음 XAML 예제에서는 Image에 연결된 DragGestureRecognizer를 보여 줍니다.

<Image Source="monkeyface.png">
    <Image.GestureRecognizers>
        <DragGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

이 예제에서는 Image에서 끌기 제스처를 시작할 수 있습니다.

끌기 제스처는 길게 누른 다음 끌기를 사용하여 시작됩니다.

데이터 패키지 빌드

.NET MAUI는 다음 컨트롤에 대해 끌기가 시작될 때 자동으로 데이터 패키지를 빌드합니다.

다음 표에서는 텍스트 컨트롤에서 끌기가 시작될 때 읽히는 속성과 시도되는 변환을 보여 줍니다.

제어 속성 전환
CheckBox IsChecked boolstring로 변환됩니다.
DatePicker Date DateTimestring로 변환됩니다.
Editor Text
Entry Text
Label Text
RadioButton IsChecked boolstring로 변환됩니다.
Switch IsToggled boolstring로 변환됩니다.
TimePicker Time TimeSpanstring로 변환됩니다.

텍스트 및 이미지 이외의 콘텐츠에 대해서는 데이터 패키지를 직접 빌드해야 합니다.

데이터 패키지는 다음 속성을 정의하는 DataPackage 클래스로 표현됩니다.

DataPackagePropertySet 클래스는 Dictionary<string,object>로 저장된 속성 모음을 나타냅니다. DataPackageView 클래스에 대한 자세한 내용은 데이터 패키지 처리를 참조하세요.

이미지 또는 텍스트 데이터 저장

DataPackage.Image 또는 DataPackage.Text 속성에 데이터를 저장하여 이미지 또는 텍스트 데이터를 끌기 원본과 연결할 수 있습니다. 이벤트에 대한 DragStarting 처리기에서 데이터를 추가할 수 있습니다.

다음 XAML 예제에서는 DragStarting 이벤트에 대한 처리기를 등록하는 DragGestureRecognizer를 보여 줍니다.

<Path Stroke="Black"
      StrokeThickness="4">
    <Path.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Path.GestureRecognizers>
    <Path.Data>
        <!-- PathGeometry goes here -->
    </Path.Data>
</Path>

이 예제에서는 DragGestureRecognizerPath 개체에 연결됩니다. 이 DragStarting 이벤트는 이벤트 처리기를 실행하는 끌어서 끌기 제스처가 Path검색될 때 발생합니다.OnDragStarting

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    e.Data.Text = "My text data goes here";
}

DragStarting 이벤트와 함께 제공되는 DragStartingEventArgs 개체에는 DataPackage 형식의 Data 속성이 있습니다. 이 예제에서는 DataPackage 개체의 Text 속성이 string으로 설정됩니다. 그런 다음 놓기에서 DataPackage에 액세스하여 string을 검색할 수 있습니다.

속성 모음에 데이터 저장

이미지 및 텍스트를 비롯한 모든 데이터는 DataPackage.Properties 컬렉션에 데이터를 저장하여 끌기 원본과 연결할 수 있습니다. 이벤트에 대한 DragStarting 처리기에서 데이터를 추가할 수 있습니다.

다음 XAML 예제에서는 DragStarting 이벤트에 대한 처리기를 등록하는 DragGestureRecognizer를 보여 줍니다.

<Rectangle Stroke="Red"
           Fill="DarkBlue"
           StrokeThickness="4"
           HeightRequest="200"
           WidthRequest="200">
    <Rectangle.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Rectangle.GestureRecognizers>
</Rectangle>

이 예제에서는 DragGestureRecognizerRectangle 개체에 연결됩니다. 이 DragStarting 이벤트는 이벤트 처리기를 실행하는 끌어서 끌기 제스처가 Rectangle검색될 때 발생합니다.OnDragStarting

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    Shape shape = (sender as Element).Parent as Shape;
    e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
}

DragStarting 이벤트와 함께 제공되는 DragStartingEventArgs 개체에는 DataPackage 형식의 Data 속성이 있습니다. Dictionary<string, object> 컬렉션인 DataPackage 개체의 Properties 컬렉션을 수정하여 필요한 데이터를 저장할 수 있습니다. 이 예제에서는 사전이 Properties "Square" 키에 대한 크기를 나타내는 개체를 Rectangle 저장 Square 하도록 수정됩니다.

놓기 사용

.NET MAUI에서 드롭 제스처 인식은 클래스에서 DropGestureRecognizer 제공됩니다. 이 클래스는 다음과 같은 속성을 정의합니다.

  • bool 형식의 AllowDrop - 제스처 인식기가 연결된 요소가 놓기 대상이 될 수 있는지 여부를 나타냅니다. 이 속성의 기본값은 true입니다.
  • ICommand 형식의 DragOverCommand - 끌기 원본을 놓기 대상으로 끌면 실행됩니다.
  • object 형식의 DragOverCommandParameter - DragOverCommand에 전달되는 매개 변수입니다.
  • ICommand 형식의 DragLeaveCommand - 끌기 원본을 놓기 대상 외부로 끌면 실행됩니다.
  • object 형식의 DragLeaveCommandParameter - DragLeaveCommand에 전달되는 매개 변수입니다.
  • ICommand 형식의 DropCommand - 끌기 원본을 놓기 대상 위에 놓으면 실행됩니다.
  • object 형식의 DropCommandParameter - DropCommand에 전달되는 매개 변수입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

클래스는 DropGestureRecognizer 또한 정의 DragOver, DragLeaveDrop 속성이 경우 AllowDrop 발생 하는 이벤트입니다 true. DropGestureRecognizer는 놓기 대상 위에서 끌기 원본을 인식하면 DragOverCommand를 실행하고 DragOver 이벤트를 호출합니다. 그런 다음 끌기 원본을 놓기 대상 외부로 끌면 DropGestureRecognizerDragLeaveCommand를 실행하고 DragLeave 이벤트를 호출합니다. 마지막으로 DropGestureRecognizer가 놓기 대상 위에서 끌기 제스처를 인식하면 DropCommand를 실행하고 Drop 이벤트를 호출합니다.

DragEventArgs 클래스는 이벤트와 DragLeave 함께 DragOver 다음 속성을 정의합니다.

  • DataPackage 형식의 Data - 끌기 원본과 연결된 데이터를 포함합니다. 이 속성은 읽기 전용입니다.
  • DataPackageOperation 형식의 AcceptedOperation - 놓기 대상에서 허용하는 작업 유형을 지정합니다.
  • PlatformArgs형식 PlatformDragEventArgs?의 는 이벤트와 연결된 플랫폼별 인수를 나타냅니다.

Android에서 클래스는 PlatformDragEventArgs 다음 속성을 정의합니다.

  • Sender형식 View은 이벤트에 연결된 네이티브 뷰를 나타냅니다.
  • DragEvent형식 DragEvent의 는 끌어서 놓기 작업 중에 여러 번 전송되는 이벤트를 나타냅니다.

DataPackageOperation 열거형에 대한 자세한 내용은 DragOver 이벤트 처리를 참조하세요.

Drop 이벤트와 함께 제공되는 DropEventArgs 클래스는 다음 속성을 정의합니다.

  • DataPackageView 형식의 Data - 데이터 패키지의 읽기 전용 버전입니다.
  • Handled형식 bool의 는 이벤트 처리기가 이벤트를 처리했는지 또는 .NET MAUI가 자체 처리를 계속해야 하는지 여부를 나타냅니다.
  • PlatformArgs형식 PlatformDropEventArgs?의 는 이벤트와 연결된 플랫폼별 인수를 나타냅니다.

Android에서 클래스는 PlatformDropEventArgs 다음 속성을 정의합니다.

  • Sender형식 View은 이벤트에 연결된 네이티브 뷰를 나타냅니다.
  • DragEvent형식 DragEvent의 는 끌어서 놓기 작업 중에 여러 번 전송되는 이벤트를 나타냅니다.

다음 XAML 예제에서는 Image에 연결된 DropGestureRecognizer를 보여 줍니다.

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

이 예제에서는 끌어서 놓기 대상에 Image 끌기 원본이 놓이면 끌기 소스 ImageSource가 놓기 대상에 복사됩니다. .NET MAUI는 드래그된 이미지와 텍스트를 호환되는 놓기 대상으로 자동으로 복사합니다.

DragOver 이벤트 처리

필요에 따라 DropGestureRecognizer.DragOver 이벤트를 처리하여 놓기 대상에서 허용하는 작업 유형을 표시할 수 있습니다. 이벤트와 함께 제공되는 개체에서 형식 DataPackageOperationDragEventArgs 의 속성을 설정 AcceptedOperation 하여 허용 가능한 작업을 나타낼 수 있습니다DragOver.

DataPackageOperation 열거형은 다음 멤버를 정의합니다.

  • None - 수행할 작업이 없음을 나타냅니다.
  • Copy - 끌기 원본 콘텐츠가 놓기 대상에 복사됨을 나타냅니다.

Important

DragEventArgs 개체가 만들어지면 AcceptedOperation 속성은 기본적으로 DataPackageOperation.Copy로 설정됩니다.

다음 XAML 예제에서는 DragOver 이벤트에 대한 처리기를 등록하는 DropGestureRecognizer를 보여 줍니다.

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer DragOver="OnDragOver" />
    </Image.GestureRecognizers>
</Image>

이 예제에서는 DropGestureRecognizerImage 개체에 연결됩니다. DragOver 끌어서 놓기 대상 위로 끌기 원본을 끌지만 삭제되지 않은 경우 이벤트가 발생합니다. 그러면 이벤트 처리기가 실행됩니다.OnDragOver

void OnDragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.None;
}

이 예제에서는 DragEventArgs 개체의 AcceptedOperation 속성이 DataPackageOperation.None으로 설정됩니다. 이 값을 사용하면 끌어서 놓기 대상 위에 끌어서 놓을 때 아무 작업도 수행되지 않습니다.

데이터 패키지 처리

끌어 Drop 서 놓기 대상을 통해 끌기 원본이 해제될 때 이벤트가 발생합니다. .NET MAUI는 끌기 원본이 다음 컨트롤에 놓이면 데이터 패키지에서 데이터를 자동으로 검색하려고 시도합니다.

다음 표에서는 설정된 속성과 텍스트 기반 끌기 원본을 텍스트 컨트롤에 놓을 때 시도되는 모든 변환을 보여 주는 표입니다.

제어 속성 전환
CheckBox IsChecked stringbool로 변환됩니다.
DatePicker Date stringDateTime로 변환됩니다.
Editor Text
Entry Text
Label Text
RadioButton IsChecked stringbool로 변환됩니다.
Switch IsToggled stringbool로 변환됩니다.
TimePicker Time stringTimeSpan로 변환됩니다.

텍스트 및 이미지 이외의 콘텐츠에 대해서는 데이터 패키지를 직접 처리해야 합니다.

Drop 이벤트와 함께 제공되는 DropEventArgs 클래스는 DataPackageView 형식의 Data 속성을 정의합니다. 이 속성은 데이터 패키지의 읽기 전용 버전을 나타냅니다.

이미지 또는 텍스트 데이터 검색

Drop 이벤트에 대한 처리기에서 DataPackageView 클래스에 정의된 메서드를 사용하여 데이터 패키지에서 이미지 또는 텍스트 데이터를 검색할 수 있습니다.

DataPackageView 클래스에는 GetImageAsyncGetTextAsync 메서드가 포함됩니다. 메서드는 GetImageAsync 속성에 저장된 데이터 패키지에서 이미지를 검색 DataPackage.Image 하고 반환합니다 Task<ImageSource>. 마찬가지로 메서드는 GetTextAsync 속성에 저장된 데이터 패키지에서 텍스트를 검색 DataPackage.Text 하고 반환합니다 Task<string>.

다음 예제에서는 Path에 대한 데이터 패키지에서 텍스트를 검색하는 Drop 이벤트 처리기를 보여 줍니다.

async void OnDrop(object sender, DropEventArgs e)
{
    string text = await e.Data.GetTextAsync();

    // Perform logic to take action based on the text value.
}

이 예제에서는 GetTextAsync 메서드를 사용하여 데이터 패키지에서 텍스트 데이터를 검색합니다. 그런 다음 텍스트 값을 기반으로 하는 작업을 수행할 수 있습니다.

속성 모음에서 데이터 검색

Drop 이벤트에 대한 처리기에서 데이터 패키지의 Properties 컬렉션에 액세스하여 데이터 패키지에서 데이터를 검색할 수 있습니다.

DataPackageView 클래스는 DataPackagePropertySetView 형식의 Properties 속성을 정의합니다. DataPackagePropertySetView 클래스는 Dictionary<string, object>로 저장된 읽기 전용 속성 모음을 나타냅니다.

다음 예제에서는 Rectangle에 대한 데이터 패키지의 속성 모음에서 데이터를 검색하는 Drop 이벤트 처리기를 보여 줍니다.

void OnDrop(object sender, DropEventArgs e)
{
    Square square = (Square)e.Data.Properties["Square"];

    // Perform logic to take action based on retrieved value.
}

이 예제에서는 "Square" 사전 키를 지정하여 데이터 패키지의 속성 모음에서 Square 개체를 검색합니다. 그런 다음 검색된 값을 기반으로 하는 작업을 수행할 수 있습니다.

제스처 위치 가져오기

또는 개체에서 메서드 DragEventArgsDragStartingEventArgsDropEventArgs 를 호출하여 끌어서 놓기 제스처가 GetPosition 발생한 위치를 가져올 수 있습니다. 메서드는 GetPosition 인수를 Element? 수락하고 개체로 Point? 위치를 반환합니다.

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    // Position relative to screen
    Point? screenPosition = e.GetPosition(null);

    // Position relative to specified element
    Point? relativeToImagePosition = e.GetPosition(image);
}

인수는 Element? 위치를 상대적으로 가져와야 하는 요소를 정의합니다. 이 인수로 값을 제공하면 null 메서드가 GetPosition 화면을 기준으로 끌어서 놓기 제스처의 위치를 정의하는 개체를 반환 Point? 합니다.