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

BorderThickness

如何影响

Margin

、

Padding

的宽度或UI控件的内容？
请参见下面的XAML

为什么

TextBox

FirstName/Lastname的宽度为183+183+fudge factor=400的垂直

StackPanel

为什么

TextBox

City/State/Zip宽度216+70+70+fudge factor=400垂直

StackPanel

福吉系数是如何计算的

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

填充
+
边框
+内容+
边距
堆叠面板行上每个组件的边距。
这个问题的答案比我想象的要复杂

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

让我们计算一下。顶部的
StackPanel
宽度为
400
。它的每一侧都有
2
的边框。它的右填充为
10
。那就剩下386个了。名字和姓氏
文本框
控件的每个左边距均为
10
。也就是说，
386-10-10=366
。现在如果我们除以366/2=183

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

这似乎正是我们所需要的，并且给出了实验得到的值

但请等待：


即使计算结果完全正确，但如果您靠近姓氏字段的右边框，结果在我的设备上仍然有点偏离。会发生什么？输入缩放

我的屏幕具有150%的缩放比例。因为UWP是在高像素密度屏幕上构建的，所以您使用的所有值都不是实际像素，系统会自动执行必要的计算以使所有内容都适合。但是，在150%的缩放比例下，我们有一个问题。让我们做
183*1.5=274.5
。这正好是半个像素，这是我们无法显示的。现在，操作系统是进行捏造的人！如果我运行应用程序并使用Live属性编辑器，我可以看到
文本框
控件的实际渲染宽度不是
183
，而是
183.333


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

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

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

只是确认一下，当我将边距更改为12个有效像素时，名字和姓氏文本框现在将为180像素宽，布局将看起来恰到好处