Drawing boxes between different Grid elements

If I have a grid like this:

<Grid ColumnCount="4">
  <Text Value="18" />
  <Text Value="19" />
  <Text Value="20" />
  <Text Value="21" />

Is there a way to get this?


Yes, but you’ll have to use manual grid positioning: setting the row and column directly on some elements. Items in a grid are allowed to share positions.

Try adding <Rectangle Row="1" Column="1" ColumnSpan="2" Color="#AFA" CornerRadius="50"/> to the above.

You should ensure all the items with explicit rows and columns come after those items with implied rows/columns. Though, if you need a lot of such things, you’re better off just giving all the elements and explicit row/column.