터치 조작 개발자 가이드

2024-06-21

터치가 사용자의 주요 입력 방식이 될 것으로 예상하고 앱을 디자인하세요. UWP 컨트롤을 사용하는 경우, 터치패드, 마우스, 펜/스타일러스 지원은 UWP 앱에서 무료로 제공되므로 추가 프로그래밍이 필요하지 않습니다.

그러나 터치에 최적화된 UI가 항상 기존 UI보다 우수한 것은 아니라는 점을 명심하세요. 둘 다 기술과 애플리케이션에 고유한 장점과 단점을 제공합니다. 터치 우선식 UI로 전환할 경우 터치, 터치 패드, 펜/스타일러스, 마우스 및 키보드 입력 간의 주요 차이점을 이해하는 것이 중요합니다.

중요 API: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

많은 디바이스에는 하나 이상의 손가락(또는 터치 연락처)을 입력으로 사용할 수 있도록 지원하는 멀티 터치 스크린이 있습니다. 터치 접촉 및 해당 동작은 터치 제스처와 조작으로 해석되어 다양한 사용자 상호 작용을 지원합니다.

Windows 앱에는 터치식 입력을 처리하는 다양한 메커니즘이 있어 사용자가 안심하고 이용할 수 있는 몰입도 높은 작업 환경을 만들 수 있습니다. 본 문서는 Windows 앱에서 터치식 입력을 사용하는 기본 사항을 설명합니다.

터치 조작에는 다음 세 가지가 필요합니다.

터치 감지 디스플레이입니다.
디스플레이에 하나 이상의 손가락을 직접 접촉(또는 디스플레이에 근접 센서가 있고 가리키기 감지를 지원하는 경우의 근접성)합니다.
터치 접촉의 이동(또는 시간 임계값에 따라 부족).

터치 센서에서 제공하는 입력 데이터는 다음과 같습니다.

이동, 회전, 크기 조정 또는 이동과 같은 하나 이상의 UI 요소를 직접 조작하기 위한 물리적 제스처로 해석됩니다. (반면 속성 창, 대화 상자 또는 기타 UI 어포던스를 통해 요소와 상호 작용하는 것은 간접 조작으로 간주됩니다.)
마우스 또는 펜과 같은 대체 입력 방법으로 인식됩니다.
펜으로 그린 잉크 스트로크 스머징과 같은 다른 입력 메서드의 측면을 보완하거나 수정하는 데 사용됩니다.

터치 입력은 일반적으로 화면의 요소를 직접 조작하는 것입니다. 요소는 적중 테스트 영역 내의 모든 터치 접촉에 즉시 반응하며, 제거를 포함하여 터치 접촉의 후속 움직임에 적절하게 반응합니다.

사용자 지정 터치 제스처 및 상호 작용은 신중하게 설계해야 합니다. 직관적이고 응답성이 뛰어나고 검색할 수 있어야 하며 사용자가 자신 있게 앱을 탐색할 수 있어야 합니다.

앱 기능이 지원되는 모든 입력 디바이스 유형에서 일관되게 노출되는지 확인합니다. 필요한 경우 키보드 상호 작용을 위한 텍스트 입력 또는 마우스 및 펜에 대한 UI 어포던스와 같은 일부 형태의 간접 입력 모드를 사용합니다.

기존 입력 장치(예: 마우스 및 키보드)는 많은 사용자에게 친숙하고 매력적이라는 점을 기억하세요. 터치로는 불가능한 속도, 정확도 및 촉각 피드백을 제공할 수 있습니다.

모든 입력 장치에 고유하고 차별화된 상호 작용 경험을 제공하면 다양한 기능과 선호도를 지원하고, 최대한 많은 잠재 고객에게 어필하며, 더 많은 고객을 앱으로 끌어들일 수 있습니다.

터치 조작 요구 사항 비교

다음 표에는 터치 최적화된 Windows 앱을 디자인할 때 고려해야 할 입력 디바이스 간의 몇 가지 차이점이 나와 있습니다.

요소	터치 조작	마우스, 키보드, 펜/스타일러스 상호 작용	터치패드
정밀성	손가락 끝의 접촉 면적이 단일 x-y 좌표보다 크면 의도하지 않은 명령이 활성화될 가능성이 높아집니다.	마우스와 펜/스타일러스는 정확한 x-y 좌표를 제공합니다.	마우스와 동일합니다.
	접촉 영역의 모양은 이동하는 동안 변경됩니다.	마우스 이동 및 펜/스타일러스 스트로크는 정확한 x-y 좌표를 제공합니다. 키보드 포커스는 명시적입니다.	마우스와 동일합니다.
	대상 지정을 도와주는 마우스 커서가 없습니다.	마우스 커서, 펜/스타일러스 커서 및 키보드 포커스는 모두 대상 지정에 도움이 됩니다.	마우스와 동일합니다.
인체 해부학	하나 이상의 손가락으로 일직선으로 움직이기 어렵기 때문에 손가락 끝의 움직임이 부정확합니다. 이것은 손 관절의 곡률과 움직임에 관련된 관절의 수 때문입니다.	마우스 또는 펜/스타일러스를 제어하는 손이 화면의 커서보다 더 짧은 물리적 거리를 이동하기 때문에 직선 동작을 수행하는 것이 더 쉽습니다.	마우스와 동일합니다.
	디스플레이 장치의 터치 표면의 일부 영역은 손가락 자세와 장치의 사용자 그립으로 인해 닿기 어려울 수 있습니다.	마우스와 펜/스타일러스는 화면의 모든 부분에 도달할 수 있지만, 모든 컨트롤은 탭 순서를 통해 키보드로 액세스할 수 있어야 합니다.	손가락 자세와 그립이 문제가 될 수 있습니다.
	개체는 하나 이상의 손가락 끝이나 사용자의 손에 의해 가려질 수 있습니다. 이를 폐색이라고 합니다.	간접 입력 디바이스는 폐색을 일으키지 않습니다.	마우스와 동일합니다.
개체 상태	터치는 디스플레이 장치의 터치 표면이 터치(켜짐) 또는 터치되지 않음(꺼짐)의 두 가지 상태 모델을 사용합니다. 추가적인 시각적 피드백을 트리거할 수 있는 가리키기 상태가 없습니다.	마우스, 펜/스타일러스 및 키보드는 모두 위쪽(꺼림), 아래쪽(켜기) 및 가리키기(포커스)의 세 가지 상태 모델을 노출합니다. 가리키기를 사용하면 사용자가 UI 요소와 연결된 도구 설명을 탐색하고 학습할 수 있습니다. 가리키기 및 포커스 효과는 어떤 개체가 대화형인지 전달하고 타겟팅에 도움을 줄 수 있습니다.	마우스와 동일합니다.
풍부한 상호 작용	터치 표면에서 다중 터치: 여러 입력 지점(손가락 끝)을 지원합니다.	단일 입력 지점을 지원합니다.	터치와 동일합니다.
풍부한 상호 작용	탭, 끌기, 슬라이딩, 집기 및 회전과 같은 제스처를 통해 개체를 직접 조작할 수 있습니다.	마우스, 펜/스타일러스 및 키보드가 간접 입력 장치이므로 직접 조작을 지원하지 않습니다.	마우스와 동일합니다.

참고 항목

간접 입력은 25년 이상 개선되어 왔습니다. 가리키기 트리거 도구 설명과 같은 기능은 터치 패드, 마우스, 펜/스타일러스 및 키보드 입력을 위한 UI 탐색을 해결하도록 설계되었습니다. 이와 같은 UI 기능은 다른 디바이스의 사용자 경험을 손상시키지 않으면서도 터치 입력이 제공하는 풍부한 경험을 위해 새롭게 디자인되었습니다.

터치 피드백 사용

앱과의 조작 중에 적절한 시각적 피드백이 제공되면 사용자들이 앱 및 Windows 플랫폼에서 조작이 해석되는 방식을 인식하고, 익히고, 적응하는 데 도움이 됩니다. 시각적 피드백은 성공적인 상호 작용을 나타내고, 시스템 상태를 전달하고, 제어 감각을 개선하고, 오류를 줄이고, 사용자가 시스템 및 입력 디바이스를 이해하도록 돕고, 상호 작용을 장려할 수 있습니다.

시각적 피드백은 사용자가 위치에 따라 정확도 및 정밀도가 필요한 활동에 터치 입력을 사용하는 경우에 중요합니다. 터치 입력이 감지될 때마다 피드백을 표시하여 사용자가 앱 및 해당 컨트롤에서 정의한 사용자 지정 대상 지정 규칙을 이해할 수 있도록 지원합니다.

대상 지정

대상 지정은 다음을 통해 최적화됩니다.

터치 대상 크기

명확한 크기 지침을 통해 애플리케이션은 쉽고 안전하게 타겟팅할 수 있는 개체와 컨트롤이 포함된 편안한 UI를 제공할 수 있습니다.
접촉 지오메트리

손가락의 전체 접촉 영역은 가장 가능성이 큰 대상 개체를 결정합니다.
스크러빙

그룹 내의 항목은 손가락 사이(예: 라디오 단추)를 끌어 쉽게 다시 대상으로 지정할 수 있습니다. 터치가 해제되면 현재 항목이 활성화됩니다.
흔들림

밀집된 항목(예: 하이퍼링크)은 손가락을 아래로 누르고 슬라이딩하지 않고 항목을 앞뒤로 흔들면 쉽게 다시 지정할 수 있습니다. 폐색으로 인해 현재 항목은 도구 설명 또는 상태 막대를 통해 식별되며 터치가 해제될 때 활성화됩니다.

정확도(Accuracy)

다음을 사용하여 엉성한 상호 작용을 위해 디자인합니다.

사용자가 콘텐츠와 상호 작용할 때 원하는 위치에서 더 쉽게 중지할 수 있는 스냅포인트입니다.
손이 약간 호를 그리며 움직일 경우에도 가로 또는 세로로 이동하도록 도와주는 방향 “길”입니다. 자세한 내용은 이동에 대한 지침을 참조하세요.

폐색

손가락과 손 폐색은 다음을 통해 방지됩니다.

UI의 크기 및 위치 지정

손끝 접촉 영역으로 완전히 가릴 수 없도록 UI 요소를 충분히 크게 만듭니다.

가능하면 대화 상대 영역 위에 메뉴와 팝업을 배치합니다.
도구 설명

사용자가 개체에 손가락을 대고 있으면 도구 설명을 표시합니다. 개체 기능을 설명하는 데 유용합니다. 사용자는 도구 설명을 호출하지 않도록 개체에서 손가락 끝을 개체에서 드래그할 수 있습니다.

작은 개체의 경우 도구 설명이 손가락 끝 접촉 영역에 가려지지 않도록 오프셋합니다. 이 패턴은 대상 지정에 유용 합니다.
정밀도를 위한 핸들

정밀도가 필요한 경우(예: 텍스트 선택) 정확도를 높이기 위해 오프셋되는 선택 핸들을 제공합니다. 자세한 내용은 텍스트 및 이미지 선택 지침(Windows 런타임 앱)을 참조하세요.

타이밍

직접 조작을 위해 시간 제한이 있는 모드 변경은 피하세요. 직접 조작은 개체를 직접 실시간으로 물리적으로 조작하는 시뮬레이션입니다. 손가락을 움직이면 개체가 반응합니다.

반면에 시간 제한 상호 작용은 터치 상호 작용 후에 발생합니다. 시간이 지정된 상호 작용은 일반적으로 시간, 거리 또는 속도와 같은 보이지 않는 임계값에 따라 수행될 명령을 결정합니다. 시간 제한 상호 작용은 시스템이 작업을 수행할 때까지 시각적 피드백이 없습니다.

직접 조작은 시간이 지정된 상호 작용에 비해 다양한 이점을 제공합니다.

상호 작용 중에 즉각적인 시각적 피드백을 통해 사용자는 참여도와 자신감, 통제력을 높일 수 있습니다.
직접 조작을 사용하면 되돌릴 수 있으므로 시스템을 보다 안전하게 탐색할 수 있습니다. 사용자는 논리적이고 직관적인 방식으로 작업을 쉽게 되돌릴 수 있습니다.
개체에 직접 영향을 미치고 실제 상호 작용을 모방하는 상호 작용은 더 직관적이고 검색 가능하며 기억에 남습니다. 모호하거나 추상적인 상호 작용에 의존하지 않습니다.
사용자가 임의 및 보이지 않는 임계값에 도달해야 하므로 시간 지정된 상호 작용을 수행하기 어려울 수 있습니다.

또한 다음을 강력하게 권장합니다.

조작은 사용된 손가락 수로 구분해서는 안 됩니다.
상호 작용은 복합 조작을 지원해야 합니다. 예를 들어 손가락을 끌어 이동하면서 확대/축소하려면 손가락 모으기를 사용합니다.
상호 작용은 시간별로 구분해서는 안 됩니다. 동일한 상호 작용은 수행하는 데 걸린 시간에 관계없이 동일한 결과를 가져야 합니다. 시간 기반 활성화는 사용자에게 강제 지연을 발생시키고 직접 조작의 몰입감과 시스템 응답성에 대한 인식을 떨어뜨립니다.

참고 항목

학습 및 탐색에 도움이 되도록 특정 시간이 지정된 조작(예: 길게 누르기)을 사용하는 경우는 예외입니다.
적절한 설명 및 시각적 신호는 고급 상호 작용을 사용하는 데 큰 영향을 줍니다.

앱 보기

앱 보기의 이동/스크롤 및 확대/축소 설정을 통해 사용자 조작 환경을 조정합니다. 앱 보기는 사용자가 앱과 해당 콘텐츠에 액세스하고 조작하는 방법을 결정합니다. 보기는 관성, 콘텐츠 경계 바운스 및 스냅 포인트와 같은 동작도 제공합니다.

ScrollViewer 컨트롤의 이동 및 스크롤 설정은 보기의 내용이 뷰포트 내에 맞지 않는 경우 사용자가 단일 보기 내에서 탐색하는 방법을 결정합니다. 예를 들어 단일 보기는 잡지 또는 책의 페이지, 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범일 수 있습니다.

확대/축소 설정은 광학 확대/축소(ScrollViewer 컨트롤에서 지원됨) 및 Semantic Zoom 컨트롤 모두에 적용됩니다. 시맨틱 줌은 단일 보기 내에서 대규모 관련 데이터 또는 콘텐츠 집합을 표시하고 탐색하기 위한 터치에 최적화된 기술입니다. 두 가지 분류 모드 또는 확대/축소 수준을 사용하여 작동합니다. 이는 단일 보기 내에서 이동 및 스크롤하는 것과 유사합니다. 이동 및 스크롤은 시맨틱 줌과 함께 사용할 수 있습니다.

앱 보기 및 이벤트를 사용하여 이동/스크롤 및 확대/축소 동작을 수정합니다. 이렇게 하면 포인터 및 제스처 이벤트를 처리하여 가능한 것보다 원활한 상호 작용 환경을 제공할 수 있습니다.

앱 보기에 대한 자세한 내용은 컨트롤, 레이아웃 및 텍스트를 참조하세요.

사용자 지정 터치 조작

고유한 상호 작용 지원을 구현하는 경우 사용자는 앱의 UI 요소와 직접 상호 작용을 포함하는 직관적인 경험을 기대한다는 점을 명심하세요. 일관되고 검색 가능한 작업을 유지하기 위해 플랫폼 제어 라이브러리에서 사용자 지정 상호 작용을 모델링하는 것이 좋습니다. 이러한 라이브러리의 컨트롤은 표준 상호 작용, 애니메이션 물리 효과, 시각적 피드백 및 접근성을 포함한 완전한 사용자 상호 작용 환경을 제공합니다. 명확하고 잘 정의된 요구 사항이 있고 기본 상호 작용이 시나리오를 지원하지 않는 경우에만 사용자 지정 상호 작용을 만듭니다.

중요합니다

Windows 11 이상

일부 세 손가락 및 네 손가락 터치 조작은 기본적으로 Windows 앱에서 더 이상 작동하지 않습니다.

기본적으로 창을 전환하거나 최소화하고 가상 데스크톱을 변경하는 등의 작업을 위해 시스템에서 세 손가락 및 네 손가락 터치 조작을 사용합니다. 이제 이러한 조작이 시스템 수준에서 처리되기 때문에 이러한 변경으로 인해 앱 기능이 영향을 받을 수 있습니다.

애플리케이션 내에서 세 손가락 및 네 손가락 조작을 지원하기 위해 시스템에서 이러한 조작을 처리할지 여부를 지정하는 새로운 사용자 설정이 도입되었습니다.

Bluetooth & 디바이스 > 터치 > “세 손가락 및 네 손가락 터치 제스처”

“켜짐”(기본값)으로 설정된 경우 시스템은 3 손가락 및 4 손가락 조작을 모두 처리합니다. 앱에서는 이러한 기능을 지원할 수 없습니다.

“꺼짐”으로 설정되면 앱에서 3 손가락 및 4 손가락 조작을 지원할 수 있습니다. 이러한 조작은 시스템에서 처리되지 않습니다.

애플리케이션에서 이러한 조작을 지원해야 하는 경우 이 설정을 사용자에게 알리고 해당 페이지에 설정 앱을 시작하는 링크를 제공하는 것이 좋습니다(ms-settings:devices-touch). 자세한 내용은 Windows 설정 앱 시작을 참조하세요.

사용자 지정된 터치 지원을 제공하기 위해 다양한 UIElement 이벤트를 처리할 수 있습니다. 이러한 이벤트는 세 가지 추상화 수준으로 그룹화됩니다.

정적 제스처 이벤트는 상호 작용이 완료된 후 트리거됩니다. 제스처 이벤트에는 Tapped, DoubleTapped, RightTapped, 및 Holding이 포함됩니다.

IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled, 및 IsHoldingEnabled를 false로 설정하여 특정 요소에서 제스처 이벤트를 사용하지 않도록 설정할 수 있습니다.
PointerPressed 및 PointerMoved와 같은 포인터 이벤트는 포인터 동작 및 누름 및 릴리스 이벤트를 구분하는 기능을 포함하여 각 터치 접촉에 대해 낮은 수준의 세부 정보를 제공합니다.

포인터는 통합 이벤트 메커니즘을 사용하는 제네릭 입력 형식입니다. 터치, 터치 패드, 마우스 또는 펜일 수 있는 활성 입력 원본에 화면 위치와 같은 기본 정보를 노출합니다.
ManipulationStarted와 같은 조작 제스처 이벤트는 진행 중인 상호 작용을 나타냅니다. 사용자가 요소를 터치하면 실행되기 시작하여 사용자가 손가락을 떼거나 조작이 취소될 때까지 계속됩니다.

조작 이벤트에는 확대/축소, 이동 또는 회전과 같은 멀티 터치 상호 작용과 드래그와 같은 관성 및 속도 데이터를 사용하는 상호 작용이 포함됩니다. 조작 이벤트에서 제공하는 정보는 수행된 상호 작용의 형태를 식별하지 않고 위치, 변환 델타 및 속도와 같은 데이터를 포함합니다. 이 터치 데이터를 사용하여 수행해야 하는 상호 작용 유형을 확인할 수 있습니다.

UWP에서 지원하는 터치 제스처의 기본 집합은 다음과 같습니다.

속성	형식	설명
누르기	정적 제스처	한 손가락으로 화면을 터치하고 들어 올립니다.
길게 누르기	정적 제스처	한 손가락으로 화면을 터치하고 제자리에 머물러 있습니다.
슬라이드	조작 제스처	하나 이상의 손가락이 화면을 터치하고 같은 방향으로 이동합니다.
스와이프	조작 제스처	하나 이상의 손가락이 화면을 터치하고 같은 방향으로 짧은 거리를 이동합니다.
턴	조작 제스처	두 개 이상의 손가락으로 화면을 터치하고 시계 방향 또는 시계 반대 방향으로 원을 그리며 움직입니다.
손가락 모으기	조작 제스처	두 개 이상의 손가락이 화면을 터치하고 서로 가까이 이동합니다.
스트레칭	조작 제스처	두 개 이상의 손가락으로 화면을 터치하고 더 멀리 이동합니다.

제스처 이벤트

개별 컨트롤에 대한 자세한 내용은 컨트롤 목록을 참조하세요.

포인터 이벤트

포인터 이벤트는 터치, 터치 패드, 펜 및 마우스를 비롯한 다양한 활성 입력 소스에 의해 발생합니다(기존 마우스 이벤트를 대체함).

포인터 이벤트는 단일 입력 지점(손가락, 펜 팁, 마우스 커서)을 기반으로 하며 속도 기반 상호 작용을 지원하지 않습니다.

다음은 포인터 이벤트 및 관련 이벤트 인수 목록입니다.

이벤트 또는 클래스	설명
포인터프레스드	한 손가락으로 화면을 터치할 때 발생합니다.
포인터 해제	동일한 터치 접촉이 해제될 때 발생합니다.
포인터 이동	포인터를 화면 전체로 드래그할 때 발생합니다.
포인터 입력됨	포인터가 요소의 적중 테스트 영역에 들어갈 때 발생합니다.
PointerExited	포인터가 요소의 적중 테스트 영역을 벗어날 때 발생합니다.
포인터취소됨	터치 접촉이 비정상적으로 손실되면 발생합니다.
포인터캡처소실	포인터 캡처가 다른 요소에 의해 촬영되면 발생합니다.
포인터휠변경	마우스 휠의 델타 값이 변경되고 터치 패드에서 손가락을 모을 때 발생합니다.
PointerRoutedEventArgs	모든 포인터 이벤트에 대한 데이터를 제공합니다.

다음 예제에서는 PointerPressed, PointerReleased, 및 PointerExited 이벤트를 사용하여 Rectangle 개체에서 탭 상호 작용을 처리하는 방법을 보여줍니다.

먼저 XAML(Extensible Application Markup Language)에 으로 명명된 이 만들어집니다.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

다음으로 PointerPressed, PointerReleased, 및 PointerExited 이벤트에 대한 수신기가 지정됩니다.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

마지막으로 PointerPressed 이벤트 처리기는 사각형의 높이 및 넓이를 증가시키고 PointerReleased 및 PointerExited 이벤트 처리기는 높이 및 넓이를 다시 시작 값으로 설정합니다.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

조작 이벤트

속도 데이터가 필요한 여러 손가락 상호 작용 또는 상호 작용을 지원해야 하는 경우 앱에서 조작 이벤트를 사용합니다.

조작 이벤트를 사용하여 끌기, 확대/축소 및 유지와 같은 상호 작용을 검색할 수 있습니다.

참고 항목

터치 패드는 조작 이벤트를 발생시키지 않습니다. 대신 터치 패드 입력에 대한 포인터 이벤트가 발생합니다.

다음은 조작 이벤트 및 관련 이벤트 인수 목록입니다.

이벤트 또는 클래스	설명
ManipulationStarting 이벤트	조작 프로세서를 처음 만들 때 발생합니다.
ManipulationStarted 이벤트	입력 장치가 UIElement에 대한 조작을 시작할 때 발생합니다.
ManipulationDelta 이벤트	입력 디바이스에서 조작 중에 위치를 변경하면 발생합니다.
ManipulationInertiaStarting 이벤트	조작 중에 입력 장치와 UIElement 개체의 연결이 끊어지고 관성이 시작될 때 발생합니다.
ManipulationCompleted 이벤트	UIElement의 조작 및 관성은 완료되면 발생합니다.
ManipulationStartingRoutedEventArgs	ManipulationStarting 이벤트에 대한 데이터를 제공합니다.
ManipulationStartedRoutedEventArgs	ManipulationStarted 이벤트에 대한 데이터를 제공합니다.
ManipulationDeltaRoutedEventArgs	ManipulationDelta 이벤트에 대한 데이터를 제공하는 개체입니다.
매니퓰레이션 관성 시작 라우트 이벤트 인수	ManipulationInertiaStarting 이벤트에 대한 데이터를 제공합니다.
ManipulationVelocities	조작이 발생하는 속도를 설명합니다.
조작 완료 라우트를 지정하는 이벤트 매개변수	ManipulationCompleted 이벤트에 대한 데이터를 제공합니다.

제스처는 일련의 조작 이벤트로 구성됩니다. 각 제스처는 사용자가 화면을 터치하는 경우와 같이 ManipulationStarted 이벤트로 시작합니다.

다음으로 하나 이상의 ManipulationDelta 이벤트가 발생합니다. 예를 들어 화면을 터치한 다음 화면을 손가락으로 끕니다. 마지막으로 조작이 완료되면 ManipulationCompleted 이벤트가 발생합니다.

참고 항목

터치 스크린 모니터가 없는 경우 마우스 및 마우스 휠 인터페이스를 사용하여 시뮬레이터에서 조작 이벤트 코드를 테스트할 수 있습니다.

다음 예제에서는 ManipulationDelta 이벤트를 사용하여 사각형에서 슬라이드 상호 작용을 처리하고 화면을 가로질러 이동하는 방법을 보여 줍니다.

먼저 XAML에서 높이 및 touchRectangle가 200이고 이름이 인 사각형이 만들어집니다.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

다음으로 사각형을 번역하기 위해 이름이 dragTranslation로 명명된 전역 TranslateTransform이 만들어집니다. ManipulationDelta 이벤트 수신기는 사각형에 지정되고 dragTranslation이 사각형의 RenderTransform에 추가됩니다.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

마지막으로 ManipulationDelta 이벤트 처리기에서 사각형의 위치는 Delta 속성의 TranslateTransform을 사용하여 업데이트됩니다.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

라우트된 이벤트

여기에 멘션 모든 포인터 이벤트, 제스처 이벤트 및 조작 이벤트는 라우팅된 이벤트로 구현됩니다. 즉, 이벤트는 원래 이벤트를 발생시킨 개체가 아닌 다른 개체에서 처리될 수 있습니다. UIElement의 부모 컨테이너 또는 앱의 루트 페이지와 같은 개체 트리의 연속 부모는 원래 요소가 처리하지 않더라도 이러한 이벤트를 처리하도록 선택할 수 있습니다. 반대로 이벤트를 처리하는 모든 개체는 더 이상 부모 요소에 도달하지 않도록 처리된 이벤트를 표시할 수 있습니다. 라우트된 이벤트 개념 및 라우트된 이벤트에 대한 처리기를 작성하는 방법에 미치는 영향에 대한 자세한 내용은 이벤트 및 라우팅된 이벤트 개요를 참조하세요.

중요합니다

ScrollViewer 또는 ListView와 같이 스크롤할 수 있는 보기에서 UIElement에 대한 포인터 이벤트를 처리해야 하는 경우에는 UIElement.CancelDirectmanipulation()을 호출하여 보기의 요소에 대한 조작 이벤트 지원을 명시적으로 해제해야 합니다. 보기에서 조작 이벤트를 다시 사용하도록 설정하려면 UIElement.TryStartDirectManipulation()을 호출합니다.

권장 사항 및 금지 사항

터치 조작을 기본 예상 입력 방법으로 사용하여 애플리케이션을 디자인합니다.
모든 형식(터치, 펜, 스타일러스, 마우스 등)의 상호 작용에 대한 시각적 피드백을 제공합니다.
터치 대상 크기, 접촉 기하 도형, 스크러빙 및 흔들림을 조정하여 대상 지정을 최적화합니다.
맞춤 지점 및 방향 "레일"을 사용하여 정확도를 최적화합니다.
긴밀하게 압축된 UI 항목에 대한 터치 정확도를 향상시키는 데 도움이 되는 도구 설명과 핸들을 제공합니다.
가급적 시간 제한이 있는 상호작용은 사용하지 마세요(적절한 사용 예: 터치 및 홀드).
가능한 경우 조작을 구분하는 데 사용되는 손가락 수를 사용하지 마세요.

다음을 통해 공유

터치 조작 개발자 가이드

터치 조작 요구 사항 비교

터치 피드백 사용

대상 지정

정확도(Accuracy)

폐색

타이밍

앱 보기

사용자 지정 터치 조작

제스처 이벤트

포인터 이벤트

조작 이벤트

라우트된 이벤트

권장 사항 및 금지 사항

관련된 문서

샘플

보관 샘플

피드백

추가 리소스