UWP中点击Grid后Image边距偏移问题及波纹效果实现诉求

看起来你现在碰到两个小问题：一是点击Grid后Image的位置莫名其妙跑偏，二是想用GIF实现点击波纹但效果不对。我来帮你一步步理顺：

先搞定Image位置偏移的问题 #

你当前的Grid里，Image和TextBlock都没设置明确的对齐规则，Grid默认会把元素塞在左上角，但点击触发布局更新（比如控件状态变化）时，很容易导致元素位置意外偏移。你可以给Image加上固定的对齐方式，或者把它放在能精准定位的容器里：

<Grid x:Name="MyGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Tapped="MyGrid_Tapped">
    <!-- 给Image设置居中对齐，确保它位置稳定，默认隐藏，点击时再显示波纹 -->
    <Image x:Name="MyImage" Source="ms-appx:///Assets/ripple.gif" Height="40" Width="40"
           HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed"/>
    <TextBlock x:Name="MyTextBlock" Text="Start" Margin="440,230,0,0"/>
</Grid>

另外要注意：你的Tapped事件绑定的是MyBorder_Tapped，但代码里根本没有Border控件，得改成MyGrid_Tapped才对哦。

更优雅的原生波纹方案（强烈推荐） #

用GIF做波纹其实不是UWP的最佳实践，微软已经提供了原生的波纹效果控件，不管是WinUI的Ripple还是自带的Button控件，效果都更流畅，还不会有布局乱跳的问题。

方案1：用WinUI的Ripple控件 #

先确保你的项目已经安装了Windows UI Library（NuGet搜Microsoft.UI.Xaml），然后这么写：

<!-- 先引入WinUI的命名空间 -->
<Page xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      ...>
    <Grid x:Name="MyGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <!-- Ripple会自动在点击区域生成原生波纹 -->
        <muxc:Ripple x:Name="MyRipple" Target="MyGrid"/>
        <TextBlock x:Name="MyTextBlock" Text="Start" Margin="440,230,0,0"/>
    </Grid>
</Page>

后台代码里触发波纹：

private void MyGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
    // 让波纹从点击位置开始扩散
    MyRipple.TryStartRipple(e.GetPosition(MyGrid));
}

方案2：直接用Button替代Grid（最简单） #

如果你的Grid只是用来响应点击，直接用Button控件最省心——它自带系统原生的点击波纹，完全不用自己折腾GIF：

<Button x:Name="MyButton" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Click="MyButton_Click">
    <StackPanel>
        <TextBlock Text="Start" Margin="440,230,0,0"/>
        <!-- 需要加图标的话直接塞在这里就行 -->
    </StackPanel>
</Button>

Button的波纹是系统默认样式，流畅还稳定，省了超多额外代码。

要是你坚持想用GIF实现波纹 #

除了固定Image位置，还要在点击时计算坐标，把Image精准定位到点击点：

后台代码：

private void MyGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
    var clickPos = e.GetPosition(MyGrid);
    // 让GIF的中心对准点击位置
    Canvas.SetLeft(MyImage, clickPos.X - MyImage.Width / 2);
    Canvas.SetTop(MyImage, clickPos.Y - MyImage.Height / 2);
    MyImage.Visibility = Visibility.Visible;

    // 波纹播放完后自动隐藏GIF
    var timer = new DispatcherTimer();
    timer.Interval = TimeSpan.FromSeconds(0.8); // 对应你的GIF时长
    timer.Tick += (s, args) =>
    {
        MyImage.Visibility = Visibility.Collapsed;
        timer.Stop();
    };
    timer.Start();
}

同时要把Image放在Canvas里，这样才能精准定位：

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

这样就能解决点击后Image乱跑的问题，同时实现你想要的波纹效果啦。

内容的提问来源于stack exchange，提问作者Garry Stephenson