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 berisi merah Rectangle pada Canvas. Properti IsManipulationEnabled diatur Rectangle ke true sehingga akan menerima peristiwa manipulasi. Aplikasi berlangganan peristiwa ManipulationStarting, , ManipulationDeltadan 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. MainWindow Di kelas , tambahkan penanganan aktivitas berikutManipulationStarting.

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

    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 Di kelas , tambahkan penanganan aktivitas berikutManipulationDelta.

    Peristiwa terjadi ManipulationDelta 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, ManipulationDelta peristiwa terjadi beberapa kali saat jari bergerak. Ketika pengguna mengangkat jari dari layar, ManipulationDelta peristiwa terus terjadi untuk mensimulasikan inertia.

    Kode menerapkan DeltaManipulation ke RenderTransform dari Rectangle untuk memindahkannya saat pengguna memindahkan input sentuhan. Ini juga memeriksa apakah Rectangle berada di luar batas Window ketika peristiwa terjadi selama inertia. Jika demikian, aplikasi memanggil ManipulationDeltaEventArgs.Complete metode 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. MainWindow Di kelas , tambahkan penanganan aktivitas berikutManipulationInertiaStarting.

    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. Buat 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 dan Rectangle gerakkan jari di layar.

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

  • Untuk memutar Rectangle, letakkan dua jari pada Rectangle dan putar jari di sekitar 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.

Baca juga