如何在DockPanel内实现TextBox/StackPanel的居中或拉伸效果

问题背景 #

• 尝试过多种实现方式均未达到预期效果，核心需求为将指定标题文本显示在顶部栏的居中位置。
• 此前通过为待居中文本单独创建DockPanel容器的方式实现过居中效果，但当前场景下使用该方法会打乱整体界面结构，无法复用。
• 目标居中效果参考：
  

当前现有XAML代码 #

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="1" Grid.Column="0">
        *** MY OTHER CODE ****
    </DockPanel>
    <DockPanel  Grid.Column="0" Background="#FF79A6A6" Name="mainMenuName">
        *** MY OTHER CODE ****
    </DockPanel>

    <DockPanel LastChildFill="True" Grid.Column="1" Name="topMenu">
        <TextBlock Text="SomeText" HorizontalAlignment="Center"/>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Horizontal">
                <TextBox x:Name="Search" />
                <Button  Width="50" Name="SearchBtn" Content="Search" HorizontalAlignment="Center"></Button>
        </StackPanel>
    </DockPanel>

    <DockPanel Name="mainContent" Background="Black" Grid.Row="1" Grid.Column="1">
        *** OTHER CODE ***
    </DockPanel>
</Grid>

问题原因 #

现有代码中topMenu使用DockPanel作为根容器，其布局逻辑天生不支持当前需求：DockPanel的子元素会按声明顺序依次停靠，先声明的居中TextBlock，只会在右侧StackPanel停靠后剩余的空间内居中，并非在整个顶部栏的全宽度范围内居中，因此仅设置HorizontalAlignment="Center"无法达到全局居中的效果。之前套独立DockPanel的方案会破坏原有Grid的行列布局规则，才会导致界面错乱。

修复方案 #

不需要额外嵌套多余容器，直接将topMenu的根容器从DockPanel替换为Grid即可。Grid支持元素叠加布局，可同时实现「搜索栏右对齐、标题全局居中」的效果，完全不会影响其他区域的布局结构，修改后的topMenu代码如下：

<!-- 直接替换原Name为topMenu的DockPanel节点，其余布局代码无需改动 -->
<Grid Grid.Column="1" Name="topMenu">
    <!-- 右侧搜索区域，右对齐停靠 -->
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Horizontal" Margin="6">
        <TextBox x:Name="Search" Width="140" Margin="0 0 6 0"/>
        <Button Width="50" Name="SearchBtn" Content="Search"/>
    </StackPanel>
    <!-- 标题文本，在整个顶部栏范围内水平+垂直全局居中 -->
    <TextBlock Text="SomeText" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

如果后续标题文本较长，担心和右侧搜索控件重叠，只需给TextBlock设置对应左右边距预留空间即可，比如添加Margin="200 0"，边距值和右侧搜索区域的总宽度匹配即可。

内容的提问来源于stack exchange，提问作者Pahomka