使用WinUI3/ThemeService时，如何消除标题栏下方的白色线条？

我在使用WinUI3结合WinUICommunity.Core 6.4.0的ThemeService开发时，调用最大化窗口代码后，标题栏下方出现一条白色线条，全屏模式下该线条消失。相关代码及场景如下：

初始化代码 #

protected override void Initialize(IApplicationBuilder builder)
{
    Window = builder.Window;

    _themeService = new ThemeService();
    _themeService.Initialize(Window);
    _themeService.ConfigTitleBar(new TitleBarCustomization
    {
        TitleBarWindowType = TitleBarWindowType.None,
    });
    _themeService.SetElementTheme(ElementTheme.Dark);

    MaxWindow();

    base.Initialize(builder);
}

窗口最大化方法 #

MaxWindow方法依赖Vanara.PInvoke.User32 3.4.17包：

private static void MaxWindow()
{
    var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(Window);

    User32.ShowWindow(hwnd, ShowWindowCommand.SW_MAXIMIZE);
}

Shell视图创建代码 #

Shell作为Window的内容，创建逻辑如下：

protected override UIElement CreateShell()
{
   var shell = Container.Resolve<Shell>();

#if WINDOWS
    shell.Loaded += (s, e) =>
    {
        MainXamlRoot = (s as UIElement).XamlRoot;
    };
#endif
    return shell;
}

Shell的XAML代码 #

Shell未对标题栏做任何修改：

<ContentControl
    x:Class="Weather.History.Mvvm.Views.Shell"
    xmlns:prismmvvm="using:Prism.Mvvm"
    xmlns:prism="using:Prism.Navigation.Regions"
    prismmvvm:ViewModelLocator.AutowireViewModel="True"
    xmlns:inf="using:Weather.History.Prism"
    xmlns:view="using:Weather.History.Mvvm.Views"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ContentControl prism:RegionManager.RegionName="{x:Bind inf:RegionNames.CarouselView}" Grid.Row="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
        <ContentControl prism:RegionManager.RegionName="{x:Bind inf:RegionNames.Console}" Grid.Row="1" HorizontalContentAlignment="Stretch" VerticalAlignment="Bottom"/>
        
    </Grid>

</ContentControl>

解决方法 #

这种白色线条是窗口最大化时系统标题栏边框的残留，结合自定义标题栏的场景，可通过以下方式消除：

1. 调整根布局边距
   在Shell的根Grid上添加负上边距，抵消残留线条：

   <Grid Margin="0,-1,0,0">
       <!-- 原有内容 -->
   </Grid>
   

2. 修改窗口样式移除边框
   通过Win32 API调整窗口样式，移除最大化状态下的边框：

   private static void MaxWindow()
   {
       var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(Window);
       // 获取当前窗口样式并移除边框属性
       var style = User32.GetWindowLong(hwnd, WindowLongFlags.GWL_STYLE);
       style &= ~(int)WindowStyles.WS_BORDER;
       User32.SetWindowLong(hwnd, WindowLongFlags.GWL_STYLE, style);
       // 刷新窗口并最大化
       User32.SetWindowPos(hwnd, IntPtr.Zero, 0, 0, 0, 0, 
           SetWindowPosFlags.SWP_NOMOVE | SetWindowPosFlags.SWP_NOSIZE | SetWindowPosFlags.SWP_FRAMECHANGED);
       User32.ShowWindow(hwnd, ShowWindowCommand.SW_MAXIMIZE);
   }
   

3. 强制更新窗口布局
   在Shell的Loaded事件中强制刷新布局，确保内容铺满客户区：

   shell.Loaded += (s, e) =>
   {
       MainXamlRoot = (s as UIElement).XamlRoot;
       var frameworkElement = s as FrameworkElement;
       frameworkElement.UpdateLayout();
       // 调整窗口客户区适配
       var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(Window);
       User32.SetWindowPos(hwnd, IntPtr.Zero, 0, 0, 0, 0, 
           SetWindowPosFlags.SWP_NOMOVE | SetWindowPosFlags.SWP_NOSIZE | SetWindowPosFlags.SWP_FRAMECHANGED);
   };
   

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