Przewodnik: tworzenie pierwszej aplikacji dotykowej

  • Artykuł
  • Czas czytania: 5 min

WPF umożliwia aplikacjom reagowanie na dotyk. Na przykład możesz wchodzić w interakcje z aplikacją przy użyciu co najmniej jednego przycisku na urządzeniu wrażliwym na dotyk, takiego jak ekran dotykowy. Ten przewodnik tworzy aplikację, która umożliwia użytkownikowi przenoszenie, zmienianie rozmiaru lub obracanie pojedynczego obiektu przy użyciu dotyku.

Wymagania wstępne

Następujące składniki są wymagane do przeprowadzenia tego instruktażu:

  • Programu Visual Studio.

  • Urządzenie, które akceptuje dotykowe dane wejściowe, takie jak ekran dotykowy, które obsługuje Windows Touch.

Ponadto musisz mieć podstawową wiedzę na temat sposobu tworzenia aplikacji w WPF, szczególnie sposobu subskrybowania i obsługi zdarzenia. Aby uzyskać więcej informacji, zobacz Walkthrough: My first WPF desktop application (Przewodnik: moja pierwsza aplikacja desktopowa WPF).

Tworzenie aplikacji

Aby utworzyć aplikację

  1. Utwórz nowy projekt aplikacji WPF w programie Visual Basic lub Visual C# o nazwie BasicManipulation. Aby uzyskać więcej informacji, zobacz Walkthrough: My first WPF desktop application (Przewodnik: moja pierwsza aplikacja desktopowa WPF).

  2. Zastąp zawartość pliku MainWindow.xaml następującym kodem XAML.

    Ten znacznik tworzy prostą aplikację, która zawiera czerwony kolor Rectangle na .Canvas Właściwość IsManipulationEnabled jest ustawiona Rectangle na wartość true, dzięki czemu będzie odbierać zdarzenia manipulowania. Aplikacja subskrybuje zdarzenia ManipulationStarting, ManipulationDeltai ManipulationInertiaStarting . Te zdarzenia zawierają logikę, która przenosi obiekt Rectangle , gdy użytkownik manipuluje nim.

    <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. Jeśli używasz pliku Visual Basic, w pierwszym wierszu pliku MainWindow.xaml zastąp element x:Class="BasicManipulation.MainWindow" .x:Class="MainWindow"

  4. W klasie MainWindow dodaj następującą obsługę ManipulationStarting zdarzeń.

    Zdarzenie ManipulationStarting występuje, gdy WPF wykryje, że dotknięcie danych wejściowych zaczyna manipulować obiektem. Kod określa, że pozycja manipulacji powinna być względna względem obiektu przez Window ustawienie właściwości 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. W klasie MainWindow dodaj następującą obsługę ManipulationDelta zdarzeń.

    Zdarzenie ManipulationDelta występuje, gdy dotknięcie danych wejściowych zmienia położenie i może wystąpić wiele razy podczas manipulowania. Zdarzenie może również wystąpić po uniesieniu palca. Jeśli na przykład użytkownik przeciągnie palcem po ekranie, ManipulationDelta zdarzenie występuje wielokrotnie, gdy palcem się przesuwa. Gdy użytkownik podniesie palcem z ekranu, ManipulationDelta zdarzenie będzie się powtarzać w celu symulowania bezwładności.

    Kod stosuje do metody DeltaManipulation , RenderTransformRectangle aby przenieść ją, gdy użytkownik przenosi dane wejściowe dotykowe. Sprawdza również, czy nie Rectangle znajduje się poza granicami Window , gdy zdarzenie występuje podczas bezwładności. Jeśli tak, aplikacja wywołuje metodę ManipulationDeltaEventArgs.Complete , aby zakończyć manipulowanie.

    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. W klasie MainWindow dodaj następującą obsługę ManipulationInertiaStarting zdarzeń.

    Zdarzenie ManipulationInertiaStarting występuje, gdy użytkownik zgłasza wszystkie kciuki z ekranu. Kod ustawia początkową szybkość i szybkość przemieszczania, rozszerzania i obracania prostokąta.

    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. Skompilowanie i uruchomienie projektu.

    W oknie powinien pojawić się czerwony kwadrat.

Testowanie aplikacji

Aby przetestować aplikację, spróbuj wykonać następujące czynności. Pamiętaj, że w tym samym czasie możesz wykonać więcej niż jedną z następujących czynności.

  • Aby przenieść Rectangle, umieść palec na Rectangle i przesuń palcem po ekranie.

  • Aby zmienić rozmiar Rectangle, umieść dwa kciuki Rectangle na i przesuń kciuk bliżej siebie lub dalej od siebie.

  • Aby obrócić Rectangleobiekt , umieść dwa kciuki Rectangle na i obróć kciuk wokół siebie.

Aby wywołać bezwładność, szybko podnieś kciuk z ekranu podczas wykonywania poprzednich manipulacji. Obiekt Rectangle będzie kontynuował przenoszenie, zmienianie rozmiaru lub obracanie przez kilka sekund przed jego zatrzymaniem.

Zobacz też