Wskazówki: tworzenie Twojej pierwszej aplikacji dotykowej

Artykuł
10/18/2023

WPF umożliwia aplikacjom reagowanie na dotyk. Na przykład można wchodzić w interakcję z aplikacją za pomocą jednego lub kilku palców na urządzeniu z uwzględnieniem dotyku, na przykład ekranu dotykowego Ten przewodnik tworzy aplikację, która umożliwia użytkownikowi przenoszenie, zmienianie rozmiaru lub obracanie pojedynczego obiektu za pomocą 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óry obsługuje funkcję Windows Touch.

Ponadto musisz mieć podstawową wiedzę na temat tworzenia aplikacji w WPF, szczególnie sposobu subskrybowania i obsługi zdarzenia. Aby uzyskać więcej informacji, zobacz Przewodnik: Moja pierwsza aplikacja klasyczna WPF.

Tworzenie aplikacji

Aby utworzyć aplikację

Utwórz nowy projekt aplikacji WPF w Visual Basic lub Visual C# o nazwie BasicManipulation. Aby uzyskać więcej informacji, zobacz Przewodnik: Moja pierwsza aplikacja klasyczna WPF.

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

Ten znacznik tworzy prostą aplikację, która zawiera kolor czerwony Rectangle na .Canvas Właściwość IsManipulationEnabled Rectangle właściwości jest ustawiona na wartość true, aby otrzymywać zdarzenia manipulowania. Aplikacja subskrybuje zdarzenia ManipulationStarting, ManipulationDeltai ManipulationInertiaStarting . Te zdarzenia zawierają logikę, aby przenieść Rectangle ją podczas manipulowania nim przez użytkownika.

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

Jeśli używasz języka Visual Basic, w pierwszym wierszu pliku MainWindow.xaml zastąp ciąg x:Class="BasicManipulation.MainWindow" .x:Class="MainWindow"
W klasie dodaj następującą ManipulationStarting procedurę MainWindow obsługi zdarzeń.

Zdarzenie ManipulationStarting występuje, gdy WPF wykryje, że dane wejściowe dotyku zaczynają manipulować obiektem. Kod określa, że pozycja manipulacji powinna być względna przez Window ustawienie ManipulationContainer właściwości .
```
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
```

W klasie dodaj następującą ManipulationDelta procedurę MainWindow obsługi zdarzeń.

Zdarzenie ManipulationDelta występuje, gdy wejście dotykowe zmienia położenie i może wystąpić wielokrotnie podczas manipulowania. Zdarzenie może również wystąpić po podniesionym palcu. Jeśli na przykład użytkownik przeciąga palcem przez ekran, ManipulationDelta zdarzenie występuje wiele razy, gdy palec porusza się. Gdy użytkownik podnosi palec z ekranu, ManipulationDelta zdarzenie nadal występuje w celu symulowania inercji.

Kod stosuje element DeltaManipulation do RenderTransform Rectangle elementu , aby go przenieść, gdy użytkownik przenosi dane wejściowe dotyku. Sprawdza również, czy obiekt Rectangle znajduje się poza granicami Window , gdy zdarzenie występuje podczas inercji. 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

W klasie dodaj następującą ManipulationInertiaStarting procedurę MainWindow obsługi zdarzeń.

Zdarzenie ManipulationInertiaStarting występuje, gdy użytkownik podnosi wszystkie palce z ekranu. Kod ustawia początkową szybkość i zwalnianie ruchu, rozszerzania i obrotu 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

Skompiluj i uruchom projekt.

W oknie powinien zostać wyświetlony czerwony kwadrat.

Testowanie aplikacji

Aby przetestować aplikację, spróbuj wykonać następujące czynności. Należy pamiętać, że w tym samym czasie można wykonać więcej niż jedną z następujących czynności.

Aby przenieść element Rectangle, umieść palec na ekranie Rectangle i przesuń palcem po ekranie.
Aby zmienić rozmiar Rectangleobiektu , umieść dwa palce na Rectangle i przesuń palce bliżej siebie lub dalej od siebie.
Aby obrócić Rectangleobiekt , umieść dwa palce na Rectangle i obróć palce wokół siebie.

Aby spowodować bezwładność, szybko podnieś palce z ekranu podczas wykonywania poprzednich manipulacji. Przed Rectangle zatrzymanie będzie kontynuowane przenoszenie, zmienianie rozmiaru lub obracanie przez kilka sekund.

Wskazówki: tworzenie Twojej pierwszej aplikacji dotykowej

Wymagania wstępne

Tworzenie aplikacji

Aby utworzyć aplikację

Testowanie aplikacji

Zobacz też

Opinia

Dodatkowe zasoby