Question

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

如下图所示，我尝试给出第一个TextBlock _TextBlock1（蓝色） - 其垂直对齐为Top - 上边距为-20，以便其下边缘立即位于其边界的顶部_Border1。这产生了期望的结果。然后我尝试在TextBlock _TextBlock2（橙色）上实现相同的效果，除了_TextBlock1的垂直对齐外，它与Center相同。由于此TextBlock垂直居中，因此我应用-40的上边距，根据我的理解应该产生相同的结果（20个像素将其上边缘移动到边框_Border2的上边缘，另外20个像素到把它完全带到边境之上。）

如下图所示 - 取自Visual Studio中的设计器视图 - 我似乎忽略了边距如何影响这些控件在垂直对齐类型下的位置。有人可以向我解释我应该如何解释边距和对齐类型之间的相互作用（与此示例相关）？另外，如何修改_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

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

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

橙色块的高度为20，其中有100个垂直空间单位，其中居中。 (100 - 20) / 2 = 40，因此该块在其上方及其下方获得40个垂直空间单位。这会将橙色块的左上角与(0, 40)一起放在右侧。

Answer 2

您可以按如下所示修改_TextBlock2以获取所需的行为：

<TextBlock
                Margin="0 -80 0 0"
                x:Name="_TextBlock2"
                Background="Orange"
                VerticalAlignment="Center"
                Height="20"/>

要更好地了解边距和填充，请转到here.

WPF - ＆＃34;中心＆＃34;的影响负边距垂直对齐

2 个答案: