如何在WinUI 3中为DropDownButton添加Header并与其他控件对齐？

针对WinUI 3里DropDownButton无Header属性，导致与NumberBox等带Header控件的标签对齐不一致的问题，提供以下几种无需放弃Header属性的解决思路：

方案1：匹配系统Header样式与间距 #

WinUI中带Header的控件（如NumberBox）的标题文本默认使用HeaderTextBlockStyle样式，且标题与控件间有固定间距。只需调整你的TextBlock样式和容器间距，就能实现完美对齐：

修改原StackPanel代码如下：

<StackPanel Grid.Row="1" Grid.Column="0" VerticalSpacing="4">
    <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="B0 (T)"/>
    <DropDownButton Content="1.5" x:Name="FieldStrength">
        <DropDownButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="1.5"/>
                <MenuFlyoutItem Text="3.0"/>
                <MenuFlyoutItem Text="4.7"/>
                <MenuFlyoutItem Text="7.0"/>
                <MenuFlyoutItem Text="9.4"/>
            </MenuFlyout>
        </DropDownButton.Flyout>
    </DropDownButton>
</StackPanel>

• 将TextBlock的LabelTextStyle替换为系统默认的HeaderTextBlockStyle，保证字体、字号、颜色与NumberBox的Header完全一致
• 设置StackPanel的VerticalSpacing="4"，匹配系统标题与控件间的默认间距

同理修改Pulse Sequence对应的StackPanel：

<StackPanel Grid.Row="2" Grid.Column="0" VerticalSpacing="4">
    <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Pulse Sequence"/>
    <DropDownButton Content="FLASH" x:Name="PulseSequence">
        <DropDownButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="FLASH"/>
                <MenuFlyoutItem Text="RARE"/>
            </MenuFlyout>
        </DropDownButton.Flyout>
    </DropDownButton>
</StackPanel>

方案2：自定义带Header属性的DropDownButton UserControl #

如果想像NumberBox一样直接通过Header属性设置标题，可封装一个自定义UserControl，复用系统Header的布局逻辑：

1. 创建HeaderDropDownButton.xaml #

<UserControl
    x:Class="YourNamespace.HeaderDropDownButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel VerticalSpacing="4">
        <TextBlock x:Name="HeaderTextBlock" Style="{StaticResource HeaderTextBlockStyle}"/>
        <DropDownButton x:Name="InnerDropDownButton" 
                        Content="{Binding Content, ElementName=UserControl}"
                        Flyout="{Binding Flyout, ElementName=UserControl}"/>
    </StackPanel>
</UserControl>

2. 创建HeaderDropDownButton.xaml.cs #

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace YourNamespace
{
    public sealed partial class HeaderDropDownButton : UserControl
    {
        public static readonly DependencyProperty HeaderProperty =
            DependencyProperty.Register(nameof(Header), typeof(string), typeof(HeaderDropDownButton), 
                new PropertyMetadata(string.Empty, (s, e) => ((HeaderDropDownButton)s).HeaderTextBlock.Text = e.NewValue.ToString()));

        public static readonly DependencyProperty ContentProperty =
            DependencyProperty.Register(nameof(Content), typeof(object), typeof(HeaderDropDownButton), 
                new PropertyMetadata(null));

        public static readonly DependencyProperty FlyoutProperty =
            DependencyProperty.Register(nameof(Flyout), typeof(FlyoutBase), typeof(HeaderDropDownButton), 
                new PropertyMetadata(null));

        public string Header
        {
            get => (string)GetValue(HeaderProperty);
            set => SetValue(HeaderProperty, value);
        }

        public object Content
        {
            get => GetValue(ContentProperty);
            set => SetValue(ContentProperty, value);
        }

        public FlyoutBase Flyout
        {
            get => (FlyoutBase)GetValue(FlyoutProperty);
            set => SetValue(FlyoutProperty, value);
        }

        public HeaderDropDownButton()
        {
            this.InitializeComponent();
        }
    }
}

3. 在主页面中使用 #

先引入自定义控件的命名空间：

xmlns:local="using:YourNamespace"

然后像普通带Header控件一样使用：

<local:HeaderDropDownButton Grid.Row="1" Grid.Column="0"
                            Header="B0 (T)"
                            Content="1.5"
                            x:Name="FieldStrength">
    <local:HeaderDropDownButton.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="1.5"/>
            <MenuFlyoutItem Text="3.0"/>
            <MenuFlyoutItem Text="4.7"/>
            <MenuFlyoutItem Text="7.0"/>
            <MenuFlyoutItem Text="9.4"/>
        </MenuFlyout>
    </local:HeaderDropDownButton.Flyout>
</local:HeaderDropDownButton>

方案3：使用Grid精确控制布局 #

如果需要更精细的间距控制，可将StackPanel替换为Grid，手动定义行间距：

<Grid Grid.Row="1" Grid.Column="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
               Style="{StaticResource HeaderTextBlockStyle}" 
               Text="B0 (T)" 
               Margin="0,0,0,4"/>
    <DropDownButton Grid.Row="1" 
                    Content="1.5" 
                    x:Name="FieldStrength">
        <DropDownButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="1.5"/>
                <MenuFlyoutItem Text="3.0"/>
                <MenuFlyoutItem Text="4.7"/>
                <MenuFlyoutItem Text="7.0"/>
                <MenuFlyoutItem Text="9.4"/>
            </MenuFlyout>
        </DropDownButton.Flyout>
    </DropDownButton>
</Grid>

通过设置TextBlock的Margin="0,0,0,4"来控制与下方DropDownButton的间距，同样能实现对齐效果。

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