uwp - StackPanel ，边框在 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)，它工作正常。我不知道这里到底发生了什么。任何人都可以解释一下吗？

标签： uwpuwp-xaml

Answer 1

原因是总和超过了TextBlock.HeightStackpanel内部空间margin.Top的margin.Bottom高度。

在您的场景中，您设置StackPanel.BorderThickness为1，这导致Stackpanel的内部高度为30。如果您将margin设置为（12 6 0 6），则TextBlock.Height和margin.Top和margin.Bottom的总和为32，它超过30，所以文本块覆盖了stackpanel的边界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)