Question

我需要在WPF / XAML中重现这个CSS：

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

实质上，我需要在容器中将两个元素放在彼此的顶部。

到目前为止，我有：

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

上面的问题是它没有扩展。我不想硬编码任何保证金数字。

Answer 1

然后放在网格的同一个单元格上：

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

注意：由于未指定RowDefinitions或ColumnDefinitions，因此网格具有默认的1行/ 1列。由于元素没有设置属性Grid.Row或Grid.Column，因此它们位于0,0单元格

Answer 2

当我需要进行非像素定位时，我通常会将我的项目放在网格中，每边的行或列都有一个百分比或“星号”值用于填充。这确实有规模。

类似于：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Height="10*"/>
        <ColumnDefinition Height="80*"/>
        <ColumnDefinition Height="10*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="FooBar" Grid.Column="1"/>
</Grid>

无论缩放是什么，都会渲染一个左边距离左边10％的文本框。

如何在WPF中实现CSS位置绝对 - 位置相对组合？

2 个答案: