c# - WPF - "Center"垂直对齐对负边距的影响

Question

在尝试通过修改边距来为控件设置动画时，我意识到我可能无法完全理解不同对齐选项对负边距的影响。为了更好地解释我的问题，我创建了一个示例，其中包含两个 TextBlock 控件，每个控件都被一个边框包围。

如下所示，我尝试给第一个 TextBlock _TextBlock1(蓝色)——它的垂直对齐方式为 Top——上边距为 -20，这样它底部边缘将立即位于其边框 _Border1 的顶部。这会产生所需的结果。然后，我尝试在 TextBlock _TextBlock2(橙色)上实现相同的效果，它与 _TextBlock1 相同，只是它的垂直对齐方式为 Center。由于此 TextBlock 垂直居中，因此我应用了 -40 的上边距，根据我的理解，这应该会产生相同的结果(20 像素将其上边缘移动到边框 _Border2 的上边缘，另一个20 像素使其完全高于边框)。

如下图所示 - 取自 Visual Studio 中的设计器 View - 我似乎遗漏了一些关于边距如何影响这些控件在给定垂直对齐类型时的位置的信息。 有人可以向我解释一下我应该如何解释边距和对齐类型之间的相互作用(与本例相关)吗？另外，如何修改 _TextBlock2 上的边距以产生与 _TextBlock1 相同的结果？

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        Height="350" Width="525">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="60"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border
            x:Name="_Border1"
            Grid.Row="1"
            Grid.Column="1"
            BorderBrush="Black"
            BorderThickness="1">

            <TextBlock
                Margin="0 -20 0 0"
                x:Name="_TextBlock1"
                Background="DodgerBlue"
                VerticalAlignment="Top"
                Height="20"/>
        </Border>

        <Border
            x:Name="_Border2"
            Grid.Row="1"
            Grid.Column="2"
            BorderBrush="Black"
            BorderThickness="1">

            <TextBlock
                Margin="0 -40 0 0"
                x:Name="_TextBlock2"
                Background="Orange"
                VerticalAlignment="Center"
                Height="20"/>
        </Border>
    </Grid>
</Window>

Answer 1

边距不会“移动”元素。边距有效地增大或缩小元素的布局矩形的大小，该矩形由其父元素提供。对齐控制元素如何在其布局矩形内定位自己。

最初，橙色 block 具有其父 block 的整个区域可用于定位，因此其布局矩形以 60 的高度开始。通常，添加(正)边距会缩小布局矩形中可用于定位元素的部分。但是 -40 的上边距有效地增长 橙色 block 的布局矩形，因此它的高度为 60 - (-40) = 100。让我们将有效布局矩形的左上角定义为 (0, 0)。相对于此，父边框的左上角是(0, 40)。

橙色 block 的高度为 20，并且它有 100 单位的垂直空间用于居中。 (100 - 20)/2 = 40，因此 block 在其上方和下方获得 40 单位的垂直空间。这会将橙色 block 的左上角放在 (0, 40) 位置，与其父 block 一起。