Megosztás a következőn keresztül:

Útmutató: Az első érintéses alkalmazás létrehozása

A WPF lehetővé teszi, hogy az alkalmazások érintésre válaszoljanak. Használhat például egy alkalmazást egy vagy több ujjal egy érintésérzékeny eszközön, például érintőképernyőn. Ez az útmutató létrehoz egy alkalmazást, amely lehetővé teszi, hogy a felhasználó érintéssel áthelyezzen, átméretezzen vagy elforgatjon egy objektumot.

Előfeltételek

Az útmutató elvégzéséhez a következő összetevőkre van szüksége:

  • Visual Studio.

  • Olyan eszköz, amely fogadja az érintéses bemenetet, például egy érintőképernyőt, amely támogatja a Windows Touchot.

Emellett alapvető ismereteket kell tudnia arról, hogyan hozhat létre alkalmazásokat a WPF-ben, különösen azt, hogy hogyan iratkozhat fel és kezelhet eseményeket. További információ: Útmutató: Az első asztali WPF-alkalmazásom.

Az alkalmazás létrehozása

Az alkalmazás létrehozása

  1. Hozzon létre egy új WPF-alkalmazásprojektet BasicManipulationnevű Visual Basic vagy Visual C# nyelven. További információ: Útmutató: Az első asztali WPF-alkalmazásom.

  2. Cserélje le a MainWindow.xaml tartalmát a következő XAML-ra.

    Ez a jelölés létrehoz egy egyszerű alkalmazást, amely tartalmaz egy vörös Rectangle-t egy Canvas-en. A IsManipulationEnabledRectangle tulajdonsága igaz értékre van állítva, ezáltal manipulációs eseményeket fog kapni. Az alkalmazás feliratkozik a ManipulationStarting, ManipulationDeltaés ManipulationInertiaStarting eseményekre. Ezek az események tartalmazzák a Rectangle mozgatására szolgáló logikát, amikor a felhasználó módosítja azt.

    <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. Ha Visual Basicet használ, a MainWindow.xaml első sorában cserélje le a x:Class="BasicManipulation.MainWindow"x:Class="MainWindow".

  4. A MainWindow osztályban adja hozzá a következő ManipulationStarting eseménykezelőt.

    A ManipulationStarting esemény akkor fordul elő, amikor a WPF észleli, hogy az érintéses bemenet elkezd manipulálni egy objektumot. A kód meghatározza, hogy a manipuláció helyzetének a Window-hoz képestinek kell lennie a ManipulationContainer tulajdonság beállításával.

    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. A MainWindow osztályban adja hozzá a következő ManipulationDelta eseménykezelőt.

    A ManipulationDelta esemény akkor következik be, amikor az érintéses bemenet pozíciót vált, és a manipuláció során többször is előfordulhat. Az esemény az ujj felemelése után is előfordulhat. Ha például a felhasználó áthúz egy ujját egy képernyőn, a ManipulationDelta esemény többször is bekövetkezik, amikor az ujj elmozdul. Amikor a felhasználó felemeli az ujját a képernyőről, a ManipulationDelta esemény továbbra is bekövetkezik a tehetetlenség szimulálása érdekében.

    A kód a DeltaManipulation-t a RenderTransformRectangle-jához alkalmazza, hogy az a felhasználó érintéses bemenetével mozduljon. Azt is ellenőrzi, hogy a Rectangle a Window határain kívül esik-e, amikor az esemény tehetetlenség alatt történik. Ha igen, az alkalmazás meghívja a ManipulationDeltaEventArgs.Complete metódust a manipuláció befejezéséhez.

    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. A MainWindow osztályban adja hozzá a következő ManipulationInertiaStarting eseménykezelőt.

    A ManipulationInertiaStarting esemény akkor következik be, amikor a felhasználó minden ujját felemeli a képernyőről. A kód beállítja a téglalap mozgásának, bővítésének és forgásának kezdeti sebességét és lassulását.

    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. Hozza létre és futtassa a projektet.

    Az ablakban piros négyzetnek kell megjelennie.

Az alkalmazás tesztelése

Az alkalmazás teszteléséhez próbálkozzon az alábbi manipulációkkal. Vegye figyelembe, hogy egyszerre több műveletet is elvégezhet az alábbiak közül.

  • A Rectanglemozgatásához helyezze az ujját a Rectangle, és mozgassa az ujját a képernyőn.

  • A Rectangleátméretezéséhez helyezze két ujját a Rectangle-re, és mozgassa az ujjait egymáshoz közelebb vagy távolabb.

  • A Rectangleelforgatásához helyezze két ujját a Rectangle-re, és forgassa egymás körül az ujjait.

A tehetetlenség létrehozásához az előző manipulációk végzése közben gyorsan emelje fel ujjait a képernyőről. A Rectangle még néhány másodpercig továbbra is mozog, átméreteződik vagy elfordul, mielőtt leáll.

Lásd még

  • Last updated on