窗口布局之——顶部标题栏的标题显示与按钮

希望望左侧显示标题 右边显示关闭、最小化、最大化等按钮。

使用Grid

下面代码中这种将列的宽度设置方法，可以实现控件的填充效果。第一列的宽度等于总宽度-第二列存放控件的宽度。

Grid布局实现方法

<Grid Height="30" Background="LightGray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" VerticalAlignment="Center" Margin="5,0"
               Text="窗口标题" FontWeight="Bold"/>
    <Button Grid.Column="1" Width="30" Height="30" Content="X"
            VerticalAlignment="Center" Click="CloseButton_Click"/>
</Grid>

使用DockPanel

这个方法中，我就踩坑了。 WPF中DockPanel 的布局行为和子控件的添加顺序密切相关，换句话说，DockPanel 是按照子元素添加的顺序来安排他们如何停靠的。
下面两种方法，仅仅因为控件添加顺序不同，就会导致不同的布局效果。原因上面已经解释过了，进一步讲，DockPanel中的LastChildFill 属性默认为True，即最后的元素会填充剩余区域。在第二种方法中，先添加 TextBlock，标题文本默认填充了整个面板剩余空间，然后再添加右停靠的按钮，按钮仍然停靠右边，但是文本已经占满了剩余空间，表现为覆盖或者布局怪异。
因此对于DockPanel一定要想好控件添加顺序。

正确方法

<DockPanel Height="30" Background="LightGray">
    <Button Width="30" Height="30" Content="X" DockPanel.Dock="Right" Click="CloseButton_Click"/>
    <TextBlock VerticalAlignment="Center" Margin="5,0" Text="窗口标题" FontWeight="Bold"/>
</DockPanel>

错误方法

<DockPanel Height="30" Background="LightGray">
    <TextBlock VerticalAlignment="Center" Margin="5,0" Text="窗口标题" FontWeight="Bold"/>
    <Button Width="30" Height="30" Content="X" DockPanel.Dock="Right" Click="CloseButton_Click"/>
</DockPanel>