Návod: Vytvoření první aplikace

Článek
10/18/2023

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

Předpoklady

K dokončení tohoto návodu budete potřebovat 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 přijímala události manipulace. Aplikace se přihlásí k odběru objektu ManipulationStarting, ManipulationDeltaa ManipulationInertiaStarting událostí. Tyto události obsahují logiku Rectangle , která se má přesunout, když s ní 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 Jazyk Visual Basic, v prvním řádku MainWindow.xaml nahraďte x:Class="BasicManipulation.MainWindow" .x:Class="MainWindow"
MainWindow Do třídy přidejte následující ManipulationStarting obslužnou rutinu události.

K ManipulationStarting události dochází, když WPF zjistí, že dotykový vstup začne manipulovat s objektem. Kód určuje, že umístění manipulace by mělo být relativní vzhledem k Window nastavení ManipulationContainer vlastnosti.
```
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
```

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

K ManipulationDelta události dochází, když se pozice dotykového vstupu změní a během manipulace může dojít 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, ManipulationDelta dojde k události několikrát při pohybu prstem. Když uživatel zvedne prst z obrazovky, ManipulationDelta událost se stále opakuje pro simulaci nečinnosti.

Kód se použije DeltaManipulation na RenderTransform přesunutí Rectangle , když uživatel přesune dotykový vstup. Také zkontroluje, zda Rectangle je mimo hranice Window doby výskytu události během nečinnosti. Pokud ano, aplikace volá metodu ManipulationDeltaEventArgs.Complete pro 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

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

K ManipulationInertiaStarting události dochází, 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í.

Chcete-li přesunout Rectangle, položte prst na obrazovku Rectangle a pohybujte prst přes obrazovku.
Pokud chcete změnit velikost Rectangle, položte dva prsty na Rectangle sebe a přesuňte prsty blíž k sobě nebo dále od sebe.
Pokud chcete otočit Rectangle, položte dva prsty na Rectangle sebe 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í. Než Rectangle se zastaví, přesune se velikost nebo otočí po dobu několika sekund.

Návod: Vytvoření první aplikace

Předpoklady

Vytvoření aplikace

Vytvoření aplikace

Testování aplikace

Viz také

Váš názor

Další materiály