visual studio - Text Block and button blocking by image after add background image

Question

I am new to uwp visual studio and I trying to set a background image, but it will cover the button and the text block after I add the background image. How should I make the button and text block display on top the background image?

below are the code I doing

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

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

below are the image before and after I add background image

before

after

question from:https://stackoverflow.com/questions/65937457/text-block-and-button-blocking-by-image-after-add-background-image

Answer 1

There are multiple ways you can get this working.

One of the easiest way you can do this is to set the Canvas.ZIndex attribute of the StackPanel. By default, the ZIndex of the elements is 0 so every element is on the same level, due to which the image hides the StackPanel. (More info on ZIndex)

Updated 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>