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

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

这是因为 Image 默认 Horizonal/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>

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

Changing Position of Image margin after the grid is tapped

c#

xaml

uwp

uwp-xaml