연습: 첫 번째 터치 애플리케이션 만들기Walkthrough: Creating Your First Touch Application

WPFWPF 응용 프로그램이 터치에 응답할 수 있습니다.enables applications to respond to touch. 예를 들어, 하나를 사용 하 여 응용 프로그램을 조작할 수 있습니다 또는이 연습에서는 사용자가 이동할 수 있는 응용 프로그램을 만듭니다 원하는 터치 스크린과 같은 터치 감지 장치에서 손가락을 크기를 조정 하거나 터치를 사용 하 여 단일 개체를 회전 합니다.For example, you can interact with an application by using one or more fingers on a touch-sensitive device, such as a touchscreen This walkthrough creates an application that enables the user to move, resize, or rotate a single object by using touch.

전제 조건Prerequisites

이 연습을 완료하려면 다음 구성 요소가 필요합니다.You need the following components to complete this walkthrough:

  • Visual Studio.Visual Studio.

  • Windows Touch를 지 원하는 터치 스크린과 같은 터치식 입력을 허용 하는 장치입니다.A device that accepts touch input, such as a touchscreen, that supports Windows Touch.

또한 응용 프로그램을 만드는 방법의 기본적인 이해를 해야 WPFWPF, 특히 구독 하 고 이벤트를 처리 하는 방법입니다.Additionally, you should have a basic understanding of how to create an application in WPFWPF, especially how to subscribe to and handle an event. 자세한 내용은 연습: 내 첫 WPF 데스크톱 응용 프로그램합니다.For more information, see Walkthrough: My first WPF desktop application.

애플리케이션 작성Creating the Application

애플리케이션을 만들려면To create the application

  1. Visual Basic 또는 Visual C#에서 BasicManipulation이라는 새 WPF 애플리케이션 프로젝트를 만듭니다.Create a new WPF Application project in Visual Basic or Visual C# named BasicManipulation. 자세한 내용은 연습: 내 첫 WPF 데스크톱 응용 프로그램합니다.For more information, see Walkthrough: My first WPF desktop application.

  2. MainWindow.xaml의 내용을 다음 XAML을 사용 하 여 대체 합니다.Replace the contents of MainWindow.xaml with the following XAML.

    이 태그는 빨간색을 포함 하는 간단한 응용 프로그램을 만듭니다 RectangleCanvas합니다.This markup creates a simple application that contains a red Rectangle on a Canvas. 합니다 IsManipulationEnabled 의 속성을 Rectangle 조작 이벤트를 받을 수 있도록 true로 설정 됩니다.The IsManipulationEnabled property of the Rectangle is set to true so that it will receive manipulation events. 응용 프로그램을 등록 합니다 ManipulationStarting, ManipulationDelta, 및 ManipulationInertiaStarting 이벤트입니다.The application subscribes to the ManipulationStarting, ManipulationDelta, and ManipulationInertiaStarting events. 이동 논리를 포함 하는 이러한 이벤트는 Rectangle 사용자 조작 경우.These events contain the logic to move the Rectangle when the user manipulates it.

    <Window x:Class="BasicManipulation.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Move, Size, and Rotate the Square"
            WindowState="Maximized"
            ManipulationStarting="Window_ManipulationStarting"
            ManipulationDelta="Window_ManipulationDelta"
            ManipulationInertiaStarting="Window_InertiaStarting">
      <Window.Resources>
    
        <!--The movement, rotation, and size of the Rectangle is 
            specified by its RenderTransform.-->
        <MatrixTransform x:Key="InitialMatrixTransform">
          <MatrixTransform.Matrix>
            <Matrix OffsetX="200" OffsetY="200"/>
          </MatrixTransform.Matrix>
        </MatrixTransform>
    
      </Window.Resources>
    
      <Canvas>
        <Rectangle Fill="Red" Name="manRect"
                     Width="200" Height="200" 
                     RenderTransform="{StaticResource InitialMatrixTransform}"
                     IsManipulationEnabled="true" />
      </Canvas>
    </Window>
    
    
  3. Visual Basic의 경우 MainWindow.xaml의 첫 번째 줄을 사용 하는 경우 대체 x:Class="BasicManipulation.MainWindow" 사용 하 여 x:Class="MainWindow"입니다.If you are using Visual Basic, in the first line of MainWindow.xaml, replace x:Class="BasicManipulation.MainWindow" with x:Class="MainWindow".

  4. MainWindow 클래스를 다음 추가 ManipulationStarting 이벤트 처리기입니다.In the MainWindow class, add the following ManipulationStarting event handler.

    합니다 ManipulationStarting 이벤트가 발생할 때 WPFWPF 터치 감지 입력 개체를 조작 하기 시작 합니다.The ManipulationStarting event occurs when WPFWPF detects that touch input begins to manipulate an object. 코드는 조작의 위치를 기준으로 하도록 지정 합니다 Window 설정 하 여는 ManipulationContainer 속성입니다.The code specifies that the position of the manipulation should be relative to the Window by setting the ManipulationContainer property.

    void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
    {
        e.ManipulationContainer = this;
        e.Handled = true;
    }
    
    Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
        e.ManipulationContainer = Me
        e.Handled = True
    End Sub
    
  5. MainWindow 클래스를 다음 추가 ManipulationDelta 이벤트 처리기입니다.In the MainWindow class, add the following ManipulationDelta event handler.

    ManipulationDelta 이벤트 발생 터치 입력 위치를 변경 하 고 조작 하는 동안 여러 번 발생할 수 있습니다.The ManipulationDelta event occurs when the touch input changes position and can occur multiple times during a manipulation. 이벤트는 손가락 발생 한 후에 발생할 수 있습니다.The event can also occur after a finger is raised. 예를 들어, 사용자가 화면에서 손가락을 끌 경우는 ManipulationDelta 이벤트 손가락 이동으로 여러 번 발생 합니다.For example, if the user drags a finger across a screen, the ManipulationDelta event occurs multiple times as the finger moves. 화면에서 손가락을 움직일 때의 ManipulationDelta 관성을 시뮬레이션 하기 위해 이벤트가 계속 발생 합니다.When the user raises a finger from the screen, the ManipulationDelta event keeps occurring to simulate inertia.

    적용 되는 코드를 DeltaManipulationRenderTransformRectangle 는 사용자가 터치 이동 하려면 다음을 입력 합니다.The code applies the DeltaManipulation to the RenderTransform of the Rectangle to move it as the user moves the touch input. 또한 확인 여부를 Rectangle 의 범위를 벗어납니다를 Window 관성 도중 이벤트가 발생 합니다.It also checks whether the Rectangle is outside the bounds of the Window when the event occurs during inertia. 따라서 응용 프로그램 호출 하는 경우는 ManipulationDeltaEventArgs.Complete 조작을 종료 하는 방법입니다.If so, the application calls the ManipulationDeltaEventArgs.Complete method to end the manipulation.

    void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        
        // Get the Rectangle and its RenderTransform matrix.
        Rectangle rectToMove = e.OriginalSource as Rectangle;
        Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix;
    
        // Rotate the Rectangle.
        rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, 
                             e.ManipulationOrigin.X, 
                             e.ManipulationOrigin.Y);
    
        // Resize the Rectangle.  Keep it square 
        // so use only the X value of Scale.
        rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, 
                            e.DeltaManipulation.Scale.X, 
                            e.ManipulationOrigin.X,
                            e.ManipulationOrigin.Y);
    
        // Move the Rectangle.
        rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                              e.DeltaManipulation.Translation.Y);
    
        // Apply the changes to the Rectangle.
        rectToMove.RenderTransform = new MatrixTransform(rectsMatrix);
    
        Rect containingRect =
            new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);
    
        Rect shapeBounds =
            rectToMove.RenderTransform.TransformBounds(
                new Rect(rectToMove.RenderSize));
    
        // Check if the rectangle is completely in the window.
        // If it is not and intertia is occuring, stop the manipulation.
        if (e.IsInertial && !containingRect.Contains(shapeBounds))
        {
            e.Complete();
        }
    
        e.Handled = true;
    }
    
    Private Sub Window_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs)
    
        ' Get the Rectangle and its RenderTransform matrix.
        Dim rectToMove As Rectangle = e.OriginalSource
        Dim rectTransform As MatrixTransform = rectToMove.RenderTransform
        Dim rectsMatrix As Matrix = rectTransform.Matrix
    
    
        ' Rotate the shape
        rectsMatrix.RotateAt(e.DeltaManipulation.Rotation,
                             e.ManipulationOrigin.X,
                             e.ManipulationOrigin.Y)
    
        ' Resize the Rectangle. Keep it square 
        ' so use only the X value of Scale.
        rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                            e.DeltaManipulation.Scale.X,
                            e.ManipulationOrigin.X,
                            e.ManipulationOrigin.Y)
    
        'move the center
        rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                              e.DeltaManipulation.Translation.Y)
    
        ' Apply the changes to the Rectangle.
        rectTransform = New MatrixTransform(rectsMatrix)
        rectToMove.RenderTransform = rectTransform
    
        Dim container As FrameworkElement = e.ManipulationContainer
        Dim containingRect As New Rect(container.RenderSize)
    
        Dim shapeBounds As Rect = rectTransform.TransformBounds(
                                    New Rect(rectToMove.RenderSize))
    
        ' Check if the rectangle is completely in the window.
        ' If it is not and intertia is occuring, stop the manipulation.
        If e.IsInertial AndAlso Not containingRect.Contains(shapeBounds) Then
            e.Complete()
        End If
    
        e.Handled = True
    End Sub
    
  6. MainWindow 클래스를 다음 추가 ManipulationInertiaStarting 이벤트 처리기입니다.In the MainWindow class, add the following ManipulationInertiaStarting event handler.

    ManipulationInertiaStarting 사용자 화면에서 손가락을 모두 발생 하면 오류가 발생 합니다.The ManipulationInertiaStarting event occurs when the user raises all fingers from the screen. 코드에는 초기 속도 및 이동, 확장 및 회전 사각형의 감속을 설정합니다.The code sets the initial velocity and deceleration for the movement, expansion, and rotation of the rectangle.

    void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e)
    {
    
        // Decrease the velocity of the Rectangle's movement by 
        // 10 inches per second every second.
        // (10 inches * 96 pixels per inch / 1000ms^2)
        e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0);
    
        // Decrease the velocity of the Rectangle's resizing by 
        // 0.1 inches per second every second.
        // (0.1 inches * 96 pixels per inch / (1000ms^2)
        e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0);
    
        // Decrease the velocity of the Rectangle's rotation rate by 
        // 2 rotations per second every second.
        // (2 * 360 degrees / (1000ms^2)
        e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0);
    
        e.Handled = true;
    }
    
    Private Sub Window_InertiaStarting(ByVal sender As Object,
                                       ByVal e As ManipulationInertiaStartingEventArgs)
    
        ' Decrease the velocity of the Rectangle's movement by 
        ' 10 inches per second every second.
        ' (10 inches * 96 pixels per inch / 1000ms^2)
        e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0)
    
        ' Decrease the velocity of the Rectangle's resizing by 
        ' 0.1 inches per second every second.
        ' (0.1 inches * 96 pixels per inch / (1000ms^2)
        e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0)
    
        ' Decrease the velocity of the Rectangle's rotation rate by 
        ' 2 rotations per second every second.
        ' (2 * 360 degrees / (1000ms^2)
        e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0)
    
        e.Handled = True
    End Sub
    
  7. 프로젝트를 빌드하고 실행합니다.Build and run the project.

    창에 나타나는 빨간색 사각형이 표시 됩니다.You should see a red square appear in the window.

애플리케이션 테스트Testing the Application

응용 프로그램을 테스트 하려면 다음 조작을 시도 합니다.To test the application, try the following manipulations. 동시에 다음 중 하나 이상 수행할 수 있습니다 note 합니다.Note that you can do more than one of the following at the same time.

  • 이동 하는 Rectangle, 위에 손가락을 놓고는 Rectangle 화면에서 손가락을 이동 하 고 합니다.To move the Rectangle, put a finger on the Rectangle and move the finger across the screen.

  • 크기를 조정 하려면 합니다 Rectangle에 두 손가락을 배치를 Rectangle 더 가깝게 또는 멀리 움직여 다른 손가락 이동 합니다.To resize the Rectangle, put two fingers on the Rectangle and move the fingers closer together or farther apart from each other.

  • 회전 하는 Rectangle에 두 손가락을 배치 합니다 Rectangle 손가락을 서로 회전 및 합니다.To rotate the Rectangle, put two fingers on the Rectangle and rotate the fingers around each other.

관성 시킬 이전 조작을 수행 하면 화면에서 손가락을 발생 신속 하 게 합니다.To cause inertia, quickly raise your fingers from the screen as you perform the previous manipulations. Rectangle 이동, 크기 조정 또는 중지 하기 전에 몇 초간 회전 계속 됩니다.The Rectangle will continue to move, resize, or rotate for a few seconds before it stops.

참고자료See also