Question

I have a need to reproduce this CSS in WPF/XAML:

<div style="position: relative;">
    <div style="position: absolute; top: 0; left: 0;">Foo bar</div>
    <div style="position: absolute; top: 0; left: 0;">Foo bar</div>
</div>

In essence, I need to have two elements positioned on top of each other within their container.

So far I have:

<StackPanel>
    <TextBlock Text="Foo bar">
    <TextBlock Margin="0,-16,0,0" Text="Foo bar">
</StackPanel>

The problem with above is that it does not scale. I don’t want to hard code any margin figures.

Answer 1

Place then on the same cell of a grid:

<Grid>
    <TextBlock Text="Foo bar">
    <TextBlock Text="Bar foo">
</Grid>

Note: Since there’s no RowDefinitions or ColumnDefinitions specified, the grid have a default 1 row / 1 column. Since the elements don’t have the property Grid.Row or Grid.Column set, they are placed on the 0,0 cell