언어: HTML | XAML

끌어서 놓기 시퀀스 애니메이션(XAML)

Applies to Windows and Windows Phone

끌어서 놓기 애니메이션은 사용자가 손가락이나 입력 장치(마우스 또는 스타일러스 등)로 개체를 이동할 때 사용할 수 있습니다. 대표적인 끌어서 놓기 동작에는 목록 내에서 단일 항목의 위치를 변경하거나 한 항목을 다른 항목의 위에 놓는 경우가 포함됩니다.

참고  사용자가 개체를 이동하는 경우에만 끌어서 놓기 애니메이션을 사용하세요. 다른 방식으로 개체를 이동하려면 위치 변경 애니메이션을 사용하세요.

이 애니메이션 집합은 다음 API로 구성됩니다.

기본 끌기 지원은 XAML용 ListViewGridView에서 사용할 수 있습니다. 끌어서 놓기 애니메이션은 UI에서 이러한 애니메이션을 사용하고 이러한 애니메이션을 얻기 위해 다른 작업을 수행할 필요가 없는 경우 항목 지원을 위해 기본 제공됩니다. 그러나 이러한 애니메이션은 끌어서 놓기 기능을 다른 컨트롤, 특히 고유한 사용자 지정 컨트롤로 확장하는 경우에 유용합니다.

끌기 시작

모든 끌어서 놓기 애니메이션 시퀀스는 사용자가 개체 끌기를 시작할 때 표시되는 끌기 시작(DragItemThemeAnimation)으로 시작됩니다.

이 애니메이션은 끌기 원본(끌어오는 개체)과 영향을 받는 개체 하나 이상의 모양을 모두 수정합니다. 영향을 받는 개체는 끌어서 놓기 시퀀스에 대한 응답으로 위치가 변경될 수 있는 개체입니다. 예를 들어, 목록의 순서를 변경할 때 끌기 원본을 제외하고 목록의 모든 항목이 영향을 받는 개체가 됩니다. 목록상 위치가 바뀔 수 있기 때문입니다. 영향을 받는 항목에는 현재 작업에 따라 해당 항목의 위치가 변경되는 방식을 보여 주기 위해 애니메이션 효과가 적용됩니다. 끌기 원본의 영향을 받는 개체가 없는 경우도 있습니다.

다음 이미지는 끌기 시작 애니메이션의 영향을 받는 개체와 끌기 원본 간의 관계를 보여줍니다. 첫 번째 이미지는 사용자가 개체 끌기를 시작하기 전에 끌기 개체와 인접 항목을 보여 줍니다.

크기가 같은 네 개의 개체(개체 중 하나가 끌기 원본으로 표시)

사용자가 개체를 선택하고 끌기 시작하면 끈 개체가 더 커지고 영향을 받는 개체는 더 작아집니다.

네 개의 개체(끌기 원본의 크기는 커지고 영향을 받는 나머지 세 개의 개체는 크기가 작아짐)

다음 이미지는 인접 개체가 영향을 받지 않는 경우를 보여 줍니다.

네 개의 개체(끌기 원본의 크기는 커지고 나머지 세 개의 개체는 크기가 변경되지 않음)

끌기 끝

모든 끌어서 놓기 애니메이션 시퀀스는 사용자가 끈 개체를 놓을 때 표시되는 끌기 끝 애니메이션(DropTargetItemThemeAnimation)으로 끝납니다. 끌기 끝 애니메이션은 끌기 시작 애니메이션이 먼저 사용된 경우에만 사용됩니다.

끌기 끝 애니메이션은 끌기 원본(끌려는 개체)을 최종 위치에 배치합니다. 동시에 끌기 시작 애니메이션에 의해 적용된 끌기 원본 및 영향을 받는 항목의 시각적 변경 사항을 제거합니다. DropTargetItemThemeAnimation 호출에서 영향을 받은 개체는 항상 DragItemThemeAnimation 호출에 사용되는 것과 동일한 개체입니다.

다음 이미지는 끌기 끝 애니메이션의 영향을 받는 개체와 끌기 원본 간의 관계를 보여줍니다. 첫 번째 이미지는 사용자가 영향을 받는 개체 집합에 놓기 전 개체의 상태를 보여 줍니다. 끌기 원본은 목록에서 정상 크기보다 크고 목록에서 떨어져 표시됩니다. 영향을 받은 개체는 정상 크기보다 더 작게 표시됩니다.

네 개의 개체(끌기 원본의 크기는 커지고 크기가 작아진 영향을 받는 나머지 세 개의 개체 평면에서 떨어져 있음)

이 이미지는 놓은 개체가 다른 개체에 영향을 주지 않는 경우를 보여 줍니다. 끌기 원본은 다시 커지고 나머지 개체에서 떨어져 있지만 다른 개체는 정상 크기로 표시됩니다.

네 개의 개체(끌기 원본의 크기는 커지고 크기가 변경되지 않는 나머지 세 개의 개체에서 떨어져 있음)

사용자가 끌기 원본을 놓으면 모든 개체는 정상 크기로 돌아가며 필요에 따라 크기가 조정됩니다.

크기가 같은 네 개의 개체(개체 중 하나가 끌기 원본으로 표시)

사이 끌기

사용자가 개체(끌기 원본)를 다른 두 개체의 사이에 놓을 수 있는 지점으로 끌어갈 때 들어가기 사이 끌기 애니메이션(DragOverThemeAnimation)을 사용합니다. 이 애니메이션은 사용자가 해당 위치에 원본을 끌어서 놓도록 선택할 경우 그 자리를 마련하기 위해 간격을 떨어뜨려 놓을 영향을 받는 개체를 보여 줍니다.

다음 이미지는 끌기 원본의 이동에 따른 영향을 받는 개체의 움직임을 보여 줍니다. 첫 번째 이미지는 끌기 원본이 들어가기 사이 끌기 애니메이션을 트리거하기 전에 영향을 받는 개체를 보여 줍니다.

원래 위치에 표시되는 영향을 받는 두 개체 위에 겹쳐지는 끌기 원본 개체

다음 이미지에서 들어가기 사이 끌기 애니메이션은 끌기 원본의 양쪽에 있는 두 개체가 서로 떨어지도록 합니다.

분리되어 놓기 위치를 보여 주는 영향을 받는 두 개체 위에 겹쳐지는 끌기 원본 개체

기본 Windows 런타임 컨트롤 동작의 끌어서 놓기 애니메이션

  • ListViewItemGridViewItem: 이러한 템플릿은 끌기 및 여러 번 끌기에 대한 시각적 상태를 정의합니다. 끌기 시작 상태에는 두 부분에 적용된 DragItemThemeAnimation이 포함되고, 끌기 대상 상태에는 DropTargetItemThemeAnimation이 포함됩니다. DragOverThemeAnimation은 순서 변경 힌트 시각적 상태에 사용되며, 항목을 끌 수 있는 각 방향(아래쪽, 위쪽, 왼쪽, 오른쪽)에 대해 하나씩 있습니다.

사용자 지정 끌어서 놓기에 대한 이벤트 처리

끌어서 놓기에 대한 기본 요소 입력 이벤트를 지원하며 사용자 지정 컨트롤에서 끌어서 놓기 동작을 정의하려면 이러한 이벤트를 처리해야 합니다. 자세한 내용은 UIElement.Drop를 참조하세요.

다른 리소스

XAML ListView 및 GridView 필수 항목 샘플XAML ListView 및 GridView 사용자 지정 대화형 작업 샘플을 다운로드하고, 샘플을 실행하여 ListViewGridView 애니메이션을 직접 체험해 보세요.

이러한 애니메이션 사용의 디자인 모범 사례에 대해서는 끌어서 놓기 애니메이션의 지침 및 검사 목록을 참조하세요.

관련 항목

UI 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI 애니메이션
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

표시:
© 2014 Microsoft