奇怪的填充行为

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