Question

BorderThickness如何影响用户控件的Margin，Padding或内容的宽度？
请参阅下面的XAML。

为什么TextBox FirstName / Lastname的宽度为183 + 183 + fudge-factor = 400 Width of Vertical StackPanel？

为什么TextBox城市/州/邮编宽度216 + 70 + 70 +软糖因子= 400垂直宽度StackPanel？

如何计算Fudge-Factor？

<!-- This code aligns perfectly on my Windows 10... But, I had
     to fudge the widths in ways i don't understand fully
    in order to get it to look right... how does that work?-->
<Grid Background="OrangeRed">
    <StackPanel Width="400" VerticalAlignment="Center" BorderBrush="Black"
           BorderThickness="2" Background="AliceBlue" Padding="0,0,10,10">
        <StackPanel Orientation="Horizontal" >
            <TextBox Header="First Name" PlaceholderText="John" 
                 Width="183" Margin="10,10,0,0" />
            <TextBox Header="Last Name"  PlaceholderText="Smith" 
                 Width="183" Margin="10,10,0,0" />
        </StackPanel>

        <TextBox Header="Address1"  PlaceholderText="1 main st"  
                Margin="10,10,0,0" />
        <TextBox Header="Address2"  PlaceholderText="" 
                Margin="10,10,0,0" />

        <StackPanel Orientation="Horizontal">
            <TextBox Header="City"   PlaceholderText="Townville" 
                Width="216" Margin="10,10,0,0" />
            <TextBox Header="State"  PlaceholderText="XX" Width="70"
                Margin="10,10,0,0" />
            <TextBox Header="Zip"    PlaceholderText="12345" Width="70" 
                Margin="10,10,0,0" />
        </StackPanel>


    </StackPanel>
</Grid>

我确定它很简单，我只是不理解如何在每一行上添加所有部分，使其最多可以加到容器宽度400：Padding + {{ 1}} +内容+ Border s，用于堆叠面板行上的每个组件。

Answer 1

这个问题的答案比我预期的要复杂得多。

在创建控件的布局阶段使用Width属性。它告诉容器控件希望能够显示多少空间。控件宽度中的BorderThickness 包含。

让我们计算一下。您的热门StackPanel的宽度为400。它的每边都有2的边框。它的右边填充为10。这让我们386。名字和姓氏TextBox控件的左边距为10。那是386 - 10 - 10 = 366。现在，如果我们划分366 / 2 = 183。

至于下面的控件 - 400 - 4 - 10 - 10 * 3 = 356等于216 + 70 + 70。

这似乎正是我们所需要的，并提供了您通过实验获得的价值。

但等等：

即使计算完全正确，如果您关闭姓氏字段的右边框，我的设备上的结果仍有点偏差。怎么了？输入缩放。

我的屏幕缩放率为150％。由于UWP在构建时考虑了高像素密度屏幕，因此您使用的所有值均为"effective pixels"而不是实际像素，系统会自动执行必要的计算以使所有内容都适合。然而，随着150％的缩放，我们遇到了一个问题。我们来做183 * 1.5 = 274.5。这恰好是一个像素的一半，这是我们无法显示的东西。现在操作系统是捏造的人！如果我运行应用程序并使用实时属性编辑器，我可以看到TextBox控件的实际渲染宽度不是183，而是183.333。

现在让我们计算183.333 * 1.5 = 274.9995 ~ 275。因此，系统“捏造”了一个“实际”像素，以便可以显示控件。当然这破坏了我们的布局，导致第二个控件的右边界可用空间减少了1个像素（也扩展到275个实际像素）。

那么如何避免所有这些问题？

由于进行了缩放，Microsoft建议将所有内容对齐到4的倍数，这将使您的设计与4x4网格对齐并且令人愉悦。乘以.5因子也不会导致问题。边框也是安全的，因为2有效像素宽2*.5 = 3。理想情况下，你应该养成在整个应用程序中使用4的倍数来表示所有宽度，边距和填充值的习惯，这样可以确保一切看起来都清晰，清晰，没有视觉上的奇怪。

为了确认，当我将边距更改为12个有效像素时，First和Last名称文本框现在将为180像素宽，布局看起来恰到好处。

边框厚度如何影响UI控件的边距，填充或内容的宽度？

1 个答案: