Пошаговое руководство. Создание первого приложения для обработки касаний

WPF позволяет приложениям реагировать на касание. Например может взаимодействовать с приложением с помощью одного или более пальцами сенсорные устройства, например сенсорный экран, в этом пошаговом руководстве создается приложение, которое позволяет пользователю перемещать, изменять размер или поворот объекта с использованием сенсорного ввода.

Предварительные требования

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

Visual Studio.
Устройство, которое принимает сенсорного ввода, например сенсорный экран, который поддерживает Windows Touch.

Кроме того, должен иметь базовое представление о том, как создать приложение в WPF, особенно как подписаться на и как обрабатывать событие. Дополнительные сведения см. в разделе Пошаговое руководство: Создание первого классического приложения WPF.

Создание приложения

Создайте проект приложения WPF на Visual Basic или Visual C# с именем BasicManipulation. Дополнительные сведения см. в разделе Пошаговое руководство: Создание первого классического приложения WPF.

Замените содержимое файла MainWindow.XAML на следующий XAML.

Эта разметка создает простое приложение, содержащей красный Rectangle на Canvas. IsManipulationEnabled Свойство Rectangle имеет значение true, чтобы он будет получать события манипуляции. Приложение подписывается на ManipulationStarting, ManipulationDelta, и ManipulationInertiaStarting события. Эти события содержат логику перемещения Rectangle когда пользователь выполняет операции с ним.

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

Если вы используете Visual Basic, в первой строке файла MainWindow.XAML, замените x:Class="BasicManipulation.MainWindow" с x:Class="MainWindow".
В MainWindow класса, добавьте следующий ManipulationStarting обработчик событий.

ManipulationStarting Событие возникает при WPF обнаруживает, что сенсорный ввод начал доступ к объекту. Код указывает, что позиция манипуляции относительно Window , задав ManipulationContainer свойство.
```
void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;
    e.Handled = true;
}
```

В MainWindow класса, добавьте следующий ManipulationDelta обработчик событий.

ManipulationDelta Событие возникает, когда сенсорный ввод изменяет положение и может встречаться несколько раз во время манипуляции. Это событие также может возникать после возникновения палец. Например, если пользователь перемещает палец по экрану ManipulationDelta событие возникает несколько раз как перемещения пальца. Когда пользователь отрывает палец с экрана, ManipulationDelta событие продолжает возникать для имитации инерции.

Код применяет DeltaManipulation для RenderTransform из Rectangle Чтобы переместить его, как пользователь перемещает сенсорный ввод. Он также проверяет ли Rectangle выходит за границы Window при возникновении события во время инерции. Если таким образом, приложение вызывает ManipulationDeltaEventArgs.Complete для завершения манипуляции.

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

В MainWindow класса, добавьте следующий ManipulationInertiaStarting обработчик событий.

ManipulationInertiaStarting Событие происходит, когда пользователь вызывает все пальцы на экране. Код задает начальную скорость и замедление для перемещения, расширения и поворота прямоугольника.

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

Постройте и запустите проект.

Вы увидите красный квадрат в окне.

Тестирование приложения

Чтобы протестировать приложение, попробуйте следующие манипуляции. Обратите внимание на то, что можно сделать более одного из указанных ниже, в то же время.

Чтобы переместить Rectangle, поместите палец на Rectangle и переместите палец по экрану.
Чтобы изменить размер Rectangle, поместите два пальца на Rectangle и Сведите Сведите или разведите их друг с другом.
Для поворота Rectangle, поместите два пальца на Rectangle и Поворачивайте их вокруг друг с другом.

Чтобы вызвать инерцию, быстро повысить пальца на экране при выполнении предыдущих манипуляций. Rectangle Будет продолжать перемещения, размер или поворачивать на несколько секунд, прежде чем остановится.

Пошаговое руководство. Создание первого приложения для обработки касаний

Предварительные требования

Создание приложения

Создание приложения

Тестирование приложения

См. также