WinUI 3 ComboBox Header覆盖控件：如何调整Header位置？

方案1：手动拆分Header与ComboBox（最直接可靠） #

放弃使用ComboBox自带的Header属性，改用布局容器单独放置标题和ComboBox，完全控制两者的位置关系：

垂直布局（Header在上方） #

<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
    <!-- 使用系统Caption样式保证视觉一致性，Margin调整标题与控件的间距 -->
    <TextBlock Text="Filter By" Style="{StaticResource CaptionTextBlockStyle}" Margin="0,0,0,4"/>
    <ComboBox x:Name="DataGridFilter"
              HorizontalAlignment="Stretch"
              ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}" 
              SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

水平布局（Header在左侧） #

<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" Spacing="8">
    <TextBlock Text="Filter By" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center"/>
    <ComboBox x:Name="DataGridFilter"
              HorizontalAlignment="Stretch"
              ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}" 
              SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

方案2：修改ComboBox的ControlTemplate调整Header位置 #

如果必须使用ComboBox自带的Header属性，可以通过修改控件模板，调整Header与主体内容的布局结构：

1. 用Blend提取WinUI 3 ComboBox的默认ControlTemplate（避免手动编写完整模板出错）
2. 在模板的根容器中，将Header和ComboBox主体内容放在垂直/水平布局容器中，或调整Grid的行/列定义：
   • 垂直布局：将Header放在Grid的第一行（Height="Auto"），主体内容放在第二行
   • 水平布局：将Header放在Grid的第一列，主体内容放在第二列

示例简化版模板（仅展示核心布局调整）：

<ComboBox x:Name="DataGridFilter" Header="Filter By" Grid.Row="0" Grid.Column="1"
          VerticalAlignment="Center" HorizontalAlignment="Stretch"
          ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}" 
          SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!-- Header放在第一行 -->
                <ContentPresenter x:Name="HeaderContentPresenter"
                                  Content="{TemplateBinding Header}"
                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                  Margin="{TemplateBinding Padding}"
                                  Grid.Row="0"/>
                <!-- ComboBox主体内容放在第二行 -->
                <Border x:Name="Background"
                        Grid.Row="1"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding SelectionBoxItem}"
                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"/>
                        <Button x:Name="DropDownButton"
                                Grid.Column="1"
                                Style="{StaticResource ComboBoxDropDownButtonStyle}"/>
                    </Grid>
                </Border>
                <!-- 保留模板中的其他元素（如弹出层、视觉状态等）并调整Grid.Row -->
            </Grid>
        </ControlTemplate>
    </ComboBox.Template>
</ComboBox>

方案3：临时调整Padding（不推荐，仅应急） #

如果只是临时解决遮挡问题，可以给ComboBox添加顶部Padding，让控件内容下移避开Header：

<ComboBox x:Name="DataGridFilter" Header="Filter By" Grid.Row="0" Grid.Column="1"
          VerticalAlignment="Center" HorizontalAlignment="Stretch"
          Padding="0,20,0,0"
          ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}" 
          SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

内容的提问来源于stack exchange，提问作者E. A. Bagby