Overlapping views in Windows apps

Question

I want to implement the following page for my app

So I used something like (simplified):

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock>...</TextBlock>
    <ListView>...</ListView>
    <TextBlock>...</TextBlock>
</Grid>

If an error occur and the data is not available I'd like to show an error in the background of the page without blocking the user interaction. Something like:

I implemented the error with an stackpanel

How do I overlap the ListView and the stackpanel? Keeping the stackpanel centered in the listview room?

I tried with a Canvas but don't know how to center the view

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock>...</TextBlock>
    <Canvas>
       <StackPanel>..</StackPanel>
       <ListView>...</ListView>
    </Canvas>
    <TextBlock>...</TextBlock>
</Grid>

Answer 1

Try displaying the popup over the content of the page (on the same container as your LayoutRoot)

   <Grid>
      <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock>...</TextBlock>
        <TextBlock>...</TextBlock>
       </Grid>
       <Grid x:Name="PopUpGrid" Width="200" Height="200" 
             VerticalAllignment="Center" HorizontalAllignment="Center">
       ....
       </Grid>
   </Grid>