点击网格后更改图像边距的位置

Question

所以，当我在UWP中挖掘网格时，我试图产生连锁反应。

对于我的XAML代码：

<Grid x:Name="MyGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Tapped="MyBorder_Tapped">
        <Image x:Name="MyImage" Source="ms-appx:///Assets/ripple.gif" Height="40" Width="40"/>
        <TextBlock x:Name="MyTextBlock" Text="Start"  Margin="440,230,0,0"></TextBlock> 
</Grid>

如您所见，我已经包含了图像和文字。我仅为点击事件目的包含了一个文本。

对于CS代码：

private void MyBorder_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Point touchPosition = e.GetPosition(MyGrid);
            MyImage.Margin = new Thickness(touchPosition.X, touchPosition.Y, 0, 0);
            MyTextBlock.Margin = new Thickness(touchPosition.X, touchPosition.Y, 0, 0);

        }

对于TextBlock，它会正确地更改边距，但是，对于图像对象，我不知道它有偏移的原因。

以下是输出的示例屏幕截图：

注意：TextBlock文本的位置是我点击网格的位置，正如您可以看到两者之间的偏移。

Answer 1

这是因为图像将默认的 Horizo​​nal / VerticalAlignment 设置为拉伸，如果将其更改为 Left / Top ，则应计算边距如你所愿 - 从左上角开始：

<Grid x:Name="MyGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Tapped="MyBorder_Tapped">
    <Image x:Name="MyImage" Source="ms-appx:///Assets/StoreLogo.png" Height="40" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <TextBlock x:Name="MyTextBlock" Text="Start"  Margin="440,230,0,0"></TextBlock>
</Grid>

但是你可能会考虑对此进行单独控制，也许可以使用偏移量的某些 RenderTransform 而不是操纵边距。但是，这取决于您的需求。

应用偏移的其他方式：

<Image x:Name="MyImage" Source="ms-appx:///Assets/StoreLogo.png" Height="40" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Image.RenderTransform>
        <TranslateTransform X="-20" Y="-20"/>
    </Image.RenderTransform>
</Image>