Baca dalam bahasa Inggris

Bagikan melalui

Panduan: Membuat aplikasi sentuhan pertama Anda

  • Artikel

WPF memungkinkan aplikasi merespons sentuhan. Misalnya, Anda dapat berinteraksi dengan aplikasi dengan menggunakan satu atau beberapa jari pada perangkat sensitif sentuh, seperti layar sentuh Panduan ini membuat aplikasi yang memungkinkan pengguna untuk memindahkan, mengubah ukuran, atau memutar satu objek dengan menggunakan sentuhan.

Prasyarat

Anda memerlukan komponen berikut untuk menyelesaikan panduan ini:

  • Visual Studio.

  • Perangkat yang menerima input sentuh, seperti layar sentuh, yang mendukung Windows Touch.

Selain itu, Anda harus memiliki pemahaman dasar tentang cara membuat aplikasi di WPF, terutama cara berlangganan dan menangani peristiwa. Untuk informasi selengkapnya, lihat panduan : Aplikasi desktop WPF pertama saya.

Membuat Aplikasi

Untuk membuat aplikasi

  1. Buat proyek Aplikasi WPF baru di Visual Basic atau Visual C# bernama BasicManipulation. Untuk informasi selengkapnya, lihat panduan : Aplikasi desktop WPF pertama saya.

  2. Ganti konten MainWindow.xaml dengan XAML berikut.

    Markup ini membuat aplikasi sederhana yang menampilkan warna merah Rectangle pada latar belakang Canvas. Properti IsManipulationEnabled pada Rectangle diatur ke benar sehingga dapat menerima event manipulasi. Aplikasi berlangganan peristiwa ManipulationStarting, ManipulationDelta, dan ManipulationInertiaStarting. Peristiwa ini berisi logika untuk memindahkan Rectangle saat pengguna memanipulasinya.

    <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. Jika Anda menggunakan Visual Basic, di baris pertama MainWindow.xaml, ganti x:Class="BasicManipulation.MainWindow" dengan x:Class="MainWindow".

  4. Di kelas MainWindow, tambahkan penanganan aktivitas ManipulationStarting berikut.

    Peristiwa ManipulationStarting terjadi ketika WPF mendeteksi bahwa input sentuhan mulai memanipulasi objek. Kode menentukan bahwa posisi manipulasi harus relatif terhadap Window dengan mengatur properti ManipulationContainer.

    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. Di kelas MainWindow, tambahkan penanganan aktivitas ManipulationDelta berikut.

    Peristiwa ManipulationDelta terjadi ketika input sentuhan berubah posisi dan dapat terjadi beberapa kali selama manipulasi. Peristiwa juga dapat terjadi setelah jari dinaikkan. Misalnya, jika pengguna menyeret jari di layar, peristiwa ManipulationDelta terjadi beberapa kali saat jari bergerak. Ketika pengguna mengangkat jari dari layar, peristiwa ManipulationDelta terus terjadi untuk mensimulasikan inertia.

    Kode menerapkan DeltaManipulation ke RenderTransform dari Rectangle untuk memindahkannya saat pengguna menggerakkan masukan sentuh. Ini juga memeriksa apakah Rectangle berada di luar batas Window ketika peristiwa terjadi selama inertia. Jika demikian, aplikasi memanggil metode ManipulationDeltaEventArgs.Complete untuk mengakhiri manipulasi.

    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. Di kelas MainWindow, tambahkan penanganan aktivitas ManipulationInertiaStarting berikut.

    Peristiwa ManipulationInertiaStarting terjadi ketika pengguna menaikkan semua jari dari layar. Kode menetapkan kecepatan dan deselerasi awal untuk pergerakan, ekspansi, dan rotasi persegi panjang.

    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. Bangun dan jalankan proyek.

    Anda akan melihat persegi merah muncul di jendela.

Menguji Aplikasi

Untuk menguji aplikasi, coba manipulasi berikut. Perhatikan bahwa Anda dapat melakukan lebih dari satu hal berikut secara bersamaan.

  • Untuk memindahkan Rectangle, letakkan jari di Rectangle dan gerakkan jari di layar.

  • Untuk mengubah ukuran Rectangle, letakkan dua jari di Rectangle dan gerakkan jari-jari lebih dekat bersama-sama atau lebih jauh satu sama lain.

  • Untuk memutar Rectangle, letakkan dua jari di Rectangle dan putar jari satu sama lain.

Untuk menyebabkan inertia, angkat jari Anda dari layar dengan cepat saat Anda melakukan manipulasi sebelumnya. Rectangle akan terus memindahkan, mengubah ukuran, atau memutar selama beberapa detik sebelum berhenti.

Lihat juga