빠른 시작: 콘텐츠 끌기

텍스트, 이미지 또는 다른 데이터를 끌어 GridView 또는 ListView에서 순서를 다시 매기거나 항목을 다른 종류의 컨트롤로 끌어서 놓을 수 있습니다.

Windows 스토어 앱에서 마우스, 터치 제스처 또는 음성을 사용하여 항목을 끌고 GridView 또는 ListView에서 순서를 다시 매기거나 단일 GridView 또는 ListView에서 다른 XAML 컨트롤로 항목을 끌어서 놓을 수 있습니다. GridView 또는 ListView에서 끌려면 CanDragItems 특성을 True로 설정합니다. 컨트롤이 끌어온 항목을 수락할 수 있게 하려면 AllowDrop 특성을 True로 설정합니다.

애니메이션을 끌기 작업에 적용할 수 있습니다. JavaScript용으로 작성된 항목이긴 하지만 끌기 애니메이션에 대한 지침에 제공된 것과 동일한 일반적인 지침을 따르세요. UI에 애니메이션 효과 주기 문서에서는 XAML에서 끌기 애니메이션을 적용하는 방법을 보여 줍니다.

서로 다른 앱 간에 끌기는 지원되지 않지만 공유 API 또는 클립보드를 사용하여 해당 시나리오에서 데이터를 전송할 수 있습니다. 모든 데이터 전송 API는 Windows::ApplicationModel::DataTransfer ::DataPackage 클래스와 Windows::ApplicationModel::DataTransfer ::StandardDataFormats 열거형을 포함하여 일부 형식을 공유합니다. 끌기 작업에서 DataPackage 클래스는 전송되는 데이터를 래핑하는데 사용되고 StandardDataFormats 열거형은 DataPackage에서 특수 Set* 메서드를 제공하는 형식을 정의합니다. 여기에는 텍스트, 비트맵, HTML, RTF, URI 및 StorageItem 개체 컬렉션이 포함됩니다. DataPackageView 클래스는 Drop 이벤트 처리기에서 데이터 검색에 사용되는 비동기 Get* 메서드를 제공합니다. DataPackage::SetData 메서드와 DataPackageView::GetDataAsync 메서드를 통해 사용자 정의 개체를 끌 수도 있습니다.

GridView 또는 ListView에서 항목을 끌 수 있게 하려면

GridView 또는 ListView에서 요소를 끌 수 있게 하는 것은 매우 쉽습니다. XAML에서 컨트롤의 다음 특성을 설정하면 됩니다. AllowDrop="True" CanDragItems="True" CanReorderItems="True"

끌기 기본 단계

어떤 종류의 데이터를 전송하든 관계없이 컨트롤 간의 끌기 작업에는 다음 두 가지 기본 단계가 있습니다.

  1. 끌기 제스처가 시작되는 원본(Windows::UI::Xaml::Controls::GridView 또는 Windows::UI::Xaml::Controls::ListView)에서 Windows::UI::Xaml::Controls::DragItemsStarting 이벤트를 처리합니다. DragItemsStartingEventArgs 매개 변수에는 끄는 항목에 대한 참조가 포함됩니다. 또한 이 매개 변수에는 드롭 대상에 전달될 DataPackage인 Data 속성이 있습니다. 이벤트 처리기에서, DragItemsStartingEventArgs::Items 컬렉션에서 전달할 데이터를 가져온 다음 이 데이터를 사용하여 시나리오에 적합한 방법으로 Data 속성을 채웁니다.

  2. 드롭 대상에서 Windows::UI::Xaml::Controls::Drop 이벤트를 처리합니다. 전달된 DataPackage 개체를 검색하고, GetView를 호출하여 해당 DataPackageView 속성을 가져온 다음 Get* 메서드를 사용하여 이전에 DragItemsStarting 이벤트에 저장한 데이터에 액세스합니다. 드롭 대상은 "Drop" 이벤트를 지원하는 임의 XAML 컨트롤일 수 있습니다.

DragEnter, DragLeave, DragOver 등의 추가 이벤트는 주로 애니메이션이나 다른 시각적 효과를 만드는 데 유용하지만 기본 데이터 전송 작업 자체에 필요하지는 않습니다.

텍스트를 끌려면

다음 예제에서 드롭 원본은 문자열 항목이 포함된 GridView이고, DragItemsStarting_1은 GridView에서 발생된 DragItemsStarting 이벤트에 대한 이벤트 처리기라고 가정합니다. GridView:: SelectionMode 속성이 Multiple로 설정된 경우에는 항목 컬렉션에 요소가 두 개 이상 포함될 수 있습니다. 이 예제에서는 SelectionMode가 Single로 설정되었다고 가정하므로 끄는 항목이 위치 0에 있다고 가정해도 됩니다.

끌기:


void DragDrop::DragText::DragTextGridView_DragItemsStarting_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::DragItemsStartingEventArgs^ e)
{    
    auto mytxt = safe_cast<String^>(e->Items->GetAt(0));
    e->Data->SetText(mytxt);
}

놓기:

다음 예제에서는 Drop 이벤트를 처리하는 방법을 보여 줍니다. 이 경우 드롭 대상이 XAMLTextBlock 요소라고 가정합니다.


void DragDrop::DragText::DropTextHere_Drop_1(Platform::Object^ sender, Windows::UI::Xaml::DragEventArgs^ e)
{
    using namespace concurrency;
    using namespace Windows::ApplicationModel::DataTransfer;

    DataPackageView^ dataView = e->Data->GetView();
    create_task(dataView->GetTextAsync())
    .then([this, sender](String^ txt)
    {
        TextBlock^ tb = safe_cast<TextBlock^>(sender);
        tb->Text = txt;
    });
}

비트맵을 끌려면

파일에서 BitmapImage를 가져온 경우 DataPackage::SetStorageItemsDataPackageView::GetStorageItemsAsync 메서드를 사용하여 IStorageItem으로 끕니다. 또한 끌기 가능한 파일 기반 BitmapImage 개체의 GridView 또는 ListView를 만들어야 하는 경우 BitmapImage와 원본 StorageFile, 그리고 파일 이름, 특성 등의 기타 정보를 공용 속성으로 포함하는 바인딩 가능한 래퍼 개체를 만드는 것이 좋습니다. IStorageItem 개체 자체는 바인딩할 수 없으므로 GridView에 쉽게 표시할 수 없습니다.

중요  FileInformation 클래스를 사용하여 가상화된 파일 개체를 XAML 컨트롤에 바인딩할 수 있지만 가상화된 개체는 쉽게 끌 수 없습니다.

다음 예제에서 끌기 원본은 사용자 정의 PhotoWrapper 개체 목록에 데이터 바인딩된 ListView라고 가정합니다. 각 PhotoWrapper에는 원래 파일을 열 때 가져온 BitmapImageStorageFile 개체가 포함됩니다. ListViewDataTemplateImageFile 속성에 바인딩합니다.


    [Windows::UI::Xaml::Data::Bindable]
    public ref class PhotoWrapper sealed
    {
    public:
        property Windows::UI::Xaml::Media::Imaging::BitmapImage^ Thumbnail;
        property Windows::Storage::StorageFile^ ImageFile;
    };

끌기:

다음 DragItemsStarting 이벤트 처리기는 끌기 작업에서 하나 이상의 IStorageItem 개체 목록을 만들고 DataPackage에 삽입하는 방법을 보여 줍니다.


void DragDrop::DragImage::ListView_DragItemsStarting_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::DragItemsStartingEventArgs^ e)
{
    IVector<IStorageItem^>^ selectedFiles = ref new Vector<IStorageItem^>();
    for (unsigned int i = 0; i < e->Items->Size; i++)
    {
        PhotoWrapper^ wrapper = safe_cast<PhotoWrapper^>(e->Items->GetAt(i));
        selectedFiles->Append(wrapper->ImageFile);
    }

    e->Data->SetStorageItems(selectedFiles);
}

놓기:

Drop 이벤트에서 읽기 전용 DataPackageView 속성을 가져오고 OpenReadAsync 메서드를 호출하여 스트림을 검색한 다음 스트림에서 BitmapImage를 만듭니다. 작업이 완료된 후 이미지 컨트롤의 Source 속성을 설정하고 원본 목록에서 해당 PhotoWrapper 개체를 제거합니다.


void DragDrop::DragImage::ListView_Drop_1(Platform::Object^ sender, Windows::UI::Xaml::DragEventArgs^ e)
{
    DataPackageView^ dpView = e->Data->GetView();

    create_task(dpView->GetStorageItemsAsync())
    .then([this](IVectorView<IStorageItem^>^ images)
    {
        for (unsigned int i = 0; i < images->Size; i++)
        {
            create_task([images, i, this]()
            {
                // Get a stream from the file object.
                IStorageFile^ file = safe_cast<IStorageFile^>(images->GetAt(i));
                return file->OpenReadAsync();
            }).then([this](IRandomAccessStreamWithContentType^ s)
            {
                // Set the stream as the bitmap source
                BitmapImage^ bi = ref new BitmapImage();
                bi->SetSourceAsync(s);
                return bi;
            }).then([this](BitmapImage^ bi)
            {
                // Add the BitmapImage to the source list.
                // The update will be reflected in the ListView.
                m_targetImages->Append(bi);
            });
        }        
    });
}

사용자 정의 개체를 끌려면

DataPackage::Properties 결합형 컨테이너에 삽입하여 사용자 정의 개체를 끌 수 있습니다. 이 경우 DataPackage에서 데이터를 알 수 없으므로 데이터 형식을 설명하는 문자열을 제공해야 합니다. 끌기 작업에서 형식 문자열은 앱 전용입니다. 따라서 보편적으로 이해되는 이름을 선택할 필요는 없습니다. 데이터를 검색할 때 동일한 문자열을 제공하면 됩니다. 이 예에서는 모든 항목에 대해 동일한 키가 제공되지만 각 항목마다 개별 키를 제공할 수도 있습니다.

다음 예제에서는 바인딩 가능한 클래스 City가 있고 하나 이상의 City 개체를 GridView에서 ListView로 끌려 한다고 가정합니다.


    [Windows::UI::Xaml::Data::Bindable]
    public ref class City sealed
    {
    public:
        City(Platform::String^ name, int pop)
        {
            this->Name = name;
            this->Population = pop;
        }
        property Platform::String^ Name;
        property int Population;
    };

끌기:


void DragDrop::MainPage::GridView_DragItemsStarting_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::DragItemsStartingEventArgs^ e)
{
    for (auto item : e->Items)
    {    
        // If you want to drop only a subset of the dragged items,
        // then make each key unique.    
        e->Data->Properties->Insert("MyApp.MyCity", item);
    }
}

놓기:

C++의 놓기 작업에서는 DataPackage에서 항목을 검색하고 다시 City의 원본 유형에 캐스팅하고 드롭 대상의 데이터 원본에 복사합니다.


void DragDrop::MainPage::ListViewDropTarget_Drop_1(Platform::Object^ sender, Windows::UI::Xaml::DragEventArgs^ e)
{    
    DataPackageView^ dpView = e->Data->GetView();
    for (auto prop : dpView->Properties)
    {
        auto city = safe_cast<City^>(prop->Value);
        m_dropTargetItems->Append(city);
    }  
}

 

 

표시:
© 2015 Microsoft