Creating Your First Touch Application

WPF cho phép các ứng dụng có thể thực hiện công việc thông qua công nghệ cảm ứng. Ví dụ, bạn có thể tương tác với một ứng dụng bằng cách sử dụng một hay nhiều ngón tay trên một thiết bị cảm ứng, chẳng hạn như một màn hình cảm ứng (touchscreen).

1. Các yêu cầu trước khi thực hiện:

  • Visual Studio 2010.
  • Windows 7.
  • Một thiết bị chấp nhận dữ liệu đầu vào thông qua cảm ứng, chẳng hạn màn hình cảm ứng có hỗ trợ Windows Touch.

Ngoài ra, bạn cũng cần có sự hiểu biết cơ bản về cách tạo một ứng dụng trong WPF, đặc biệt là làm thế nào để đăng kí và xử lý một sự kiện. Để tìm hiểu thêm, các bạn có thể xem thêm thông tin tại địa chỉ này.

2. Tạo ứng dụng:

  • Tạo một dự án WPF Application mới trong Visual Basic hoặc Visual C# đặt tên là BasicManipulation.
  • Thay thế nội dung của file MainWindow.xaml bằng mã XAML sau.

Việc đánh dấu này tạo ra một ứng dụng đơn giản bao gồm một Rectangle đỏ trên một vùng canvas. Thuộc tính IsManipulationEnabled của Rectangle được đặt thành True để nó nhận các sự kiện thao tác. Ứng dụng đăng kí các sự kiện ManipulationStarting, ManipulationDeltaManipulationInertiaStarting.

<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>
  • Nếu bạn đang dùng Visual Basic, ở dòng đầu tiên của MainWindow.xaml, thay thế x:Class="BasicManipulation.MainWindow" bằng x:Class="MainWindow".
  • Trong lớp MainWindow. thêm vào hàm xử lý sự kiện ManipulationStarting.

Sự kiện ManipulationStarting xuất hiện khi WPF phát hiện thấy rằng tín hiệu cảm ứng đầu vào bắt đầu sử dụng một đối tượng. Đoạn mã xác định vị trí của việc sử dụng này sẽ được liên kết tới Window bằng cách thiết lập thuộc tính ManipulationContainer.

C#:

void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;
    e.Handled = true;
}
VB:
Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
    e.ManipulationContainer = Me
    e.Handled = True
End Sub

 

  • Trong lớp MainWindow, thêm vào hàm xử lý sự kiện ManipulationDelta sau.

Sự kiện ManipulationDelta xuất hiện khi dữ liệu cảm ứng đầu vào thay đổi vị trí và có thể xuất hiện nhiều lần trong suốt một lần sử dụng. Sự kiện cũng có thể sử dụng sau khi một ngón tay được đưa lên. Ví dụ, nếu người dùng rê một ngón tay trên một màn hình, sự kiện ManipulationDelta xuất hiện nhiều lần khi các ngón tay di chuyển. Khi người dùng tăng một ngón tay từ màn hình, sự kiện ManipulationDelta tiếp tục xuất hiện để mô phỏng quán tính.

Đoạn mã áp dụng thuộc tính DeltaManipulation cho thuộc tính RenderTransform của Rectangle để di chuyển nó khi người dùng di chuyển tín hiệu cảm ứng đầu vào. Nó cũng kiểm tra cho dù Rectangle nằm ngoài các phạm vi của Window khi sự kiện xuất hiện trong khi không hoạt động. Nếu như vậy, ứng dụng gọi phương thức ManipulationDeltaEventArgs.Complete cho đến khi kết thúc việc sử dụng.

C#:

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;
}

 

VB:

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

Sự kiện ManipulationInertiaStarting xuất hiện khi người dùng đưa tất cả các ngòn tay từ màn hình. Đoạn mã thiết lập vận tốc và giảm tốc ban đầu cho việc di chuyển, mở rộng và xoay hình chữ nhật.

C#:

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;
}
VB:
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
  • Build và run dự án. Bạn sẽ thấy một ô vuông màu đỏ xuất hiện trong cửa sổ.

3. Testing the Application:

Để kểm tra ứng dụng, thử các thao tác sau. Lưu ý rằng bạn có thể thực hiện hơn một lần tại cùng một thời điểm.

  • Để di chuyển Rectangle, đặt một ngón tay trên Rectangle và di chuyển ngón tay trên màn hình.
  • Để thay đổi kích thước Rectangle, đặt 2 ngón tay trên Rectangle và di chuyển các ngón tay lại gần nhau hoặc xa nhau .
  • Để xoay Rectangle, đặt 2 ngón tay trên Rectangle và xoay các ngón tay xung quanh nhau.
(MSDN)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s