끌어서 놓기

아티클
03/19/2024

끌어서 놓기는 Windows 바탕화면에 있는 애플리케이션 내 또는 애플리케이션 간에 데이터를 전송하는 직관적인 방법입니다. 끌어서 놓기의 표준 제스처(손가락으로 누른 채 이동하기 또는 마우스나 스타일러스로 눌러서 이동하기)를 사용하면 애플리케이션 간에 또는 애플리케이션 내에서 데이터를 전송할 수 있습니다.

중요 API: CanDrag 속성, AllowDrop 속성

끌기 제스처가 트리거되는 영역 또는 애플리케이션인 끌기 소스는 텍스트, RTF, HTML, 비트맵, 스토리지 항목 또는 사용자 지정 데이터 형식 등의 표준 데이터 형식을 포함할 수 있는 데이터 패키지 개체를 입력함으로써 데이터가 전송되도록 해줍니다. 소스는 또한 복사, 이동 또는 연결 등 지원되는 작업의 종류도 나타냅니다. 마우스 포인터를 놓으면 놓기가 발생합니다. 포인터 아래에 있는 영역이나 애플리케이션인 놓기 대상은 데이터 패키지를 처리하고 수행된 작업 유형을 반환합니다.

끌어서 놓기 도중 끌기 UI는 발생하고 있는 끌어서 놓기 작업의 유형을 시각적으로 보여줍니다. 이 시각적 피드백은 처음에는 소스에 의해 제공되지만 마우스 포인터가 대상 위로 이동할 때 대상에 의해 변경될 수 있습니다.

최신 끌어서 놓기는 UWP를 지원하는 모든 디바이스에서 사용할 수 있습니다. 이 문서에서는 최신 끌어서 놓기의 XAML API를 중점적으로 설명하지만 클래식 Windows 앱을 포함하여 모든 종류의 애플리케이션 간에 또는 내에서 끌어서 놓기를 사용하여 데이터를 전송할 수 있습니다. 일단 구현되면 끌어서 놓기는 앱 간, 앱과 데스크톱 간, 데스크톱 간 등 모든 방향에서 원활하게 작동합니다.

다음은 앱에서 끌어서 놓기를 사용하기 위해 수행해야 하는 작업에 대한 간단한 설명입니다.

CanDrag 속성을 true로 설정하여 특정 요소에 대해 끌기를 설정합니다.
데이터 패키지를 빌드합니다. 시스템은 이미지와 텍스트를 자동으로 처리하지만 다른 콘텐츠의 경우 DragStarting 및 DropCompleted 이벤트를 처리하고 이를 사용하여 고유의 데이터 패키지를 구성해야 합니다.
놓아진 콘텐츠를 받을 수 있는 모든 요소에서 AllowDrop 속성을 true로 설정하여 놓기를 설정합니다.
시스템에서 해당 요소가 받을 수 있는 끌기 작업 유형을 알 수 있도록 DragOver 이벤트를 처리합니다.
놓아진 콘텐츠를 받도록 Drop 이벤트를 처리합니다.

끌기 사용

요소에 대해 끌기를 설정하려면 CanDrag 속성을 true로 설정합니다. 이렇게 하면 요소 및 요소에 포함된 요소(ListView와 같은 컬렉션의 경우)에 끌기를 사용할 수 있습니다.

끌 수 있는 항목을 구체적으로 지정하세요. 사용자는 이미지나 텍스트와 같은 특정 항목만 앱에서 끌고자 할 것입니다.

다음은 CanDrag를 설정하는 방법입니다.

<Image x:Name="Image" CanDrag="True" Margin="10,292,10,0" Height="338"></Image>

UI를 사용자 지정해야 하는 경우가 아니면 끌기를 허용하는 다른 작업을 수행할 필요가 없습니다(이 문서의 뒷부분에서 다룸). 놓으려면 몇 단계를 더 거쳐야 합니다.

데이터 패키지 작성

대부분의 경우, 데이터 패키지는 자동으로 작성됩니다. 시스템은 다음을 자동으로 처리합니다.

이미지
Text

기타 콘텐츠의 경우 DragStarting 및 DropCompleted 이벤트를 처리하고 이를 사용하여 고유의 DataPackage를 구성해야 합니다.

놓기 사용

다음 태그는 XAML에서 AllowDrop을 사용하여 앱의 특정 영역을 놓기에 유효하게 설정하는 방법을 보여줍니다. 사용자가 다른 곳에서 놓으려고 하면 시스템에서 이를 허용하지 않습니다. 사용자가 앱의 어디나 항목을 놓을 수 있게 하려면 전체 배경을 놓기 대상으로 설정합니다.

<Grid AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"
      Background="LightBlue" Margin="10,10,10,353">
    <TextBlock>Drop anywhere in the blue area</TextBlock>
</Grid>

DragOver 이벤트 처리

DragOver 이벤트는 사용자가 앱 위로 항목을 끌어갔지만 아직 놓지 않은 경우에 발생합니다. 이 처리기에서 AcceptedOperation 속성을 사용하여 앱이 지원하는 작업의 종류를 지정해야 합니다. 복사가 가장 일반적입니다.

private void Grid_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
}

Drop 이벤트 처리

Drop 이벤트는 사용자가 유효한 놓기 영역에서 항목을 해제할 때 발생합니다. DataView 속성을 사용하여 처리합니다.

아래 예제에서는 편의상 사용자가 사진 한 장을 놓았다고 가정하고 이에 직접 액세스합니다. 실제로는 사용자가 다양한 형식의 여러 항목을 동시에 놓을 수 있습니다. 앱에서는 삭제된 파일 유형과 현재 개수를 확인하여 이에 대한 가능성을 처리하고 각각을 이에 따라 처리해야 합니다. 또한 사용자에게 앱에서 지원하지 않는 작업 수행 시도 유무에 대해서 알리는 것을 고려해야 합니다.

private async void Grid_Drop(object sender, DragEventArgs e)
{
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
    {
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
        {
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;
        }
    }
}

UI 사용자 지정

이 시스템은 끌어서 놓기용 기본 UI를 제공합니다. 그러나 사용자 지정 캡션 및 문자 모양을 설정하거나 UI를 전혀 표시하지 않도록 선택하여 UI의 다양한 부분을 사용자 지정하도록 선택할 수도 있습니다. UI를 사용자 지정하려면 DragEventArgs.DragUIOverride 속성을 사용합니다.

private void Grid_DragOverCustomized(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
    e.DragUIOverride.Caption = "Custom text here"; // Sets custom UI text
    // Sets a custom glyph
    e.DragUIOverride.SetContentFromBitmapImage(
        new BitmapImage(
            new Uri("ms-appx:///Assets/CustomImage.png", UriKind.RelativeOrAbsolute)));
    e.DragUIOverride.IsCaptionVisible = true; // Sets if the caption is visible
    e.DragUIOverride.IsContentVisible = true; // Sets if the dragged content is visible
    e.DragUIOverride.IsGlyphVisible = true; // Sets if the glyph is visibile
}

터치를 사용할 때 UIElement를 끌고 그 컨텍스트 메뉴를 열어 유사한 터치 제스처를 공유합니다. 각각은 길게 누르기로 시작합니다. 다음은 두 가지를 모두 지원하는 앱의 요소에 대한 두 작업 사이에서 시스템이 모호성을 없애는 방법입니다.

사용자가 항목을 길게 눌러 500밀리초 이내에 끌기 시작하면 항목이 끌리고 컨텍스트 메뉴가 표시되지 않습니다.
사용자가 길게 누르지만 500밀리초 이내에 끌지 않으면 컨텍스트 메뉴가 열립니다.
컨텍스트 메뉴가 열린 후에 사용자가 손가락을 떼지 않고 항목을 끌려고 하면 컨텍스트 메뉴가 해제되고 끌기가 시작됩니다.

ListView 또는 GridView의 항목을 폴더로 지정

ListViewItem 또는 GridViewItem을 폴더로 지정할 수 있습니다. 이는 TreeView 및 파일 탐색기 시나리오에 특히 유용합니다. 이렇게 하려면 해당 항목에서 AllowDrop 속성을 True로 명시적으로 설정합니다.

시스템은 폴더에 놓기 적절한 애니메이션을 폴더가 아닌 항목과 비교하여 표시합니다. 데이터 원본을 업데이트하고 삭제된 항목을 대상 폴더에 추가하려면 앱 코드에서 폴더 항목 및 폴더가 아닌 항목에 대한 Drop 이벤트를 계속 처리해야 합니다.

ListView 내에서 끌어서 놓기 다시 정렬 사용

ListView는 이 문서에 설명된 CanDrop API와 매우 유사한 API를 사용하여 즉시 끌어서 기반 순서 변경을 지원합니다. 최소한 AllowDrop 및 CanReorderItems 속성을 추가합니다.

자세한 내용은 ListViewBase.CanReorderItems를 참조하세요.

사용자 지정 끌어서 놓기 구현

UIElement 클래스는 끌어서 놓기를 구현하는 데 필요한 대부분의 작업을 수행해 줍니다. 그러나 원하는 경우 아래 API를 사용하여 고유한 버전을 구현할 수 있습니다.

기능	WinAppSDK API Microsoft.UI.Input.DragDrop 네임스페이스	UWP API Windows.Applicationmodel.DataTransfer.DragDrop.Core 네임스페이스
DragPrimitive	DragOperation	CoreDragOperation
데이터 패키지 만들기	Datapackage	동일
손으로 셸로 끌기	DragOperation.StartAsync	CoreDragOperation.StartAsync
셸에서 놓기 받기	DragDropManager.TargetRequested ICoreDropOperationTarget	CoreDragDropManager.TargetRequested ICoreDropOperationTarget