UWP紧凑叠加(Compact Overlay)模式下隐藏标题栏问题求助

问题根源 #

开启ExtendViewIntoTitleBar = true后，若未通过SetTitleBar()传入有效可交互的UI元素作为标题栏，系统会在窗口顶部自动生成一层透明的命中测试层，用于响应窗口拖拽、系统菜单等标题栏交互，这层的交互优先级高于页面内所有自定义控件，就是你移除Window.Current.SetTitleBar(TitleBar)后左上角搜索按钮偶现无法点击的直接原因。
不要靠折叠（Collapsed）自定义标题栏的方式隐藏标题栏——当传入SetTitleBar的元素被折叠、从可视化树移除时，系统就会回退到上述默认透明层逻辑，遮挡下方控件。 #

解决方案 #

保留Window.Current.SetTitleBar(TitleBar)代码，不要移除，按下面两种方案之一适配Compact Overlay模式即可：

方案1（全SDK版本兼容，推荐）

切换视图模式时不折叠TitleBar元素，而是将其高度设为0、关闭命中测试，同时隐藏内部内容，既保证系统能识别到注册的标题栏元素、不触发默认透明层，又能完全隐藏标题栏、不遮挡页面控件。

1. 修正你原有XAML的语法错误（Grid.row =0写法不符合XAML语法规范，会引发布局异常）：

<Grid x:Name="TitleBar" MinHeight="32" Background="{ThemeResource TitleBarAcrylicBackgroundBrush}" Grid.Row="0" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Image x:Name="AppLogoImage" Height="16" Width="16" Margin="16,8,12,8" HorizontalAlignment="Left" VerticalAlignment="Center"
           Source="../Assets/AppLogo.png" />
    <TextBlock 
    x:Name="AppNameTextBlock"
    Margin="44,8,0,8"
    Text="AppName"
    FontSize="12"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"/>
</Grid>

2. 补全标题栏按钮的颜色配置，避免窗口失焦时出现不透明背景块：

private void SetupTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
    titleBar.ButtonForegroundColor = (Color)Application.Current.Resources["SystemBaseHighColor"];
    titleBar.ButtonInactiveForegroundColor = (Color)Application.Current.Resources["SystemChromeDisabledLowColor"];
}

3. 视图模式切换逻辑：

// 进入Compact Overlay模式时调用
private async void EnterCompactOverlay()
{
    var appView = ApplicationView.GetForCurrentView();
    if (await appView.TryEnterViewModeAsync(ApplicationViewMode.CompactOverlay))
    {
        // 隐藏标题栏但保留元素在可视化树中
        TitleBar.Height = 0;
        TitleBar.IsHitTestVisible = false;
        TitleBar.Background = new SolidColorBrush(Colors.Transparent);
        AppLogoImage.Visibility = Visibility.Collapsed;
        AppNameTextBlock.Visibility = Visibility.Collapsed;
    }
}

// 切回普通窗口模式时调用
private async void ExitCompactOverlay()
{
    var appView = ApplicationView.GetForCurrentView();
    if (await appView.TryEnterViewModeAsync(ApplicationViewMode.Default))
    {
        // 恢复标题栏显示
        TitleBar.Height = double.NaN;
        TitleBar.IsHitTestVisible = true;
        TitleBar.Background = (Brush)Application.Current.Resources["TitleBarAcrylicBackgroundBrush"];
        AppLogoImage.Visibility = Visibility.Visible;
        AppNameTextBlock.Visibility = Visibility.Visible;
    }
}

方案2（适用于Windows 10 1809/SDK 17763及以上版本）

新增一个0尺寸的占位元素作为Compact Overlay模式下的标题栏注册对象，切换模式时动态修改SetTitleBar传入的参数即可。

1. 在MainPage.xaml的布局最底层添加占位元素：

<Grid x:Name="DummyTitleBar" Width="0" Height="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>

2. 切换模式时动态切换标题栏注册对象：

// 进入Compact Overlay
private async void EnterCompactOverlay()
{
    var appView = ApplicationView.GetForCurrentView();
    if (await appView.TryEnterViewModeAsync(ApplicationViewMode.CompactOverlay))
    {
        TitleBar.Visibility = Visibility.Collapsed;
        // 传入占位元素，避免系统触发默认透明层
        Window.Current.SetTitleBar(DummyTitleBar);
    }
}

// 切回普通模式
private async void ExitCompactOverlay()
{
    var appView = ApplicationView.GetForCurrentView();
    if (await appView.TryEnterViewModeAsync(ApplicationViewMode.Default))
    {
        TitleBar.Visibility = Visibility.Visible;
        Window.Current.SetTitleBar(TitleBar);
    }
}

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