WPF - “中心”垂直对齐对负边距的影响答案

【问题标题】：WPF - Effects of "Center" vertical alignment on negative marginsWPF - “中心”垂直对齐对负边距的影响
【发布时间】：2017-09-22 23:24:39
【问题描述】：

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

如下所示，我尝试为第一个 TextBlock _TextBlock1（蓝色） - 垂直对齐为 Top - 上边距 -20，以便其下边缘将立即位于其边框的顶部_Border1。这会产生所需的结果。然后，我尝试在 TextBlock _TextBlock2（橙色）上实现相同的效果，除了垂直对齐为 Center 之外，它与 _TextBlock1 相同。由于此 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>

【问题讨论】：

您是否考虑过将它们放入 Canvas 并为 Canvas.Left 和 Canvas.Top 设置动画？
并非如此。您的意思是将每个 TextBlock 包装在其自己的 Canvas 中，然后仅对其位置进行动画处理？你提出这个建议有什么特别的原因吗？我很好奇，因为我什至没有想到这一点。
我建议这样做，因为这就是您在 WPF 中进行任意控件放置的方式。

标签： c# .net wpf xaml

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答。我已经阅读了有关边距、填充和对齐方式的文档，但您的解释让所有这些都真正点击了。

【解决方案2】：

您可以如下修改您的 _TextBlock2 以获得所需的行为：

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

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

【讨论】：