在Grid中用ZIndex调整图片层级：点击按钮将图片置于按钮后方

嘿，我懂你的困扰——你想通过点击按钮把Grid里的图片挪到按钮后面，但用Panel.ZIndex好像没生效？其实问题出在Grid的堆叠逻辑和Panel.ZIndex的正确使用方式上，咱们一步步来解决：

先搞懂Grid的层级规则 #

默认情况下，Grid中元素的显示层级是由它们在XAML中的声明顺序决定的：后写的元素会自动显示在前面的元素之上。比如你先写图片、再写按钮，那按钮就会在图片上面；反过来图片会在按钮上面。

而Panel.ZIndex是完全支持Grid的，但要注意：这个属性要设置给Grid的直接子元素，而不是Grid本身！它的作用是覆盖默认的声明顺序，数值越小，元素越靠后。

解决方案：动态调整Panel.ZIndex #

下面是完整的实现代码，你可以直接参考：

XAML部分 #

<Grid HorizontalAlignment="Left" Height="100" Margin="201,79,0,0" VerticalAlignment="Top" Width="100">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <!-- 图片：默认ZIndex设为2，显示在按钮上方 -->
    <Image x:Name="MyImage" Source="your-image-path.png" Panel.ZIndex="2"
           Grid.Row="0" Grid.Column="0" Stretch="Uniform"/>
    <!-- 按钮：默认ZIndex设为1，初始在图片下方 -->
    <Button x:Name="HideImageBtn" Content="Hide Image" Click="HideImageBtn_Click"
            Panel.ZIndex="1" Grid.Row="1" Grid.Column="0"/>
</Grid>

C#后台代码 #

private void HideImageBtn_Click(object sender, RoutedEventArgs e)
{
    // 点击后把图片的ZIndex设为0，比按钮的1小，就会跑到按钮后面
    Panel.SetZIndex(MyImage, 0);
    // 如果想实现切换显示/隐藏层级的效果，可以加个判断：
    // Panel.SetZIndex(MyImage, Panel.GetZIndex(MyImage) == 0 ? 2 : 0);
}

额外小提示：纯XAML实现（无需后台代码） #

如果你不想写后台代码，也可以用WPF触发器完成纯XAML的层级切换：

<Button Content="Hide Image">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <Int32Animation Storyboard.TargetName="MyImage"
                                     Storyboard.TargetProperty="(Panel.ZIndex)"
                                     To="0" Duration="0:0:0"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

这样就能完美实现你想要的点击按钮把图片藏到按钮后面的效果啦～

内容的提问来源于stack exchange，提问作者Abdel Hidalgo