내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

빠른 시작: Windows Phone 8의 터치 입력

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

Windows Phone 단말기에는 사용자가 탭, 터치 또는 축소와 같은 입력 제스처에 손가락 여러 개를 동시에 사용하는 기능을 제공하는 멀티 터치 화면이 있습니다. Windows Phone 에는 다양한 터치 입력을 처리하기 위한 여러 메커니즘이 있습니다. 이 빠른 시작에서는 Windows Phone 앱에서 터치 입력 사용에 대한 기본 사항을 다룹니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

Windows Phone 에서는 대부분 사용자 입력이 터치로 이루어집니다. Windows Phone 에서는 사용자가 자연스러운 제스처를 사용하여 휴대폰과 상호 작용할 수 있는 멀티 터치 화면을 지원합니다. 터치 및 제스처 지원을 앱에 추가하면 사용자 화면이 크게 향상될 수 있습니다. Windows Phone 앱에서 터치 입력을 처리하기 위한 몇 가지 옵션이 제공됩니다.

  • 마우스 이벤트. 마우스 이벤트는 탭 및 두 번 탭과 같은 단순한 한 손가락 제스처를 감지할 수 있습니다. 마우스 이벤트 처리기를 앱에 빠르게 추가할 수 있으며 이러한 처리기는 기본 터치 지원을 제공하는 간편한 방법입니다.

  • 조작 이벤트. ManipulationStartedManipulationDelta와 같은 조작 이벤트를 사용하여 멀티 터치 제스처 및 관성/속도 데이터를 사용하는 제스처와 같은 보다 복잡한 제스처를 처리합니다.

  • 하위 수준 터치 이벤트. TouchPoint 클래스는 Windows Phone 에서 터치 입력을 처리하는 다른 방법입니다. TouchPoint는 이 빠른 시작에서 다루지 않는 하위 수준 입력 시스템입니다.

  • 제스처 클래스. 휴대폰에서 터치와 제스처를 처리하는 네 번째 방법은 Windows Phone Toolkit 의 GestureServiceGestureListener 클래스를 사용하는 것입니다. Codeplex의 Toolkit 웹 사이트에서 도구 키트를 다운로드할 수 있습니다. 도구 키트는 오픈 소스 프로젝트이며 Windows Phone 의 핵심 부분이 아닙니다.

제스처는 터치 입력 데이터를 탭, 터치 및 축소와 같은 일반적인 동작 집합으로 해석하는 상위 수준 방법입니다. 다음 표에서는 Windows Phone 에서 사용되는 몇 가지 일반적인 제스처에 대해 설명합니다.

제스처

설명

손가락으로 화면을 터치하고 뗍니다.

두 번 탭

한 손가락으로 화면을 두 번 탭하고 손가락을 뗍니다.

잠깐 누르기

손가락으로 화면을 터치하고 잠깐 누르고 있습니다.

드래그

손가락으로 화면을 터치하고 아무 방향으로나 이동합니다.

터치

손가락으로 화면을 드래그한 다음 멈추지 않고 위로 올립니다.

손가락 모았다 펴기

두 손가락으로 화면을 누르고 이동합니다.

MouseLeftButtonUpMouseMove와 같은 Windows Phone 마우스 이벤트를 사용하여 탭과 같은 단순한 한 손가락 제스처를 지원할 수 있습니다.

축소와 같은 멀티 터치 제스처 및 터치와 같이 관성/속도 데이터를 사용하는 제스처의 경우 조작 이벤트가 필요합니다. 조작 이벤트에서 제공하는 정보는 수행된 제스처 형태가 아니라 위치, 변환 델타 및 속도와 같은 터치 데이터입니다. 이 터치 데이터를 사용하여 사용된 제스처 유형을 결정할 수 있습니다. 이 정보를 해당 제스처로 변환하는 것은 Windows Phone 개발자의 책임입니다. 그러나 Windows Phone Toolkit 에서는 GestureService 및 GestureListener 클래스를 통해 제스처 지원을 제공합니다.

Windows Phone 앱에서 터치 입력을 사용하도록 설정하는 가장 간편한 방법은 마우스 이벤트를 사용하는 것입니다. 마우스 이벤트는 탭, 두 번 탭과 같은 한 손가락 제스처로 제한되며 속도 기반 제스처를 지원하지 않습니다. 화면의 한 손가락 터치는 화면에 손가락을 놓을 경우 MouseLeftButtonDown, 손가락을 올릴 경우 MouseLeftButtonUp 및 손가락으로 화면을 드래그할 경우 MouseMove와 같은 해당 Windows Phone 마우스 이벤트로 변환됩니다. Windows Phone 에서 사용하는 다른 마우스 이벤트는 MouseLeaveMouseEnter입니다. 마우스 이벤트에 대한 이벤트 인수는 MouseButtonEventArgs입니다. Button 클래스에 대한 Click 이벤트를 사용하여 버튼에 대한 탭 제스처 지원을 쉽게 추가할 수도 있습니다.

다음 예제에서는 MouseLeftButtonDown, MouseLeftButtonUpMouseLeave 이벤트를 사용하여 Rectangle 개체에 대한 탭 제스처를 처리하는 방법을 보여 줍니다.

먼저 TestRectangle이라는 Rectangle은 XAML로 만들어지고 MouseLeftButtonDown, MouseLeftButtonUpMouseLeave 이벤트에 대한 이벤트 처리기가 추가됩니다.

<Rectangle Name="TestRectangle"
    Height="100"
    Width="200"
    Fill="Blue"
    MouseLeftButtonDown="Tap_LeftButtonDown"
    MouseLeftButtonUp="Tap_LeftButtonUp"
    MouseLeave="Tap_MouseLeave" />

다음으로 마우스 이벤트에 대한 이벤트 처리기가 만들어집니다. MouseLeftButtonDown 이벤트 처리기는 RectangleHeightWidth를 증가시킵니다. MouseLeftButtonUp 이벤트 처리기는 HeightWidth를 다시 시작 값으로 설정합니다. 마지막으로 MouseLeave 이벤트 처리기도 HeightWidth를 다시 시작 값으로 설정합니다.

private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Change the size of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}
private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
private void Tap_MouseLeave(object sender, MouseEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Finger moved out of Rectangle before the mouse up event.
    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

다음 이미지에서는 샘플을 보여 줍니다.

Touch input mouse events

다음 샘플에서는 Button에서 Click 이벤트를 사용하여 탭 제스처를 처리하는 방법을 보여 줍니다.

먼저 Button이 XAML로 만들어지고 Click 이벤트에 대한 이벤트 처리기가 추가됩니다.

<Button Name="TestButton"
    Content="Tap"
    Height="100" Width="200"
    Click="TestButton_Click" />

Click 이벤트 처리기에서 버튼 콘텐츠는 "탭"과 "다시 탭" 간에 전환됩니다. 사용자가 버튼을 탭할 때마다 텍스트가 변경됩니다.

private void TestButton_Click(object sender, RoutedEventArgs e)
{
    Button button = sender as Button;
    if (null != button)
    {
        // Toggle Button.Conten between "Tap" and "Tap Again!"
        if (button.Content as string == "Tap")
        {
            button.Content = "Tap Again!";
        }
        else
        {
            button.Content = "Tap";
        }
    }
}

다음 이미지에서는 샘플을 보여 줍니다.

Touch input mouse events

Windows Phone 앱에서 여러 손가락 제스처나 속도 데이터를 사용하는 제스처를 지원하려면 조작 이벤트를 사용해야 합니다. 조작 이벤트를 사용하여 터치, 드래그, 축소 및 길게 누르기와 같은 제스처를 감지할 수 있습니다. 다음 표에는 Windows Phone 의 조작 이벤트 및 클래스가 나열됩니다.

이벤트/클래스

설명

ManipulationStarted 이벤트

입력 장치가 UIElement에서 조작을 시작할 때 발생합니다.

ManipulationDelta 이벤트

입력 장치에서 조작 중에 위치를 변경하면 발생합니다.

ManipulationCompleted 이벤트

UIElement에서 조작 및 관성이 완료될 때 발생합니다.

ManipulationStartedEventArgs 클래스

ManipulationStarted 이벤트에 대한 데이터를 제공합니다.

ManipulationDeltaEventArgs 클래스

ManipulationDelta 이벤트에 대한 데이터를 제공합니다.

ManipulationVelocities 클래스

조작이 발생하는 속도를 설명합니다.

ManipulationCompletedEventArgs 클래스

ManipulationCompleted 이벤트에 대한 데이터를 제공합니다.

Windows Phone 의 제스처 이벤트는 일련의 조작 이벤트로 구성됩니다. 각 제스처는 사용자가 화면을 터치할 때와 같은 ManipulationStarted 이벤트로 시작됩니다. 다음으로 ManipulationDelta 이벤트가 하나 이상 실행됩니다. 예를 들어 화면을 터치하고 손가락으로 화면을 드래그하면 여러 ManipulationDelta 이벤트가 실행됩니다. 마지막으로 제스처가 완료되면 ManipulationCompleted 이벤트가 발생합니다.

Windows Phone 에뮬레이터 를 사용하여 조작 이벤트 코드를 테스트하는데 터치 화면 모니터가 없는 경우에는 테스트할 항목이 제한됩니다. 에뮬레이터는 마우스를 통한 멀티 터치 제스처를 지원하지 않습니다. 다음 예제와 같이 변환을 테스트할 수 있습니다.

다음 예제에서는 ManipulationDelta 이벤트를 사용하여 드래그 제스처를 처리하는 방법을 보여 줍니다. 샘플에서는 화면을 드래그할 수 있는 Rectangle을 만듭니다.

먼저 TestRectangle이라는 Rectangle이 XAML에서 200HeightWidth를 사용하여 만들어집니다.

<Rectangle Name="TestRectangle"
    Width="200"
    Height="200"
    Fill="Blue" />

다음으로 Rectangle을 변환하기 위해 dragTranslation이라는 전역 TranslateTransform이 만들어집니다. ManipulationDelta 이벤트를 처리하기 위한 이벤트 처리기가 Rectangle에 추가되고 dragTranslationRectangleRenderTransform에 추가됩니다. 마지막으로 ManipulationDelta 이벤트 처리기에서 Rectangle 위치가 DeltaManipulation 속성의 TranslateTransform을 통해 업데이트됩니다.

// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;
// Constructor
public MainPage()
{
    InitializeComponent();
    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta +=
    new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}
void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.DeltaManipulation.Translation.X;
    dragTranslation.Y += e.DeltaManipulation.Translation.Y;
}

다음 이미지에서는 샘플을 보여 줍니다.

Touch input manipulation events

사용자 인터페이스를 디자인하는 방법에 따라 터치 입력을 통해 앱을 얼마나 간편하게 사용할 수 있는지가 달라질 수 있습니다. Windows Phone 에 대한 Windows Phone의 디자인 라이브러리에서는 앱에서 터치 입력을 사용하기 위한 모범 사례에 대해 설명합니다. 특히 Windows Phone의 탐색, 방향 및 제스처Windows Phone과 상호 작용 및 유용성을 확인하세요. 읽어 보는 것이 좋지만 터치 및 UI 디자인에 관련된 몇 가지 강조점은 다음과 같습니다.

  • 앱의 모든 단순 명령은 한 손가락을 사용하여 수행해야 합니다.

  • 터치 컨트롤이 즉시 응답해야 합니다. 사용자가 화면을 터치하는 시점과 컨트롤이 응답하는 시점 간에 발생하는 약간의 지연도 눈에 띄고 사용자 환경에 영향을 미칠 수 있습니다.

  • 즉각적인 시각 또는 청각적 피드백을 제공합니다.

  • 작업에 오랜 시간이 걸리는 경우 증분 피드백을 제공해 보세요.

  • 터치 대상은 9 mm 또는 34픽셀보다 작지 않아야 합니다.

  • 드물게 컨트롤이 더 작을 수도 있지만 컨트롤은 7 mm 또는 26픽셀 정사각형보다 크거나 같게 만들어야 합니다.

  • 자주 사용되는 터치 컨트롤의 경우 컨트롤을 9 mm보다 크게 만들어 보세요.

  • 터치 가능한 컨트롤 간에 2 mm 또는 8픽셀을 제공해야 합니다.

  • 터치 대상은 터치 요소보다 클 수 있지만 더 작으면 안 됩니다.

  • 터치 요소는 터치 대상보다 60% 넘게 작으면 안 됩니다.

  • 세로로 제한된 UI의 직사각형 컨트롤이 누르기가 더 쉽습니다.

표시:
© 2015 Microsoft