UI Frontiers

Silverlight, Windows Phone 7 및 다중 터치 위치 조정

Charles Petzold

코드 샘플 다운로드

Charles Petzold많은 Silverlight 프로그래머에게 있어 Windows Phone 7에 대한 가장 흥분되는 소식은 두 가지 프로그래밍 인터페이스 중 하나로 Silverlight가 지원된다는 소식일 것입니다. (다른 하나는 XNA입니다.) Silverlight 프로그래머는 기존 지식을 활용하여 새로운 휴대폰용 응용 프로그램을 작성할 수 있으며 웹용 및 휴대폰용 Silverlight 프로그램에서 코드를 공유하도록 할 수 있습니다.

물론, 코드(특히 UI 코드)를 공유하는 것은 보이는 것보다 어려운 경우가 많습니다. 휴대폰에 사용되는 Silverlight 버전은 Silverlight for Windows Phone이라고 하며 상당 부분 Silverlight 3의 간소화된 구현이라고 할 수 있습니다. 공유 코드 응용 프로그램에 대해 고려하고 있다면 설명서를 자세하게 살펴보는 것이 좋습니다. 온라인 설명서에는 각 Silverlight 클래스마다 어떤 환경이 해당 클래스를 지원하는지가 나와 있습니다. 각 클래스 내에서 속성, 메서드 및 이벤트 목록에 아이콘으로 Windows Phone 7 지원 여부가 표시됩니다.

웹용 Silverlight 응용 프로그램은 키보드, 마우스 그리고 종종 멀티 터치를 통해 사용자 입력을 받습니다. Windows Phone 7 프로그램의 경우 멀티 터치가 주요 입력 수단입니다. 마우스는 없으며, 휴대폰에 하드웨어 키보드가 있는 경우도 있지만 Silverlight 프로그램은 온전히 가상 키보드, 즉 SIP(가상 입력판)의 존재에 의존하고 TextBox 컨트롤을 통해서만 작동할 수 있습니다.

여러분의 기존 Silverlight 응용 프로그램이 키보드나 마우스 입력을 직접 받지 않고 전적으로 컨트롤에 의존한다면 멀티 터치로 변환하는 데 문제가 없습니다. 또한 프로그램 자체에 마우스 논리가 포함되어 있는 경우 휴대폰으로 프로그램을 이식할 때 이러한 논리를 유지할 수 있습니다.

휴대폰에서는 주 터치 이벤트가 마우스 이벤트로 변환되므로 기존 마우스 논리가 문제 없이 작동합니다. 주 터치 이벤트는 다른 손가락을 화면에 대기 전까지 화면을 처음 터치한 손가락의 전체 움직임입니다.

마우스에서 멀티 터치로 전환하려면 약간의 고려가 필요합니다. Silverlight for the Web 및 Silverlight for Windows Phone에서는 모두 정적 Touch.FrameReported 이벤트를 지원하지만 이 이벤트는 멀티 터치에 대해서는 다소 저수준의 인터페이스입니다. 이 이벤트에 대해서는 2010년 3월호에 실린 필자의 기사 “Finger Style: Silverlight의 멀티 터치 지원”(msdn.microsoft.com/magazine/ee336026)에서 자세하게 다룬 적이 있습니다.

Silverlight for Windows Phone은 Surface SDK부터 시작된 이후로 지금까지 WPF(Windows Presentation Foundation)에 포함되어 있던 조작 이벤트의 하위 집합을 지원합니다. 이것은 멀티 터치가 단계적으로 주류로 자리 잡는 과정을 보여 주는 한 예입니다. 휴대폰은 이동과 크기 변경 기능만 지원하고 회전 기능은 지원하지 않으며 관성을 구현하지 않습니다. 다만 관성의 경우 직접 구현하는 데 필요한 정보는 충분히 제공됩니다. 이러한 조작 이벤트는 아직 웹 버전의 Silverlight에서는 지원되지 않습니다.

요약하면 Silverlight for the Web 및 Silverlight for Windows Phone 간에 코드를 공유하려면 마우스 이벤트나 Touch.FrameReported를 사용해야 한다는 것입니다.

Thumb에 대한 고려

그러나 다른 방법도 있습니다. 조작 이벤트의 변환만 지원되면 되고, 입력의 출처가 마우스인지 터치인지 신경 쓰고 싶지 않다면 이 지원을 아주 단순한 형태로 제공하는 컨트롤을 사용할 수 있습니다. 바로 Thumb 컨트롤입니다.

Thumb을 처음 접해 보는 경우도 있을 것입니다. Thumb 컨트롤은 System.Windows.Controls.Primitives 네임스페이스에 숨겨져 있으며 주로 ScrollBar와 Slider 템플릿에 사용하기 위한 것이지만, 다른 작업에도 사용할 수 있으며, 필자는 최근에 조작 이벤트의 변환 기능을 위한 고수준 구현에 Thumb을 사용하는 방법을 생각해 보았습니다.

Thumb은 진정한 "멀티" 터치 컨트롤은 아니며 한 번에 한 터치만 지원합니다. 그러나 Thumb에 대해 자세하게 살펴보면 터치 컴퓨팅 지원과 함께 Silverlight 응용 프로그램 및 Windows Phone 7 응용 프로그램 간의 코드 공유를 실험해 볼 수 있는 기회가 됩니다.

Thumb은 다음과 같은 세 가지 이벤트를 정의합니다.

  • DragStarted는 사용자가 손가락이나 마우스로 처음 컨트롤을 터치하면 발생합니다.
  • DragDelta는 화면에 대한 손가락이나 마우스의 상대적인 움직임을 나타냅니다.
  • DragCompleted는 손가락이나 마우스를 떼었음을 나타냅니다.

DragDelta 이벤트에는 마지막 이벤트 이후 마우스나 손가락의 움직임을 나타내는 이벤트 인수인 HorizontalChange와 VerticalChange 속성이 있습니다. 일반적으로 TranslateTransform 집합의 X 및 Y 속성에 대한 증분 변경을 드래그 가능한 요소의 RenderTransform 속성이나 Canvas.Left 및 Canvas.Top 연결 속성에 더하는 방법으로 이 이벤트를 처리합니다.

기본 상태의 Thumb은 단순한 편입니다. 다른 컨트롤과 마찬가지로 Thumb은 허용된 공간을 채우도록 HorizontalAlignment와 VerticalAlignment 속성이 Stretch로 설정됩니다. 그렇지 않으면 Silverlight Thumb은 4픽셀 사각형이 됩니다. Silverlight for Windows Phone에서 Thumb은 48픽셀 사각형이지만 보이기에는 12픽셀 크기의 투명한 테두리로 네 면이 둘러싸인 24픽셀 사각형입니다.

최소한 Thumb에서 명시적으로 Height와 Width를 설정해야 합니다. 그림 1에는 Silverlight와 Windows Phone 7 버전이 나란히 나와 있는데, 휴대폰에서는 기본 light-on-dark 색상 테마가 사용되었습니다. 두 경우에 모두 Height와 Width를 72로 설정하고 Background를 Blue로 설정했으며 Silverlight 버전에서는 Thumb을 눌렀을 때 그라디언트로 변경됩니다. 두 가지 Thumb은 모두 Foreground 속성에는 영향을 받지 않습니다.

image: The Silverlight and Windows Phone Thumb Controls

그림 1 Silverlight 및 Windows Phone의 Thumb 컨트롤

Thumb의 크기를 조정하는 데서 그치지 않고 ControlTemplate을 적용해서 컨트롤의 모양을 다시 정의하는 경우도 많습니다. 이 ControlTemplate은 매우 간단합니다.

컨트롤 제어

사용자가 화면에서 비트맵을 끌어서 놓을 수 있는 간단한 컨트롤을 원한다고 가정해 보겠습니다. 아주 간단한 방법을 원한다면 Image 요소와 Thumb을 단일 셀 Grid에 넣고 Thumb을 Image와 같은 크기로 겹쳐 놓을 수 있습니다. Thumb의 ControlTemplate이 투명한 사각형인 경우 Thumb은 보이지는 않지만 드래그 이벤트는 여전히 발생시킵니다.

일반 Silverlight와 Windows Phone 7 프로젝트에서 모두 사용 가능하도록 이러한 컨트롤을 만들어 보겠습니다. 여기에서는 사용자가 Windows Phone 7 개발자 도구(xbox.http://xbox.create.msdn.com)를 설치했다고 가정합니다. 이러한 도구를 사용하면 Visual Studio에서 Windows Phone 7 프로젝트를 만들 수 있습니다.

일반적인 Silverlight 4 프로젝트를 만들고 DragImage라고 이름을 지정하는 것으로 시작합니다. 결과 DragImage 솔루션에는 Silverlight 프로그램 자체인 일반적인 DragImage 프로젝트와 HTML 또는 ASP.NET 페이지에서 Silverlight 프로그램을 호스트하는 DragImage.Web 프로젝트가 포함됩니다.

다음은 Windows Phone 응용 프로그램 유형의 새 프로젝트를 솔루션에 추가하고, 프로젝트의 이름을 DragImage.Phone으로 지정합니다. 휴대폰이나 휴대폰 에뮬레이터의 프로그램 목록에서 이 이름이 나오는 것을 원하지는 않을 것이므로 WMAppManifest.xml 파일의 App 태그에서 Title 특성에 있는 표시 이름을 변경할 수 있습니다.

DragImage.Web 프로젝트 또는 DragImage.Phone 프로젝트를 마우스 오른쪽 단추로 클릭하면 시작 프로젝트로 설정을 선택하고 일반 Silverlight 프로그램 또는 Windows Phone 7 프로그램으로 실행할 수 있는 컨텍스트 메뉴가 열립니다. Visual Studio의 도구 모음 드롭다운을 사용하면 휴대폰 프로그램을 실제 휴대폰 장치나 휴대폰 에뮬레이터로 배포할 수 있습니다. 드롭다운이 Windows Phone 7 장치로 설정되고 연결된 휴대폰이 없는 경우 Visual Studio는 프로젝트를 빌드하지 않습니다.

DragImage 프로젝트(일반 Silverlight 프로젝트)에서 Silverlight 사용자 컨트롤 유형의 새 항목을 추가하고 이름을 DraggableImage라고 지정합니다. 보통 때와 마찬가지로 Visual Studio는 이 컨트롤의 DraggableImage.xaml과 DraggableImage.xaml.cs 파일을 만듭니다.

그림 2에는 컨트롤의 시각적 트리가 있는 DraggableImage.xaml이 나옵니다. LayoutRoot라는 바깥쪽 표준 Grid는 컨트롤의 컨테이너 크기 전체를 차지하며, 안쪽 Grid는 왼쪽 위 테두리에 정렬되고 바깥쪽 Grid 내에서 움직일 수 있도록 RenderTransform 속성이 TranslateTransform으로 할당됩니다. 이 안쪽 Grid에는 투명 사각형 하나를 포함하는 시각적 트리로 Template 속성이 설정된 Thumb 컨트롤과 Image 요소가 있습니다.

그림 2 DraggableImage.xaml

<UserControl x:Class="DragImage.DraggableImage"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Name="ctrl">
    
  <Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left"
          VerticalAlignment="Top">
      <Image Name="image" Stretch="None"
             Source="{Binding ElementName=ctrl, Path=Source}" />
      <Thumb DragDelta="OnThumbDragDelta">
        <Thumb.Template>
          <ControlTemplate>
            <Rectangle Fill="Transparent" />
          </ControlTemplate>
        </Thumb.Template>
      </Thumb>
      <Grid.RenderTransform>
        <TranslateTransform x:Name="translate" />
      </Grid.RenderTransform>
    </Grid>
  </Grid>
</UserControl>

Image 요소의 Source 속성은 컨트롤 자체의 Source 속성에 바인딩되었음을 볼 수 있습니다. 이 속성은 그림 3에 나오는 DraggableImage.xaml.cs 파일에 정의되어 있습니다. 이 파일은 또한 TranslateTransform의 X와 Y 속성을 변경하여 Thumb의 DragDelta 이벤트를 처리합니다.

그림 3 DraggableImage.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace DragImage {
  public partial class DraggableImage : UserControl {
    public static readonly DependencyProperty SourceProperty =
      DependencyProperty.Register("Source",
      typeof(ImageSource),
      typeof(DraggableImage),
      new PropertyMetadata(null));

    public DraggableImage() {
      InitializeComponent();
    }

    public ImageSource Source {
      set { SetValue(SourceProperty, value); }
      get { return (ImageSource)GetValue(SourceProperty); }
    }

    void OnThumbDragDelta(object sender, DragDeltaEventArgs args) {
      translate.X += args.HorizontalChange;
      translate.Y += args.VerticalChange;
    }
  }
}

이 컨트롤을 Windows Phone 7 프로젝트와 공유하려면 DragImage.Phone 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 | 기존 항목을 선택하여 기존 항목 추가 대화 상자를 엽니다. DragImage 프로젝트 디렉터리로 이동하고 DraggableImage.xaml 및 DraggableImage.xaml.cs를 선택합니다. 추가 단추를 클릭하지는 말고 추가 단추 오른쪽에 있는 작은 화살표를 클릭하고 링크로 추가를 선택합니다. 이제 DragImage.Phone 프로젝트에 표시되는 파일에 작은 화살표가 추가되어 해당 파일이 두 프로젝트에서 공유된다는 것을 나타냅니다.

이제 DraggableImage 파일을 변경하면 두 프로젝트가 변경된 버전을 사용합니다.

이를 테스트하려면 비트맵이 필요합니다. 각 프로젝트의 Images 디렉터리에 비트맵을 저장합니다. 링크를 사용하여 Images 디렉터리에 비트맵을 추가하면 되므로 비트맵의 복사본을 만들 필요는 없습니다.

이제 MainPage.xaml 파일이 두 개 있는데, 하나는 일반 Silverlight 프로젝트용이고 다른 하나는 Windows Phone 7 프로젝트용입니다. Silverlight 프로젝트용 MainPage.xaml에 “local”이라는 XML 네임스페이스 바인딩을 추가합니다.

xmlns:local="clr-namespace:DragImage"

이제 DraggableImage를 페이지에 추가할 수 있습니다.

<Grid x:Name="LayoutRoot" Background="White">
  <local:DraggableImage 
    Source="Images/BuzzAldrinOnTheMoon.png" />
</Grid>

Windows Phone 7 프로젝트의 MainPage 클래스는 DragImage.Phone이라는 네임스페이스에 있지만 공유 DraggableImage 클래스는 DragImage 네임스페이스에 있습니다. DragImage 네임스페이스에 대한 XML 네임스페이스 바인딩이 필요하며 이를 “shared”로 지칭할 수 있습니다.

xmlns:shared="clr-namespace:DragImage"

이제 DraggableImage를 페이지의 콘텐츠 영역에 추가할 수 있습니다.

<Grid x:Name="ContentPanel" 
  Grid.Row="1" Margin="12,0,12,0">
  <shared:DraggableImage 
    Source="Images/BuzzAldrinOnTheMoon.png" />
</Grid>

이것이 웹용 및 Windows Phone 7용인 두 Silverlight 프로젝트 간에 컨트롤을 공유할 수 있는 가장 간단한 방법일 것입니다. 컨트롤에서 Thumb을 사용하므로 두 프로그램은 마우스와 터치로 모두 작동이 가능합니다.

DragImage 솔루션의 다운로드 코드에는 역시 이 컨트롤을 사용하는 WPF 프로그램인 DragImage.Wpf라는 프로젝트가 포함되어 있습니다. 그러나 일반적으로 Silverlight와 WPF 간에 컨트롤을 공유하기는 Silverlight와 Windows Phone 7 간에 컨트롤을 공유하는 것보다 어렵습니다.

색과 해상도

마우스와 터치 입력 외에도 Silverlight와 Windows Phone 7 간에 코드를 공유하려면 색과 비디오 해상도라는 두 가지 문제를 더 해결해야 합니다.

데스크톱의 경우 Silverlight는 흰색 배경에 검정색 텍스트를 표시합니다. 그러나 Silverlight 프로그램에서 SystemColors 클래스를 사용하면 사용자가 선택한 Windows 색을 표시할 수 있습니다. 기본적으로 Windows Phone 7의 경우 사용자가 흰색 바탕에 검은색을 사용하도록 색상 테마를 변경하지 않았다면 검은색 바탕에 흰색 텍스트를 표시합니다. Windows Phone 7에서는 프로그램이 선택된 색 구성표를 사용하는 데 도움이 되도록 PhoneForegroundBrush 및 PhoneBackgroundBrush와 같은 유용한 미리 정의된 리소스 키를 제공합니다.

Silverlight와 Windows Phone 7 간에 공유되고 명시적인 색을 사용하는 코드나 태그에서는 올바른 색을 사용하기 위해 현재 실행 중인 플랫폼을 알아내는 방법이 필요합니다.

비디오 해상도 문제는 조금 더 까다롭습니다. 모든 Silverlight 좌표에는 픽셀 단위가 사용되며 휴대폰에도 이 규칙이 적용됩니다. 일반적인 데스크톱 비디오 디스플레이는 100DPI(Dots Per Inch) 정도의 해상도를 가집니다. 예를 들어 1600 × 1200픽셀 또는 대각선으로 2000픽셀을 처리할 수 있는 21인치 비디오 디스플레이의 경우 해상도는 105DPI입니다. 기본적으로 Windows에서는 디스플레이 해상도가 96DPI라고 가정하지만 사용자는 가독성을 높이기 위해 이 값을 변경할 수 있습니다.

480 × 800픽셀, 대각선으로 933픽셀을 표시하는 Windows Phone 7 장치의 경우 화면이 대각선으로 3.5인치 크기라면 해상도는 약 264DPI가 되므로 데스크톱 디스플레이에 비해 2.75배 가량 해상도가 높습니다.

이것은 데스크톱에서는 문제가 없어 보이던 특정한 크기의 공유 요소가 휴대폰에서는 너무 작게 보일 수 있음을 의미합니다. 그러나 휴대폰의 사용 거리는 일반적으로 데스크톱 디스플레이보다 가까우므로 휴대폰에서 요소를 2.75배 크게 만들 필요는 없습니다.

엄지로 터치가 가능하려면 얼마나 커야 할까요? 필자가 아는 한 기준에서는 터치 대상의 너비와 높이가 9mm(또는 0.25인치)가 되어야 한다고 나와 있습니다. 해상도가 96DPI인 데스크톱 디스플레이에서 이는 34픽셀이지만 휴대폰에서는 93픽셀입니다.

한편 Windows Phone 7 장치에서 표준 단추의 높이는 72픽셀에 불과하지만 이 정도로 충분해 보입니다. 가장 좋은 방법은 사용하기 편리하면서도 지나치게 투박하지 않은 크기를 직접 찾아보는 것입니다.

조정

일반적으로 프로그램을 다른 플랫폼에 맞게 조정하는 데는 조건부 컴파일용 전처리기 지시문을 사용합니다. Silverlight 프로그램은 조건부 컴파일 기호 SILVERLIGHT를 정의하며, Windows Phone 7 프로그램은 SILVERLIGHT 및 PHONE을 정의합니다. 프로젝트 속성 페이지에서 빌드 탭을 선택하면 이러한 이를 볼 수 있습니다. 즉, 코드는 다음과 비슷한 형태가 됩니다.

#if PHONE
  // Code for Windows Phone 7
#else
  // Code for regular Silverlight
#endif

아니면 런타임에 Environment.OSVersion 개체에 액세스하여 작업을 조정할 수 있습니다. Platform 속성이 PlatformID.WinCE이고 Version.Major 속성이 7 이상인 경우 코드가 Windows Phone 7 장치(또는 Windows Phone 8이나 9)에서 실행되고 있는 것입니다.

이론적으로는 mc(markup-compatibility) 네임스페이스 정의된 AlternateContent와 Choice 태그를 사용해서 XAML 파일의 조건부 섹션을 정의하는 것이 가능하지만 Silverlight에서는 이러한 태그가 지원되지 않습니다.

그러나 XAML은 데이터 바인딩을 포함할 수 있으며 이러한 바인딩은 플랫폼에 따라 다른 개체를 참조할 수 있습니다. 또한 XAML에서 플랫폼에 따라 다른 개체를 검색하는 StaticResource 참조를 사용할 수 있습니다. TextTransform 프로그램에서 사용한 방법이 바로 이것입니다.

TextTransform 솔루션을 구축하는 데는 DragImage 솔루션을 구축할 때와 동일한 방법을 사용했습니다. 솔루션에는 TextTransform(Silverlight 프로그램), TextTransform.Web(Silverlight 프로그램을 호스트할 웹 브로젝트) 및 TextTransform.Phone(Windows Phone 7)의 세 프로젝트가 있습니다.

먼저 Silverlight 프로젝트에 UserControl에서 파생되는 TextTransformer 컨트롤을 만들었습니다. 이 컨트롤은 Silverlight 프로젝트와 Windows Phone 7 프로젝트 간에 공유됩니다. TextTransformer 컨트롤에는 테두리에 4개의 Thumb 컨트롤이 있는 Border로 둘러싸인 하드코드된 텍스트 문자열(단어 “TEXT”)이 있습니다. Thumb을 이동하면 Border와 TextBlock에 비유사(non-affine) 변환이 적용됩니다. Border에 의해 형성된 사변형에 오목한 테두리가 없어야 올바르게 작동합니다.

TextTransformer.xaml 파일은 Thumb에 대한 새 템플릿을 생성하지는 않지만 그림 4에 나오는 것처럼 Style 하나를 정의합니다.

그림 4 TextTransformer.xaml에 있는 Thumb Style

<Style x:Key="thumbStyle" TargetType="Thumb">
  <Setter Property="HorizontalAlignment" 
          Value="Left" />
  <Setter Property="VerticalAlignment" 
          Value="Top" />
  <Setter Property="Width" 
          Value="{StaticResource ThumbSize}" />
  <Setter Property="Height" 
          Value="{StaticResource ThumbSize}" />
  <Setter Property="RenderTransform">
    <Setter.Value>
      <TranslateTransform 
        X="{StaticResource HalfThumbOffset}"
        Y="{StaticResource HalfThumbOffset}" />
    </Setter.Value>
  </Setter>
</Style>

ThumbSize 및 HalfThumbOffset에 대한 참조를 확인하십시오. TextBlock은 속성 상속을 통해 올바른 Foreground 속성으로 텍스트를 표시하지만 Border는 동일한 전경색으로 명시적으로 색을 지정해야 합니다.

<Border Name="border"
        BorderBrush="{StaticResource ForegroundBrush}"
        BorderThickness="1">

이러한 리소스는 어디에 정의될까요? App.xaml에 정의됩니다. 일반적인 Silverlight 프로젝트의 App.xaml 파일에는 다음과 같은 내용이 포함된 Resources 컬렉션이 있습니다.

<Application.Resources>
  <SolidColorBrush x:Key="BackgroundBrush" Color="White" />
  <SolidColorBrush x:Key="ForegroundBrush" Color="Black" />
  <system:Double x:Key="ThumbSize">36</system:Double>
  <system:Double x:Key="HalfThumbOffset">-18</system:Double>
</Application.Resources>

Windows Phone 7 프로그램의 App.xaml 파일은 브러시 두 개에 대한 미리 정의된 리소스를 참조하고 더 큰 ThumbSize와 HalfThumbOffset 값을 정의합니다.

<Application.Resources>
  <SolidColorBrush x:Key="BackgroundBrush"
     Color="{StaticResource PhoneBackgroundColor}" />
  <SolidColorBrush x:Key="ForegroundBrush"
     Color="{StaticResource PhoneForegroundColor}" />
  <system:Double x:Key="ThumbSize">96</system:Double>
  <system:Double x:Key="HalfThumbOffset">-48</system:Double>
</Application.Resources>

그림 5에는 브라우저에서 실행 중인 프로그램이 나오며 그림 6에는 Windows Phone 7 에뮬레이터에서 실행 중인 프로그램이 나옵니다. 에뮬레이터는 휴대폰의 높은 픽셀 밀도를 보완하기 위해 원래 크기의 50%로 표시됩니다.

image: The TextTransform Program in the Browser

그림 5 브라우저에서의 TextTransform 프로그램

image: The TextTransform Program on the Phone Emulator

그림 6 휴대폰 에뮬레이터에서의 TextTransform 프로그램

이러한 기법을 활용하면 데스크톱과 휴대폰 간에 코드 공유를 실현할 수 있습니다. 이 주제에 대해 더 자세히 살펴보려면 Surface Toolkit for Windows Touch에 포함된 WPF 개발자용 SurfaceThumb 컨트롤에 주목하십시오. 이 컨트롤은 일반 Thumb 컨트롤과 비슷하지만 진정한 멀티 터치와 엄지로 튕기기 이벤트에 대한 지원이 추가되었습니다. 자세한 내용은 Surface Toolkit for Windows Touch 베타 페이지(msdn.microsoft.com/library/ee957351)를 참조하십시오.

Charles Petzold 는 오랫동안 MSDN Magazine에 기고해온 편집자이며, 그의 새 책 “Programming Windows Phone 7”은 bit.ly/cpebookpdf에서 무료로 다운로드할 수 있습니다.

이 문서를 검토하는 데 많은 도움을 주신 기술 전문가인 Doug Kramer와 Robert Levy에게 감사 인사를 전합니다.