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

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 的默认 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>