How to slightly overlap two elements?

[ator-dev]

I have two elements, both sized according to their contents.

I need them to overlap by exactly 10 units, with the second element drawn on top. How can I do this?

I've already tried this:

<Grid ColumnDefinitions="Auto,10,Auto">
    <!-- Example controls -->
    <TextBlock Grid.Column="0" Grid.ColumnSpan="2">Hello!</TextBlock>
    <TextBlock Grid.Column="1" Grid.ColumnSpan="2">xxxxxxxxxx</TextBlock>
</Grid>

…along with several variations, including proportional sizing with *. The results are all very strange. Each element collapses into the tiny middle column, with most of the contents clipped, despite the fact they each have their own Auto column to expand into!

---

Visualisation:

Imagine the elements look like this:

|   Hello!   |   | xxxxxxxxxx |

The text varies, and the length of the x-train varies.

Now imagine the following but with the second element on top instead of the second line:

|   Hello!   |
           | xxxxxxxxxx |

[timunie]

You could apply a negative margin for the second element.

Edit: forget about the alternative, try the margin.

[ator-dev]

That is so much simpler, thank you! My work is unblocked 🙂

I'm still curious about why the grid method didn't work, because it feels like a usecase for the grid (and it would be useful in more complex scenarios). Do you know?

[timunie]

I think the auto calculation fails when the item stretches several columns. The algorithm cannot calculate the cell bounds across different columns. Imagine the Columns are Auto,Auto,Auto. How to calculate it for a control that spans two of it?

[ator-dev]

Thanks, I think I see. I wonder whether WPF handles this... must look into it later!