Windows Phone 10万能，如何调整和移动一个矩形？

Question

我是 C# 和 XAML 的新手，我正在尝试创建一个允许用户移动矩形、使用捏合调整矩形大小以及在触摸时更改颜色的应用程序。我已经成功地为 Windows Phone 8.1 Silverlight 创建了应用程序，但是我在为 Windows Phone 10 Universal 创建它时遇到了很多麻烦。关于 Windows Phone 10.

中处理操作事件的文献非常有限

有人可以指导我执行此操作的适当信息，或者您是否可以告诉我我的代码哪里出错了？

非常感谢！

谢谢，

第

页

这是我的MainPage.xaml

<Page
x:Class="Gesture_App_UWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Gesture_App_UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" 
               Height="50" TextWrapping="Wrap" 
               Text="Gesture Application" VerticalAlignment="Top" 
               Width="360" FontSize="36" TextAlignment="Center" 
               FontFamily="Bauhaus 93" Margin="0,25,0,0" >
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF23AFE2" Offset="1"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
    </TextBlock>

    <Button x:Name="button_Info" Content="Info" HorizontalAlignment="Left" 
            Height="34" Margin="35,91,0,0" VerticalAlignment="Top" Width="110" 
            Click="button_Info_Click" BorderThickness="2" Foreground="#FFFA9F11" 
            BorderBrush="#FF09B4F3">
        <Button.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF3A3939" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
    <Button x:Name="button_Instructions" Content="Instructions" 
            HorizontalAlignment="Left" Height="34" Margin="210,91,0,0" 
            VerticalAlignment="Top" Width="110" BorderThickness="2" 
            Foreground="#FFFA9F11" BorderBrush="#FF09B4F3" Click="button_Instructions_Click">
        <Button.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF3A3939" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

    <Border BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" 
            Height="5" Margin="10,160,0,0" VerticalAlignment="Top" Width="340"/>

    <Grid HorizontalAlignment="Left" Height="475" Margin="0,165,0,0" 
          VerticalAlignment="Top" Width="360"/>

    <Canvas HorizontalAlignment="Left" Height="470" Margin="0,170,0,0" 
            VerticalAlignment="Top" Width="360" >

        <Rectangle Name="touchRectangle" Fill="Green" Width="200" Height="40" Canvas.Left="80" 
                   Stroke="Blue" Canvas.Top="190" RadiusX="5" RadiusY="5" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   ManipulationMode="All"/>
    </Canvas>


</Grid>
</Page>

这是我的 MainPage.xaml.cs，我更新了它以反映下面提到的更改，但矩形仍然没有移动或调整大小。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Input;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;
using System.Windows.Input;

namespace Gesture_App_UWP
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
    // Global translation transform used for changing the position of 
    // the Rectangle based on input data from the touch contact.
    private TranslateTransform dragTranslation;
    private CompositeTransform deltaTransform;
    private TransformGroup rectangleTransforms;

    //Various Brushes for changing rectangle's color
    private Brush stationaryBrush;
    private SolidColorBrush greenBrush = new SolidColorBrush(Colors.Green);
    private SolidColorBrush redBrush = new SolidColorBrush(Colors.Red);
    private SolidColorBrush orangeBrush = new SolidColorBrush(Colors.Orange);

    public MainPage()
    {
        this.InitializeComponent();

        // Pointer event listeners.
        touchRectangle.PointerPressed += touchRectangle_PointerPressed;
        touchRectangle.PointerReleased += touchRectangle_PointerReleased;

        // Listener for Manipulation events
        touchRectangle.ManipulationStarted += new ManipulationStartedEventHandler(touchRectangle_ManipulationStarted);
        touchRectangle.ManipulationDelta += new ManipulationDeltaEventHandler(touchRectangle_ManipulationDelta);
        touchRectangle.ManipulationInertiaStarting += new ManipulationInertiaStartingEventHandler(touchRectangle_ManipulationInertiaStarting);
        touchRectangle.ManipulationCompleted += new ManipulationCompletedEventHandler(touchRectangle_ManipulationCompleted);

        //Initiate new instance of various Transforms
        dragTranslation = new TranslateTransform();
        deltaTransform = new CompositeTransform();
        rectangleTransforms = new TransformGroup();

        // Combine moving & resizing tranforms into one TransformGroup.
        // Rectangle's RenderTransform can only contain a single transform or TransformGroup.
        rectangleTransforms.Children.Add(dragTranslation);
        rectangleTransforms.Children.Add(deltaTransform);

        //Assign manipulation data to rectangle
        touchRectangle.RenderTransform = rectangleTransforms;
    }
    private async void button_Info_Click(object sender, RoutedEventArgs e)
    {
        var dialog_Info = new MessageDialog("Page Lynn Potter");
        await dialog_Info.ShowAsync();
    }
    private async void button_Instructions_Click(object sender, RoutedEventArgs e)
    {
        var dialog_Instructions = new MessageDialog("PINCH - Zoom In & Out, LONG TOUCH - Toggle Color, FLICK - Move Rectangle");
        await dialog_Instructions.ShowAsync();
    }
    //Handler for pointer released event.
    private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        //Change rectangle's color
        touchRectangle.Fill = greenBrush;
    }
    // Handler for pointer pressed event.
    private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        //Change rectangle's color
        touchRectangle.Fill = orangeBrush;
    }
    void touchRectangle_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingRoutedEventArgs e)
    {
        //Change rectangle's color
        touchRectangle.Fill = redBrush;
    }
    void touchRectangle_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        // Save rectangle's original color before changing color.
        stationaryBrush = touchRectangle.Fill;

        //Change rectangle's color
        touchRectangle.Fill = orangeBrush;
    }

    // Handler for ManipulationDelta event.
    // ManipulationDelta data loaded into translation transform & applied to Rectangle
    void touchRectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.Scale;

        // Move rectangle.
        dragTranslation.X += e.Delta.Translation.X;
        dragTranslation.Y += e.Delta.Translation.Y;


        // Resize rectangle.
        if (deltaTransform.ScaleX > 0 && deltaTransform.ScaleY > 0)
        {
            //Scale Rectangle
            deltaTransform.ScaleX *= e.Delta.Scale;
            deltaTransform.ScaleY *= e.Delta.Scale;
        }
    }
    //When manipulation ends, event handler restores original color to Rectangle
    void touchRectangle_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        // Restore rectangle's original color.
        touchRectangle.Fill = stationaryBrush;
    }
}
}

Answer 1

正如 Clemens 所说，您分配了 touchRectangle.RenderTransform 两次。当您第二次设置 touchRectangle.RenderTransform 时，它将替换您第一次设置的。所以 TranslateTransform 将不起作用。

我们应该能够使用 TransformGroup 将两个或多个 Transform 对象组合成一个复合变换。

例如：

private TranslateTransform dragTranslation;
private CompositeTransform deltaTransform;
private TransformGroup myTransformGroup;

public MainPage()
{
    this.InitializeComponent();
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    deltaTransform = new CompositeTransform();
    myTransformGroup = new TransformGroup();
    myTransformGroup.Children.Add(dragTranslation);
    myTransformGroup.Children.Add(deltaTransform);
    touchRectangle.RenderTransform = myTransformGroup;
}

Answer 2

这是一个可以通过触摸输入移动和缩放的矩形的简化工作示例。

请注意，XAML 中的 TransformGroup 添加了一个 ScaleTransform 和一个 TranslateTransform。 TranslateTransform 不是设置 Canvas.Left 和 Canvas.Top，而是使用它们的值进行初始化。

RenderTransformOrigin 属性设置为缩放发生在矩形的中心。

设置 ManipulationMode="Scale,TranslateX,TranslateY" 代替 All 可能就足够了。

<Rectangle ManipulationDelta="Rectangle_ManipulationDelta"
           ManipulationMode="All" Fill="Red"
           Width="200" Height="40" RadiusX="5" RadiusY="5"
           RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="scaleTransform"/>
            <TranslateTransform x:Name="translateTransform" X="80" Y="190"/>
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

后面唯一的代码是 ManipulationDelta 处理程序：

private void Rectangle_ManipulationDelta(
    object sender, ManipulationDeltaRoutedEventArgs e)
{
    scaleTransform.ScaleX *= e.Delta.Scale;
    scaleTransform.ScaleY *= e.Delta.Scale;
    translateTransform.X += e.Delta.Translation.X;
    translateTransform.Y += e.Delta.Translation.Y;
}

Windows Phone 10万能，如何调整和移动一个矩形？

Windows Phone 10 Universal, how to resize and move a rectangle?

c#

xaml

uwp

windows-10-universal