StackPanel 和 Border 在 UWP 中无法正确绘制？

Question

<StackPanel  BorderBrush="LightGray" Width="200" Height="32" BorderThickness="1">
    <TextBlock Text="hai" FontSize="14" Height="20" LineHeight="20"   Margin="12 6 0 6"/>
</StackPanel>

当我将 TextBlock 边距设置为 (12 6 0 6) 时，StackPanel 的底部边框无法正确呈现。如果我将边距设置为 (12 6 0 0)，它工作正常。我不知道这里到底发生了什么。谁能解释一下？

Answer 1

原因是TextBlock.Height和margin.Top和margin.Bottom的总和超过了Stackpanel内部space的高度。

在您的场景中，您将StackPanel.BorderThickness设置为1，这导致Stackpanel的内部高度为30。如果您将边距设置为(12 6 0 6)，则总计TextBlock.Height and margin.Top and margin.Bottom 是32，它超过了30，所以文本块覆盖了stackpanel的border bottem。

例如，如果您设置 StackPanel。 BorderThickness改为4，如下：

<StackPanel  BorderBrush="LightGray" Width="200" Height="32" BorderThickness="4">
    <TextBlock Text="hai" FontSize="14" Height="20" LineHeight="20"   Margin="12,2,0,2"/>
</StackPanel>

可以看到，内部高度为24，textblock高度为20，所以我们需要将margin.Top和margin.Bottom之和设置为小于4，如( 12 2 0 2),(12 2 0 1),(12 2 0 0)

StackPanel 和 Border 在 UWP 中无法正确绘制？

StackPanel , Border won't draw properly in UWP?

uwp

uwp-xaml