奇怪的填充行为

Question

在我的应用程序中，尝试将 8 个小方块放置在一个大方块周围。见下图。

<UserControl
    <UserControl.Resources>
    <Style x:Key="ResizerStyle" TargetType="UserControl">
    <Setter Property="Width" Value="{Binding Padding.Top, ElementName=border, Mode=Default}"/>
    <Setter Property="Height" Value="{Binding Padding.Top, ElementName=border, Mode=Default}"/>
    </Style>
    <Thickness x:Key="ScalersSize">8</Thickness>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Border x:Name="border" BorderThickness="1" Panel.ZIndex="-1000" Padding="{DynamicResource ScalersSize}" Background="#00000000">
            <Rectangle Fill="#FFC00000"/>
        </Border>
        <local:Scaler VerticalAlignment="Top" Cursor="SizeNS" HorizontalAlignment="Center" Style="{StaticResource ResizerStyle}"/>
        <local:Scaler VerticalAlignment="Top" Cursor="SizeNESW" HorizontalAlignment="Right" Style="{StaticResource ResizerStyle}"/>
        <local:Scaler VerticalAlignment="Top" HorizontalAlignment="Left" Cursor="SizeNWSE" Style="{StaticResource ResizerStyle}"/>
        <local:Scaler VerticalAlignment="Bottom" Cursor="SizeNS" Style="{StaticResource ResizerStyle}"/>
        <local:Scaler VerticalAlignment="Bottom" Cursor="SizeNWSE" Style="{StaticResource ResizerStyle}" HorizontalAlignment="Right"/>
        <local:Scaler VerticalAlignment="Bottom" Cursor="SizeNESW" Style="{StaticResource ResizerStyle}" HorizontalAlignment="Left"/>
        <local:Scaler HorizontalAlignment="Right" VerticalAlignment="Center"  Cursor="SizeWE" Style="{StaticResource ResizerStyle}"/>
        <local:Scaler HorizontalAlignment="Left" VerticalAlignment="Center"  Cursor="SizeWE" Style="{StaticResource ResizerStyle}"/>
    </Grid>
</UserControl>

以下呈现红色 62x62 正方形。但据我所知 80 - 8 * 2 = 64。那么为什么它被渲染为 62 x 62 平方呢？

Answer 1

我不知道您从哪里获得 80，因为它不在 XAML 中的任何位置，但我认为这应该是外部 UserControl 的大小。在你的计算中你错过了一个部分：边界本身。您将 BorderThickness 设置为 1，这意味着边界线的所有边上都有 1 个单位的区域，但由于没有设置 BorderBrush，因此未显示。所以实际大小为 80 - (8 * 2) - (1 * 2) = 62