터치 조작

터치가 사용자의 기본 입력 방법이 될 것 이란 가정 하에 앱을 디자인 합니다. Uwp 컨트롤을 사용 하는 경우 UWP 앱에서 무료로 제공 하므로 터치 패드, 마우스 및 펜/스타일러스에 대 한 지원에 추가 프로그래밍이 필요 하지 않습니다.

그러나 터치에 최적화 된 UI는 기존 UI에 대해 항상 더 우수한 것은 아닙니다. 둘 다 기술 및 응용 프로그램에 고유한 장점과 단점을 제공 합니다. 터치 우선 UI로 이동에서 터치, 터치 패드, 펜/스타일러스, 마우스 및 키보드 입력 간의 핵심 차이점을 이해 하는 것이 중요 합니다.

중요 한 api: Windows. U. Xaml. Input, Windows입니다. U. 코어, Windows. 장치. 입력

많은 장치에는 하나 이상의 손가락 (또는 터치 접점)을 입력으로 사용 하도록 지 원하는 다중 터치 스크린이 있습니다. 터치 접점 및 해당 움직임은 다양 한 사용자 상호 작용을 지 원하는 터치 제스처 및 조작으로 해석 됩니다.

Windows 앱은 터치 입력 처리를 위한 다양 한 메커니즘을 포함 하 여 사용자가 자신 있게 탐색할 수 있는 몰입 형 환경을 만들 수 있도록 합니다. 여기서는 Windows 앱에서 touch 입력을 사용 하는 기본 사항을 다룹니다.

터치 상호 작용에는 다음 세 가지 작업이 필요 합니다.

  • 터치를 구분 하는 디스플레이입니다.
  • 해당 디스플레이에서 하나 이상의 손가락에 대 한 직접 접촉 (또는 디스플레이에 근접 센서가 있고 가리키기 검색을 지 원하는 경우에 근접)입니다.
  • 터치 접점 이동 (또는 시간 임계값에 따라 부족).

터치 센서에서 제공 되는 입력 데이터는 다음과 같을 수 있습니다.

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

터치 입력에는 일반적으로 화면에서 요소를 직접 조작 하는 작업이 포함 됩니다. 요소는 적중 테스트 영역 내의 모든 터치 접촉에 즉시 응답 하 고 제거를 포함 하 여 모든 후속 접촉 이동에 적절 하 게 반응 합니다.

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

지원 되는 모든 입력 장치 유형에 서 앱 기능이 일관 되 게 노출 되는지 확인 합니다. 필요한 경우 키보드 상호 작용에 대 한 텍스트 입력 또는 마우스 및 펜에 대 한 UI affordances 같은 형식의 간접 입력 모드를 사용 합니다.

일반적인 입력 장치 (예: 마우스 및 키보드)는 많은 사용자에 게 친숙 하 고 매력적인 것을 명심 하세요. 이를 통해 속도, 정확성 및 tactile 피드백을 제공할 수 있습니다.

모든 입력 장치에 대 한 고유 하 고 고유한 상호 작용 환경을 제공 하 여 가장 광범위 한 기능 및 기본 설정을 지원 하 고 최대한 광범위 한 대상 그룹에 적합 하며 더 많은 고객을 앱에 활용할 수 있습니다.

터치 상호 작용 요구 사항 비교

다음 표에서는 터치 최적화 Windows 앱을 디자인할 때 고려해 야 하는 입력 장치 간의 몇 가지 차이점을 보여 줍니다.

요인터치 조작마우스, 키보드, 펜/스타일러스 상호 작용터치 패드
정밀도Fingertip의 연락처 영역이 단일 x-y 좌표 보다 크므로 의도 하지 않은 명령 활성화 가능성이 높아집니다.마우스 및 펜/스타일러스가 정확한 x-y 좌표를 제공 합니다.마우스와 동일 합니다.
접촉 영역의 모양은 이동 전체에서 변경 됩니다. 마우스 움직임 및 펜/스타일러스 스트로크는 정확한 x-y 좌표를 제공 합니다. 키보드 포커스는 명시적입니다.마우스와 동일 합니다.
대상 지정을 지 원하는 마우스 커서가 없습니다.마우스 커서, 펜/스타일러스 커서 및 키보드 포커스는 모두 대상 지정을 지원 합니다.마우스와 동일 합니다.
인간 분석하나 이상의 손가락을 사용 하는 직선 동작이 어렵기 때문에 Fingertip 이동은 정확 하지 않습니다. 이는 직접 조인트의 곡률 및 동작과 관련 된 조인트 수가 원인입니다.마우스 또는 펜/스타일러스를 사용 하 여 직선 동작을 수행 하는 것은 화면에서 커서 보다 실제 거리가 짧아 지도록 하는 것이 더 쉽습니다.마우스와 동일 합니다.
디스플레이 장치의 터치 표면의 일부 영역은 장치에서 손가락 및 사용자의 그립 때문에 도달 하기 어려울 수 있습니다.키보드에서 탭 순서를 통해 컨트롤에 액세스할 수 있는 동안 마우스 및 펜/스타일러스가 화면 부분에 도달할 수 있습니다. 핑거 및 그립은 문제가 될 수 있습니다.
개체는 하나 이상의 편리 하거나 사용자의 손을 통해 가려져 있을 수 있습니다. 이를 폐색 이라고 합니다.간접 입력 장치는 폐색를 발생 시 키 지 않습니다.마우스와 동일 합니다.
개체 상태터치는 두 가지 상태 모델을 사용 합니다. 디스플레이 장치의 터치 표면은 작업 (켜기) 또는 그렇지 않음 (꺼짐)입니다. 추가 시각적 피드백을 트리거할 수 있는 가리키기 상태가 없습니다.

마우스, 펜/스타일러스 및 키보드는 모두 세 가지 상태 모델을 표시 합니다. up (off), down (on) 및 가리키기 (포커스)를 제공 합니다.

가리키기를 통해 사용자는 UI 요소와 관련 된 도구 설명을 탐색 하 고 학습할 수 있습니다. 가리키기 및 포커스 효과는 대화형으로 사용 되는 개체를 릴레이 하 고 대상 지정에도 도움을 줍니다.

마우스와 동일 합니다.
풍부한 상호 작용터치 표면에서 다중 터치: 여러 입력 요소를 편리 하 게 지원 합니다.단일 입력 지점을 지원 합니다.터치와 동일 합니다.
는 누르기, 끌기, 슬라이딩, 집기 및 회전과 같은 제스처를 통해 개체의 직접 조작을 지원 합니다.마우스, 펜/스타일러스 및 키보드로 직접 조작 하는 것은 간접 입력 장치에 대 한 지원이 없습니다.마우스와 동일 합니다.

참고

간접 입력은 25 년간의 구체화를 통해 이점을 누릴 수 있습니다. 가리키기 트리거 도구 설명 등의 기능은 터치 패드, 마우스, 펜/스타일러스 및 키보드 입력 전용 UI 탐색을 해결 하도록 설계 되었습니다. 이와 같은 UI 기능은 이러한 다른 장치에 대 한 사용자 환경을 손상 시 키 지 않고 터치식 입력을 통해 제공 되는 풍부한 환경을 위해 다시 디자인 되었습니다.

터치 피드백 사용

앱과 상호 작용 하는 동안 적절 한 시각적 피드백을 통해 사용자가 앱과 Windows 플랫폼에서 상호 작용을 해석 하는 방법을 인식 하 고 학습 하 고 조정할 수 있습니다. 시각적 피드백은 성공적인 상호 작용, 릴레이 시스템 상태, 제어의 의미를 개선 하 고, 오류를 줄이고, 사용자가 시스템 및 입력 장치를 이해 하 고 상호 작용 하는 데 도움을 줄 수 있습니다.

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

대상 지정

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

  • 터치 대상 크기

    크기 지침 지우기는 응용 프로그램이 쉽고 안전 하 게 대상으로 지정할 수 있는 개체와 컨트롤을 포함 하는 친숙 한 UI를 제공 하도록 합니다.

  • 접촉 기 하 도형

    핑거의 전체 연락처 영역에 따라 가장 가능성이 높은 대상 개체가 결정 됩니다.

  • Scrubbing

    그룹 내의 항목은 손가락 사이에서 손가락을 끌어서 쉽게 대상으로 다시 지정 됩니다 (예: 라디오 단추). 손가락을 떼면 현재 항목이 활성화됩니다.

  • Rocking

    조밀 압축 된 항목 (예: 하이퍼링크)은 손가락을 누르고, 슬라이딩 하지 않고 항목을 앞뒤로 rocking 쉽게 대상으로 지정 됩니다. 폐색로 인해 현재 항목은 도구 설명 또는 상태 표시줄을 통해 식별 되 고 터치가 릴리스되면 활성화 됩니다.

정확도

다음을 사용 하 여 찾아낼 상호 작용을 설계 합니다.

  • 사용자가 콘텐츠와 상호 작용할 때 원하는 위치에서 더 쉽게 중지할 수 있는 스냅 지점입니다.
  • 약간의 호로 이동 하는 경우에도 세로 또는 가로 패닝에 도움이 될 수 있는 방향성 "레일"입니다. 자세한 내용은 패닝에 대 한 지침을 참조 하세요.

폐색

Finger 및 핸드 폐색은 다음을 통해 방지할 수 있습니다.

  • UI 크기 조정 및 위치 지정

    Fingertip 연락처 영역에 완전히 포함 될 수 없도록 UI 요소를 충분히 크게 만듭니다.

    가능 하면 연락처 영역 위에 메뉴 및 팝업을 배치 합니다.

  • 도구 설명

    사용자가 개체에 대 한 핑거 연락처를 유지 관리 하는 경우 도구 설명을 표시 합니다. 이는 개체 기능을 설명 하는 데 유용 합니다. 사용자는 도구 설명이 호출 되지 않도록 개체에서 fingertip를 끌 수 있습니다.

    작은 개체의 경우 fingertip 연락처 영역에 포함 되지 않도록 도구 설명을 오프셋 합니다. 이는 대상을 지정 하는 데 유용 합니다.

  • 전체 자릿수에 대 한 핸들

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

타이밍

직접 조작을 위해 시간 제한 모드를 변경 하지 않습니다. 직접 조작은 개체의 실시간 실제 실시간 처리를 시뮬레이션 합니다. 이 개체는 손가락이 이동 될 때 응답 합니다.

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

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

  • 상호 작용 중에 즉각적인 시각적 피드백을 통해 사용자는 더 많은 작업을 수행 하 고 제어할 수 있습니다.
  • 직접 조작은 시스템을 쉽게 탐색할 수 있도록 합니다. 즉, 사용자가 쉽게 논리적이 고 직관적인 방식으로 작업을 통해 다시 이동할 수 있습니다.
  • 개체에 직접적으로 영향을 주는 상호 작용은 보다 직관적이 고 검색 가능 하며 기억 하기 쉬운 상호 작용입니다. 모호 하거나 추상적인 상호 작용에 의존 하지 않습니다.
  • 사용자가 임의로 및 보이지 않는 임계값에 도달 해야 하므로 시간이 지정 된 상호 작용은 수행 하기 어려울 수 있습니다.

또한 다음 사항을 적극 권장 합니다.

  • 조작은 사용 된 손가락 수로 구분 되어서는 안 됩니다.

  • 상호 작용은 복합 조작을 지원 해야 합니다. 예를 들어 손가락을 끌어 이동 하는 동안 확대/축소 합니다.

  • 상호 작용은 시간으로 구분 되어서는 안 됩니다. 동일한 상호 작용은이를 수행 하는 데 걸리는 시간에 관계 없이 동일한 결과를 가져야 합니다. 시간 기반 활성화는 사용자에 대 한 필수 지연 및 직접 조작의 몰입 형 특성과 시스템 응답성의 인식을 모두 야기 합니다.

    참고

    이에 대 한 예외는 특정 시간 제한 상호 작용을 사용 하 여 학습 및 탐색을 지 원하는 경우입니다 (예: 누르고 있는 경우).

  • 적절 한 설명 및 시각적 신호는 고급 상호 작용 사용에 상당한 영향을 미칠 수 있습니다.

앱 보기

앱 보기의 이동/스크롤 및 확대/축소 설정을 통해 사용자 상호 작용 환경을 조정 합니다. 앱 뷰에서는 사용자가 앱과 해당 콘텐츠를 액세스 하 고 조작 하는 방법을 설명 합니다. 뷰는 관성, 콘텐츠 경계 바운스 및 끌기 지점과 같은 동작도 제공합니다.

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

확대/축소 설정은 ScrollViewer 컨트롤에서 지 원하는 광학 확대/축소 및 의미 체계 확대 /축소 컨트롤 모두에 적용 됩니다. 의미 체계 확대/축소는 단일 뷰 내에서 많은 관련 데이터 또는 콘텐츠를 표시 하 고 탐색 하기 위한 터치 최적화 기술입니다. 이 기능은 두 가지 고유한 분류 모드 또는 확대/축소 수준을 사용 하 여 작동 합니다. 이는 단일 뷰 내에서 패닝 및 스크롤 하는 것과 유사 합니다. 패닝 및 스크롤은 의미 체계 확대/축소와 함께 사용할 수 있습니다.

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

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

사용자 지정 터치 상호 작용

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

중요

Windows 11 이상

일부 3 ~ 4 손가락 터치 상호 작용은 기본적으로 Windows 앱에서 더 이상 작동 하지 않습니다.

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

응용 프로그램 내에서 3 또는 4 손가락 상호 작용을 지원 하기 위해 시스템에서 이러한 상호 작용을 처리할지 여부를 지정 하는 새로운 사용자 설정이 도입 되었습니다.

Bluetooth 장치가 >> "3 개 및 4 손가락 터치 제스처"를 터치 합니다.

"설정" (기본값)으로 설정 된 경우 시스템은 3 손가락 및 4 손가락 상호 작용을 모두 처리 합니다. 즉, 앱은이를 지원할 수 없습니다.

"Off"로 설정 되 면 앱에서 3 ~ 4 손가락의 상호 작용을 지원할 수 있습니다. 이러한 상호 작용은 시스템에서 처리 되지 않습니다.

응용 프로그램에서 이러한 상호 작용을 지원 해야 하는 경우이 설정을 사용자에 게 알리고 해당 페이지에 설정 앱을 시작 하는 링크를 제공 하는 것이 좋습니다 (-설정: 장치-터치). 자세한 내용은 Windows 설정 앱 시작을 참조 하세요.

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

  • 정적 제스처 이벤트는 상호 작용이 완료 된 후에 트리거됩니다. 제스처 이벤트에는 , DoubleTapped, righttapped상태 및 누르고있습니다.

    Istapenabled, IsDoubleTapEnabled, IsRightTapEnabledisholdingenabledfalse로 설정 하 여 특정 요소에서 제스처 이벤트를 사용 하지 않도록 설정할 수 있습니다.

  • Pointerpressedpointerpressed 과 같은 포인터 이벤트는 포인터 동작을 포함 하 여 각 터치 연락처에 대 한 하위 수준 세부 정보를 제공 하 고, 누르기 및 릴리스 이벤트를 구분 하는 기능을 제공 합니다.

    포인터는 통합 이벤트 메커니즘을 사용 하는 제네릭 입력 형식입니다. 터치, 터치 패드, 마우스 또는 펜으로 사용할 수 있는 활성 입력 소스에서 화면 위치와 같은 기본 정보를 노출 합니다.

  • ManipulationStarted와 같은 조작 제스처 이벤트는 진행 중인 조작을 나타냅니다. 사용자가 요소를 터치 하 고 사용자가 손가락을 뗄 때까지 또는 조작이 취소 될 때까지 계속 해 서 실행을 시작 합니다.

    조작 이벤트에는 확대/축소, 패닝 또는 회전과 같은 다중 터치 상호 작용이 포함 되며, 끌기와 같은 관성 및 속도 데이터를 사용 하는 상호 작용이 포함 됩니다. 조작 이벤트에서 제공하는 정보는 수행된 조작 형식을 확인하지 않고 오히려 위치, 변환 델타 및 속도와 같은 데이터를 포함합니다. 이 터치 데이터를 사용 하 여 수행 해야 하는 상호 작용의 유형을 결정할 수 있습니다.

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

이름 Type 설명
정적 제스처 한 손가락을 화면에 터치 하 고 리프트 합니다.
길게 누르기 정적 제스처 한 손가락은 화면에 접촉 하 여 제자리에 유지 됩니다.
슬라이드 조작 제스처 하나 이상의 손가락이 화면을 터치 하 고 동일한 방향으로 이동 합니다.
살짝 밀기 조작 제스처 하나 이상의 손가락이 화면을 터치 하 고 짧은 거리를 동일한 방향으로 이동 합니다.
않을 조작 제스처 두 개 이상의 손가락이 화면을 터치 하 고 시계 방향 또는 반시계 방향 호에서 이동 합니다.
손가락 모으기 조작 제스처 두 개 이상의 손가락이 화면을 터치하고 더 가깝게 이동합니다.
Stretch 조작 제스처 두 개 이상의 손가락이 화면을 터치하고 더 멀리 이동합니다.

제스처 이벤트

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

포인터 이벤트

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

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

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

이벤트 또는 클래스 설명
PointerPressed 한 손가락으로 화면을 터치할 때 발생합니다.
PointerReleased 동일한 터치 컨택이 해제될 때 발생합니다.
PointerMoved 포인터를 화면에서 끌 때 발생합니다.
PointerEntered 포인터가 요소의 적중 테스트 영역에 들어가면 발생합니다.
PointerExited 포인터가 요소의 적중 테스트 영역을 종료할 때 발생합니다.
PointerCanceled 터치 연락처가 비정상적으로 손실되면 발생합니다.
PointerCaptureLost 포인터 캡처가 다른 요소에 의해 수행되면 발생합니다.
PointerWheelChanged 마우스 휠의 델타 값이 변경되고 터치 패드를 섞을 때 발생합니다.
PointerRoutedEventArgs 모든 포인터 이벤트에 대한 데이터를 제공합니다.

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

먼저 이름이 인 사각형이 Extensible Application Markup Language(XAML)에 만들어집니다.

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

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

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 이벤트 처리기는 RectangleHeightWidth를 증가시키고 PointerReleasedPointerExited 이벤트 처리기는 HeightWidth를 다시 시작 값으로 설정합니다.

// 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 이벤트에 대한 데이터를 제공합니다.
ManipulationInertiaStartingRoutedEventArgs ManipulationInertiaStarting 이벤트에 대한 데이터를 제공합니다.
ManipulationVelocities 조작이 발생하는 속도를 설명합니다.
ManipulationCompletedRoutedEventArgs ManipulationCompleted 이벤트에 대한 데이터를 제공합니다.

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

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

참고

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

다음 예제에서는 ManipulationDelta 이벤트를 사용하여 Rectangle에서 슬라이드 상호 작용을 처리하고 화면을 통해 이동하는 방법을 보여줍니다.

먼저 라는 사각형이높이너비가 200인 XAML에서 만들어집니다.

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

다음으로 Rectangle 를 번역하기 위해 이라는 전역 TranslateTransform이 만들어집니다. ManipulationDelta 이벤트 수신기는 Rectangle 지정되며 사각형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 이벤트 처리기에서 Rectangle의 위치는 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()을 호출합니다.

Dos 및 don't's

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

샘플

보관 샘플