自定义标题栏在 WinUI 3 中显示为白色答案

【问题标题】：Custom Title bar showing up white-ish in WinUI 3自定义标题栏在 WinUI 3 中显示为白色
【发布时间】：2022-10-31 02:53:40
【问题描述】：

我正在处理我的浏览器中的另一个问题。我制作了一个自定义标题栏，其中选项卡进入标题栏以创造更身临其境的体验。但是所有“沉浸式体验”都被这个看似无法修复的错误所破坏。我试图做的是改变CustomDragRegion 元素的背景。

看标题栏。那真令人恶心。谁来帮帮我。请

继承人的代码：

<Window
x:Class="Microsoft_Edge_WebView2_Runtime_Application.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft_Edge_WebView2_Runtime_Application"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Grid BorderBrush="Transparent" x:Name="Browser" Margin="0,0,0,0" Background="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}">
    <TabView Margin="0, 0, 0, 0" x:Name="Tabv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested">
        <TabViewItem FontFamily="Gellix" x:Name="HomeTab" Header="Home" IsClosable="False">
            <TabViewItem.IconSource>
                <SymbolIconSource Symbol="Document" />
            </TabViewItem.IconSource>

            <Grid x:Name="TabContent" Margin="0,0,0,0" Background="#282828">
                <WebView2 x:Name="WebView" Source="https://google.com" Margin="0,52,0,0"/>
                <Grid Margin="0,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="666">
                    <TextBox KeyDown="AddressBar_KeyDown" FontFamily="Gellix" x:Name="AddressBar" HorizontalAlignment="Center" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" Width="576" PlaceholderText="Search or type a URL here..." TextAlignment="Center" />
                    <Button Height="32" Width="40" x:Name="Home" Click="Button_Click_1">
                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE80F;" Margin="-2,-1,-2,-1"/>
                    </Button>
                    <Button Height="32" Width="40" x:Name="Go" Margin="626,0,0,0" Click="Button_Click">
                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE751;" Margin="-2,-1,-2,-1"/>
                    </Button>
                </Grid>
                <Button x:Name="Refresh" Margin="0,10,10,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Button_Click" HorizontalAlignment="Right">
                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xe72c;" Margin="-2,-1,-2,-1"/>
                </Button>
                <Button x:Name="Backward" Margin="10,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Backward_Click">
                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xf0d3;" Margin="-2,-1,-2,-1"/>
                </Button>
                <Button x:Name="Forward" Margin="53,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Forward_Click">
                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xF0D2;" Margin="-2,-1,-2,-1"/>
                </Button>
            </Grid>
        </TabViewItem>
        <TabView.TabStripFooter>
            <Grid Margin="0,0,0,0"  x:Name="CustomDragRegion" Background="Transparent"/>
        </TabView.TabStripFooter>
    </TabView>


</Grid>

如果您真的需要 c# 代码，那么只需发表评论。因为我只有两行与标题栏相关的 c#。

【问题讨论】：

你如何扩展标题？通过 Window 还是通过 AppWindow？
我使用ExtendsContentIntoTitleBar = true; 和SetTitleBar(CustomDragRegion)
这些是标题栏的 cs 中的 2 行
顺便说一句，这是WinUI 3
试试 AppWindow：appWindow.TitleBar.ExtendsContentIntoTitleBar = true;

标签： xaml debugging winui-3

【解决方案1】：

就我而言，我可以通过将WindowCaptionsBackground 和WindowCaptionsBackgroundDisabled 属性设置为Transparent，将标题栏设置为xaml 中定义的颜色，如下所示：

应用程序.xaml

<Application
    ...
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
            <SolidColorBrush x:Key="WindowCaptionBackground">Transparent</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">Transparent</SolidColorBrush>
        </ResourceDictionary>
    </Application.Resources>
    
</Application>

有关自定义标题栏的更多信息：https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3

【讨论】：