奇怪的填充行为

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乘62平方？

Answer 1

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