İ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.

Ön koşullar

Bu izlenecek yolu 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 . İzlenecek yol: İlk WPF masaüstü uygulamam.

Uygulamayı Oluşturma

Uygulamayı oluşturmak için

  1. Visual Basic veya Visual C# içinde adlı BasicManipulationyeni bir WPF Uygulaması projesi oluşturun. Daha fazla bilgi için bkz . İzlenecek yol: İ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, üzerinde kırmızı Rectangle içeren basit bir Canvasuygulama oluşturur. IsManipulationEnabled özelliği, işleme olaylarını Rectangle alacak şekilde true olarak ayarlanır. Uygulama , ManipulationDeltave ManipulationInertiaStarting olaylarına ManipulationStartingabonedir. Bu olaylar, kullanıcı tarafından işlendiğinde öğesini Rectangle taşıma mantığını içerir.

    <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 değerini ile x:Class="MainWindow"değiştirinx:Class="BasicManipulation.MainWindow".

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

    Wpf ManipulationStarting dokunma girişinin bir nesneyi işlemeye başladığını algıladığında olay oluşur. Kod, özelliğini ayarlayarak ManipulationContainer işlemenin konumunun ile Window göreli 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. sınıfına MainWindow aşağıdaki ManipulationDelta olay işleyicisini ekleyin.

    Olay, ManipulationDelta dokunma girişi 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, ManipulationDelta olay parmak hareket ettikçe birden çok kez gerçekleşir. Kullanıcı ekrandan bir parmağı kaldırdığında, ManipulationDelta eylemsizlik simülasyonu yapmak için olay gerçekleşmeye devam eder.

    Kod, kullanıcı dokunmatik girişi taşırken öğesini taşımak için öğesine uygular DeltaManipulationRenderTransformRectangle . Ayrıca, eylemsizlik sırasında olay gerçekleştiğinde öğesinin Window sınırlarının dışında olup olmadığını Rectangle denetler. Öyleyse, uygulama işlemeyi ManipulationDeltaEventArgs.Complete sonlandırmak için 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. sınıfına MainWindow aşağıdaki ManipulationInertiaStarting olay işleyicisini ekleyin.

    Olay, ManipulationInertiaStarting 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.

  • öğesini hareket ettirmek Rectangleiçin bir parmağınızı ekranın üzerine Rectangle koyun ve parmağınızı ekranda hareket ettirin.

  • öğesini Rectangleyeniden boyutlandırmak için iki parmağınızla Rectangle üzerine koyun ve parmaklarını birbirine yaklaştırın veya birbirinden daha uzağa hareket ettirin.

  • öğesini döndürmek Rectangleiçin iki parmağınızla Rectangle iki parmağınızla döndürün ve parmaklarını birbirine 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 durdurulmadan önce birkaç saniye boyunca hareket etmeye, yeniden boyutlandırmaya veya döndürmeye devam eder.

Ayrıca bkz.