WPF Grid: Rectangle as transparent overlay

Question

I have a canvas in WPF 4.5 and want to overlay it with a UserControl, which consists mainly of

a Grid with labels and a semi-transparent rectangle as background:

<UserControl x:Class="Cwss.Tactical.Navigation.ObjectInfoView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:u="clr-namespace:Cwss.Utils.Converter"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300">
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Tactical/Styles/CommonStyle.xaml"></ResourceDictionary>
        <ResourceDictionary>
          <Style x:Key="AttrName"
                 TargetType="{x:Type Label}">
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontSize"
                    Value="14"></Setter>
          </Style>
          <Style x:Key="AttrValue"
                 TargetType="{x:Type Label}">
            <Setter Property="Foreground"
                    Value="Yellow" />
            <Setter Property="FontSize"
                    Value="14"></Setter>
          </Style>
        </ResourceDictionary>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>


  <Grid Width="300"
        Height="200">

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Rectangle Panel.ZIndex="-1"
               Opacity=".5"
               Width="300"
               Height="200"
               Fill="Blue"
               Stroke="Blue"
               StrokeThickness="2"
               RadiusX="8"
               RadiusY="8">
    </Rectangle>

    <Label Style="{StaticResource AttrName}"
           Grid.Column="0"
           Content="Class"></Label>
    <Label Style="{StaticResource AttrValue}"
           Grid.Column="1"
           Name="ObjectKnowledge_Clas"
           Content="Hi"></Label>
    <Label Style="{StaticResource AttrName}"
           Grid.Column="0"
           Grid.Row="1"
           Content="Range"></Label>
    <Label Style="{StaticResource AttrValue}"
           Grid.Column="1"
           Grid.Row="1"
           Content="{Binding ObjectKnowledge.Range, Converter={u:RangetoStringConverter}}"></Label>
  </Grid>
</UserControl>

The strange thing for me is that the first label gets rendered over the rectangle ,

but all other labels not. Thanks for letting me know what I am doing wrong here!

Answer 1

Well your Rectangle is rendered as the First element in the Grid with Row=0 and Column=0 (Assumed as Default by Grid)

Switch your Rectangle to something like:

<Rectangle Grid.RowSpan="4"
           Grid.ColumnSpan="2"
           Width="300"
           Height="200"
           Panel.ZIndex="-1"
           Fill="Blue"
           Opacity=".5"
           RadiusX="8"
           RadiusY="8"
           Stroke="Blue"
           StrokeThickness="2" />

Now you see the other labels.

You should use Snoop which could have highlighted the issue for you like so