带网格的同心矩形

Question

我对 WPF 完全陌生，所以请温柔一点。 :) 我有一个 4x4 网格。在每个单元格中，我希望有同心矩形框住单元格，然后在其中放置小部件。外部矩形用于填充单元格。然后内部矩形将位于外部矩形的边界内，等等。我能够成功放置第一个矩形。但是，我在放置内部矩形时遇到了麻烦。我的直觉说，这应该是可行的，无需代码隐藏。

我已经尝试过画布中的画布，更不用说各种排列组合了。

        <Grid Grid.Row="0" Grid.Column="0" >
            <Canvas>
                <Rectangle Canvas.Left="0" Stroke="Gray" Canvas.Top="0" RadiusX="10" RadiusY="10" StrokeThickness="20" x:Name="r0c0"
                           Stretch="Fill" Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}" 
                           Height="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>

                <Rectangle Canvas.Left="15" Stroke="Blue" Canvas.Top="15" RadiusX="5" RadiusY="5" StrokeThickness="10"
                           Stretch="Fill" Width="{Binding ActualWidth, ElementName=r0c0}" 
                           Height="{Binding ActualHeight, ElementName=r0c0}"/>
            </Canvas>
       </Grid>

Answer 1

想通了。画布和矩形做得过火了。边界是要走的路。

<Grid Grid.Row="0" Grid.Column="1">
   <Border BorderThickness="20" BorderBrush="Gray" CornerRadius="10" 
      Margin="0,0,0,0"/>
   <Border BorderThickness="10" BorderBrush="Blue" CornerRadius="10" 
      Margin="15,15,15,15"/>
</Grid>