WinUI3：如何将页面内CommandBar设为可拖拽且按钮可点击的标题栏

我需要把定义在页面XAML（不是MainWindow.xaml）里的WinUI3 CommandBar（命名为AppBar）设为应用标题栏，要求：

• CommandBar非按钮区域能拖拽窗口
• CommandBar里的按钮可以正常点击

已尝试的两种方案及问题 #

方案1：在MainWindow中设置标题栏

代码如下：

public MainWindow() 
{
   ...
   SomeClass myClass = new();
   SetTitleBar(myClass.AppBar);
   rootFrame.Content = myClass;
}

问题：视觉上没问题，但AppBar里的按钮点不动。
原因：直接把整个CommandBar设为标题栏后，系统会把它当成纯标题栏区域处理，优先响应拖拽逻辑，导致内部按钮的交互被屏蔽了。

方案2：在页面类SomeClass中设置标题栏

先修改App.xaml.cs暴露窗口实例：

public partial class App : Application 
{
   public App()
   {
      this.InitializeComponent();
   }

   protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
   {
      m_window = new MainWindow();
      m_window.Activate();
   }

   public static Window Window { get { return m_window; } }
   private static Window m_window;
}

然后在SomeClass构造函数里调用：

public SomeClass() 
{
   this.InitializeComponent();
   // AppBar定义在SomeClass的XAML中
   App.Window.SetTitleBar(AppBar);
   ...
}

问题：抛出System.NullReferenceException，提示MyApp.App.Window.get returned null。
原因：SomeClass构造函数执行的时候，App里的窗口实例还没初始化完成，OnLaunched里创建窗口的逻辑可能还没跑完，或者SomeClass实例创建得太早了。

正确解决办法 #

要同时满足拖拽和按钮交互，得做两件事：一是只把CommandBar里的非按钮区域设为可拖拽的标题栏部分，二是等窗口完全初始化后再设置标题栏。

步骤1：调整CommandBar布局，分离拖拽区和按钮区

在SomeClass的XAML里，把需要拖拽的部分单独放在一个元素（比如Grid）里，按钮保留在CommandBar的命令集合中：

<CommandBar x:Name="AppBar">
    <CommandBar.Content>
        <!-- 这个Grid是专门用来拖拽的标题栏区域 -->
        <Grid x:Name="TitleBarDragArea" Height="48">
            <TextBlock Text="应用标题" VerticalAlignment="Center" Margin="12,0"/>
        </Grid>
    </CommandBar.Content>
    <CommandBar.PrimaryCommands>
        <AppBarButton Icon="Add" Label="添加" Click="AddButton_Click"/>
        <AppBarButton Icon="Save" Label="保存" Click="SaveButton_Click"/>
    </CommandBar.PrimaryCommands>
</CommandBar>

步骤2：在页面Loaded事件中设置标题栏

别在SomeClass构造函数里调用SetTitleBar，改成在页面加载完成的Loaded事件里执行，而且只把拖拽区域设为标题栏：

public SomeClass()
{
    this.InitializeComponent();
    this.Loaded += SomeClass_Loaded;
}

private void SomeClass_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    // 获取当前窗口实例
    var currentWindow = Microsoft.UI.Xaml.Window.Current;
    // 将拖拽区域设置为标题栏
    currentWindow.SetTitleBar(TitleBarDragArea);
}

补充：隐藏默认系统标题栏（可选）

如果默认的系统标题栏还显示，可以在MainWindow构造函数里把它隐藏：

public MainWindow()
{
    this.InitializeComponent();
    // 让内容延伸到标题栏区域
    this.ExtendsContentIntoTitleBar = true;
    // 把系统标题栏的背景设为透明
    this.TitleBar.Background = new SolidColorBrush(Colors.Transparent);
    this.TitleBar.ButtonBackgroundColor = Colors.Transparent;
}

这样处理后：

• TitleBarDragArea区域可以正常拖拽窗口
• CommandBar里的按钮能正常响应点击
• 不会再出现窗口实例未初始化的空引用异常

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