WPF之布局属性HorizontalAlignment、HorizontalContentAlignment、VertialAlignment、VerticalContentAlignment

WPF中调整控件相对位置的属性有很多，比较常见的属性比如：HorizontalAlignment、HorizontalContentAlignment、VertialAlignment、VerticalContentAlignment。

到底如何使用呢？以下以HorizontalAlignment和HorizontalContentAlignment为例来说明。

--->HorizontalAlignment/VerticalAlignment，指自身相对于父元素的位置。

--->HorizontalContentAlignment/VerticalContentAlignment,指子元素在自身元素中的相对位置。这里之前一直以为，只有内容控件(ContentControl或其子类）才能设置该属性，实际上不仅仅是ContentControl,还有其它一些元素也有（比如TextBox、Slider......)。不过，最常用的TextBlock控件式没有HorizontalContentAlignment/VerticalContentAlignment属性的。

以下是一些常见元素的默认HorizontalContentAlignment/VerticalContentAlignment的默认值。

元素名     HorizontalContentAlignment / VerticalContentAlignment

Button – Center, Center

Calendar – Left, Top

CheckBox – Left, Top

ComboBox – Left, Top

ContextMenu – Left, Center

DataGrid – Left, Top

DatePicker – Stretch, Top

Expander – Stretch, Stretch

GroupBox – Left, Top

Label – Left, Top

ListBox – Left, Center

Menu – Left, Top

PasswordBox – Left, Top

ProgressBar – Left, Top

RadioButton – Left, Top

RepeatButton – Center, Center

RichTextBox – Left, Top

Slider – Left, Top

StatusBar – Left, Top

TabControl – Center, Center

TextBox – Left, Top

TreeView – Left, Center

此外，需要注意的是，对于有些元素在特定环境下来讲，设置HorizontalAlignment/VerticalAlignment是无效的。

比如：

（1）StackPanel中放置的元素，如果StackPanel的Orientation=Horizontal，那么StackPanel中元素的水平位置都是从左向右排列，无法通过设置 HorizontalAlignment来调整StackPanel内部元素的水平位置。同样，当StackPanel的Orientation=Vertical，那么StackPanel中元素的竖直位置都是从上向下排列，无法通过设置 VerticalAlignment来调整StackPanel内部元素的竖向位置。

比如下面的例子，虽然给TextBox设置了VerticalContentAlignment="Bottom",但其仍然位于上部。不过，在另外一个方向，还是可以用 HorizontalAlignment来调整的。

 

        <StackPanel Background="AliceBlue" Margin="10" Grid.Row="0" Width="400">
            <TextBox Background="LightCoral" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" 
                     VerticalContentAlignment="Bottom" Text="Textbox" Width="200" 
                     HorizontalContentAlignment="Center" Margin="5"/>
        </StackPanel>

（2）DockPanel中放置的元素：

当没有设置DockPanel子元素的尺寸的时候，则会完全按照DockPanel的“紧凑排列与填充规则”来执行。比如下面的代码：

        <DockPanel Background="AliceBlue" Margin="10" Grid.Row="0" Width="400">
            <TextBox Background="LightCoral" HorizontalAlignment="Right" VerticalAlignment="Bottom" 
                     VerticalContentAlignment="Bottom" Text="Textbox"  
                     HorizontalContentAlignment="Center" Margin="5"/>
        </DockPanel>

显示如下，即TextBox填充了DockPanel的内部控件（Margin=30）：

当设置了HorizontalAlignment或VerticalAlignment时，就不会填充，而是根据TextBox内部文字的大小紧凑排列。代码和显示如下所示：

        <DockPanel Background="AliceBlue" Margin="10" Grid.Row="0" Width="400">
            <TextBox Margin="30" Background="LightCoral" 
                     HorizontalAlignment="Right" VerticalAlignment="Bottom"
                     VerticalContentAlignment="Bottom" Text="Textbox"  
                     HorizontalContentAlignment="Center" />
        </DockPanel>