Návod: Vytvoření první dotykové aplikace

Článek
12/18/2024

WPF umožňuje aplikacím reagovat na dotykové ovládání. S aplikací můžete například pracovat jedním nebo více prsty na dotykovém zařízení, jako je dotyková obrazovka. Tento návod vytvoří aplikaci, která uživateli umožňuje přesouvat, měnit velikost nebo otáčet jeden objekt pomocí dotykového ovládání.

Požadavky

K dokončení tohoto návodu potřebujete následující komponenty:

Visual Studio.
Zařízení, které přijímá dotykové ovládání, například dotykovou obrazovku, které podporuje Windows Touch.

Kromě toho byste měli mít základní znalosti o tom, jak vytvořit aplikaci ve WPF, zejména jak se přihlásit k odběru a zpracování události. Další informace naleznete v tématu Návod: Moje první desktopová aplikace WPF.

Vytvoření aplikace

Vytvořte nový projekt aplikace WPF v jazyce Visual Basic nebo Visual C# s názvem BasicManipulation. Další informace naleznete v tématu Návod: Moje první desktopová aplikace WPF.

Nahraďte obsah MainWindow.xaml následujícím kódem XAML.

Tento kód vytvoří jednoduchou aplikaci, která obsahuje červenou Rectangle na Canvas. Vlastnost IsManipulationEnabled objektu Rectangle je nastavena na hodnotu true, aby mohla přijímat události manipulace s objekty. Aplikace se přihlásí k odběru událostí ManipulationStarting, ManipulationDeltaa ManipulationInertiaStarting. Tyto události obsahují logiku pro přesunutí Rectangle, když s ním uživatel manipuluje.

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

Pokud používáte Visual Basic, v prvním řádku MainWindow.xaml nahraďte x:Class="BasicManipulation.MainWindow"x:Class="MainWindow".
Do třídy MainWindow přidejte následující obslužnou rutinu události ManipulationStarting.

Událost ManipulationStarting nastane, když WPF zjistí, že dotykový vstup začne manipulovat s objektem. Kód určuje, že manipulační pozice by měla být relativní ve vztahu k Window tím, že se nastaví vlastnost 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
```

Do třídy MainWindow přidejte následující obslužnou rutinu události ManipulationDelta.

Událost ManipulationDelta nastává, když se pozice dotykového vstupu změní a během manipulace může nastat několikrát. Událost může nastat také po zvednutém prstu. Pokud například uživatel přetáhne prst přes obrazovku, dojde k ManipulationDelta události několikrát při pohybu prstem. Když uživatel zvedne prst z obrazovky, událost ManipulationDelta se stále aktivuje, aby simulovala setrvačnost.

Kód použije DeltaManipulation na RenderTransform v rámci Rectangle, aby ho přesunul, jakmile uživatel pohne dotykovým vstupem. Také zkontroluje, zda je Rectangle mimo hranice Window, když dojde k události během nečinnosti. Pokud ano, aplikace volá metodu ManipulationDeltaEventArgs.Complete k ukončení manipulace.

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

Do třídy MainWindow přidejte následující obslužnou rutinu události ManipulationInertiaStarting.

Událost ManipulationInertiaStarting nastane, když uživatel zvedne všechny prsty z obrazovky. Kód nastaví počáteční rychlost a zpomalení pohybu, rozšíření a otočení obdélníku.

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

Sestavte a spusťte projekt.

V okně by se měl zobrazit červený čtverec.

Testování aplikace

Pokud chcete aplikaci otestovat, vyzkoušejte následující manipulace. Všimněte si, že současně můžete provádět více než jednu z následujících akcí.

Pokud chcete přesunout Rectangle, položte prst na Rectangle a potáhněte prstem přes obrazovku.
Pokud chcete změnit velikost Rectangle, položte dva prsty na Rectangle a přesuňte prsty blíž k sobě nebo od sebe od sebe.
Chcete-li otočit Rectangle, položte dva prsty na Rectangle a otočte prsty kolem sebe.

Chcete-li způsobit nečinnost, rychle zvedněte prsty z obrazovky při provádění předchozích manipulací. Rectangle bude pokračovat v přesouvání, změně velikosti nebo otočení po dobu několika sekund, než se zastaví.

Sdílet prostřednictvím

Návod: Vytvoření první dotykové aplikace

Požadavky

Vytvoření aplikace

Vytvoření aplikace

Testování aplikace

Viz také

Další materiály