İzlenecek yol: İlk Dokunmatik Uygulamanızı Oluşturma

  • Makale

WPF, uygulamaların dokunmaya yanıt vermesini sağlar. Örneğin dokunmatik ekran gibi dokunmaya duyarlı bir cihazda bir veya daha fazla parmağınızı kullanarak bir uygulamayla etkileşim kurabilirsiniz. Bu kılavuz, kullanıcının dokunma kullanarak tek bir nesneyi taşımasına, yeniden boyutlandırmasına veya döndürmesine olanak tanıyan bir uygulama oluşturur.

Önkoşullar

Bu kılavuzu tamamlamak için aşağıdaki bileşenlere ihtiyacınız vardır:

  • Visual Studio.

  • Windows Touch'ı destekleyen dokunmatik ekran gibi dokunmatik girişi kabul eden bir cihaz.

Ayrıca WPF'de uygulama oluşturma, özellikle de bir olaya abone olma ve olayı işleme hakkında temel bilgilere sahip olmanız gerekir. Daha fazla bilgi için bkz. Kılavuz: İlk WPF masaüstü uygulamam.

Uygulamayı Oluşturma

Uygulamayı oluşturmak için

  1. Visual Basic veya Visual C# içinde BasicManipulationadlı yeni bir WPF Uygulaması projesi oluşturun. Daha fazla bilgi için bkz. Kılavuz: İlk WPF masaüstü uygulamam.

  2. MainWindow.xaml dosyasının içeriğini aşağıdaki XAML ile değiştirin.

    Bu işaretleme, Canvasüzerinde kırmızı Rectangle içeren basit bir uygulama oluşturur. Rectangle'deki IsManipulationEnabled özelliği, etkileşim etkinliklerini alabilmesi için true olarak ayarlanmıştır. Uygulama ManipulationStarting, ManipulationDeltave ManipulationInertiaStarting olaylarına abonedir. Bu olaylar, kullanıcı Rectangle'ı kontrol ettiğinde taşıma mantığını yürütür.

    <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 kullanıyorsanız MainWindow.xaml dosyasının ilk satırında x:Class="BasicManipulation.MainWindow" yerine x:Class="MainWindow"yazın.

  4. MainWindow sınıfına aşağıdaki ManipulationStarting olay işleyicisini ekleyin.

    ManipulationStarting olayı WPF dokunma girişinin bir nesneyi işlemeye başladığını algıladığında oluşur. Kod, ManipulationContainer özelliğini ayarlayarak düzenleme konumunun Window göre olması gerektiğini belirtir.

    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 sınıfına aşağıdaki ManipulationDelta olay işleyicisini ekleyin.

    ManipulationDelta olayı, dokunmatik girişin konumu değiştiğinde gerçekleşir ve bir düzenleme sırasında birden çok kez gerçekleşebilir. Olay, bir parmak kaldırıldıktan sonra da gerçekleşebilir. Örneğin, kullanıcı bir parmağı ekranda sürüklerse, parmak hareket ettikçe ManipulationDelta olayı birden çok kez gerçekleşir. Kullanıcı ekrandan bir parmağı kaldırdığında, eylemsizlik simülasyonu yapmak için ManipulationDelta olayı oluşmaya devam eder.

    Kod, kullanıcı dokunmatik girdiği hareket ettikçe, Rectangle'nin RenderTransform'ine DeltaManipulation'ı uygular ve hareket ettirir. Ayrıca, eylemsizlik sırasında olay gerçekleştiğinde RectangleWindow sınırlarının dışında olup olmadığını denetler. Bu durumda uygulama, işlemeyi sonlandırmak için ManipulationDeltaEventArgs.Complete yöntemini çağırır.

    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 sınıfına aşağıdaki ManipulationInertiaStarting olay işleyicisini ekleyin.

    ManipulationInertiaStarting olayı, kullanıcı ekrandan tüm parmaklarını kaldırdığında gerçekleşir. Kod, dikdörtgenin hareketi, genişlemesi ve döndürmesi için başlangıç hızını ve yavaşlamasını ayarlar.

    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. Projeyi derleyin ve çalıştırın.

    Pencerede kırmızı bir kare görünmelidir.

Uygulamayı Test Etme

Uygulamayı test etmek için aşağıdaki işlemeleri deneyin. Aşağıdakilerden birden fazlasını aynı anda yapabileceğinizi unutmayın.

  • Rectangletaşımak için bir parmağınızı Rectangle koyun ve parmağınızı ekranda hareket ettirin.

  • Rectangleyeniden boyutlandırmak için, iki parmağınızı Rectangle üzerine koyarak parmaklarınızı birbirine yaklaştırın ya da birbirinden uzaklaştırın.

  • Rectangle'ı döndürmek için, iki parmağınızı Rectangle üzerinde birleştirip parmaklarınızı birbirinin etrafında döndürün.

Eylemsizliklere neden olmak için, önceki işlemeleri gerçekleştirirken parmaklarınızı ekrandan hızla kaldırın. Rectangle, durmadan önce birkaç saniye boyunca hareket etmeye, yeniden boyutlandırmaya veya döndürmeye devam edecektir.

Ayrıca bkz.