添加背景图像后按图像阻止文本块和按钮答案

【问题标题】：Text Block and button blocking by image after add background image添加背景图像后按图像阻止文本块和按钮
【发布时间】：2021-05-02 08:50:39
【问题描述】：

我是 uwp Visual Studio 的新手，我尝试设置背景图像，但添加背景图像后它将覆盖按钮和文本块。我应该如何让按钮和文本块显示在背景图像之上？

下面是我做的代码

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Image Stretch="Fill" Source="Assets/starsky.png"/>
    
    <StackPanel>
        <TextBlock Name="ResultTextBlock"/>
        <Button Content="Get Weather" Click="Button_Click" />
    </StackPanel>
    
</Grid>

下面是我添加背景图片前后的图片

before

after

【问题讨论】：

您确定这是您使用的确切 XAML吗？因为它非常适合我——元素是按词法顺序添加的，所以StackPanel 将在Image 之上。如果你颠倒它们的顺序，那么你将看不到StackPanel。

标签： visual-studio xaml uwp

【解决方案1】：

您可以通过多种方式来完成这项工作。

执行此操作的最简单方法之一是设置StackPanel 的Canvas.ZIndex 属性。默认情况下，元素的 ZIndex 为 0，因此每个元素都在同一级别，因此图像隐藏了 StackPanel。（更多信息ZIndex）

更新 XAML：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image Stretch="Fill" Source="Assets/starsky.png"/>
    <StackPanel Canvas.ZIndex="1" >
        <TextBlock Name="ResultTextBlock"/>
        <Button Content="Get Weather" Click="Button_Click"/>
    </StackPanel>
</Grid>

【讨论】：

Canvas.ZIndex 属性仅由Canvas 控件使用，Grid 控件不使用。此外，默认值记录为-1 :)。
i.imgur.com/qifssWk.png - 我从属性面板添加了 Canvas.ZIndex 属性（似乎可用于StackPanel），从属性面板的StackPanel 的属性中删除值显示为 0..
您可以将其附加到任何地方，但只有Canvas 可以理解。您是正确的，尽管它默认为零。我会建议更新文档。谢谢！
很高兴我能帮上忙 :)