WPF 网格 : Rectangle as transparent overlay

Question

我在 WPF 4.5 中有一个 Canvas ，想用一个 UserControl 覆盖它，它主要由

带有标签和半透明矩形作为背景的网格:

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

对我来说奇怪的是第一个标签被渲染在矩形 上。 ,

但所有其他标签都不是。感谢您让我知道我在这里做错了什么!

Answer 1

那么你的Rectangle被渲染为网格中的第一个元素 Row=0和 Column=0 (假定为网格默认)
将您的 Rectangle 切换为以下内容:

<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" />

现在您可以看到其他标签。
您应该使用 Snoop这可能会像这样为您突出问题