Question

我对C＃和XAML很陌生，我正在尝试创建一个应用程序，允许用户移动矩形，使用捏合调整矩形大小，并在触摸时更改颜色。我已经成功创建了Windows Phone 8.1 Silverlight的应用程序，但是我在为Windows Phone 10 Universal创建它时遇到了很多麻烦。关于在Windows Phone 10中处理操作事件的文献非常有限。

有人可以指导我这样做的相应信息，或者如果你能告诉我我的代码出错了吗？

我非常感谢！

谢谢，

页

这是我的MainPage.xaml

MATCH (i:Item {id: 'ByvIzUdbZ'})-[:POSTED_BY]->(u:User) 
OPTIONAL MATCH (u2:User)-[:LIKES]->(i)
WITH i, u, COUNT(u2) AS u2_count
OPTIONAL MATCH (comment:Comment)-[:POSTED_IN]->(i) 
RETURN i, u, u2_count, COUNT(comment) AS comment_count;

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

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

Answer 1

正如克莱门斯所说，你要分配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

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

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

设置RenderTransformOrigin属性，以便缩放发生在Rectangle的中心。

设置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 Universal，如何调整大小和移动矩形？

2 个答案: