Winui3桌面應用如何設置應用標題

Question

我正在嘗試使用應用名稱設置應用標題欄，但它出現在標題欄的底部。

標題欄圖片

我不想將標題作為 WinUI 桌面放在頂部，而是將我的應用標題放在頂部。 另外如何更改標題欄的背景顏色？

這是我的 MainPage.xaml 代碼我當前如何設置標題欄

主頁.xaml

    x:Class="MyProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyProject"
    xmlns:controlpages="using:MyProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"    
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar">
           <!-- <Image Source="Images/WindowIcon.png"
                   HorizontalAlignment="Left" 
                   Width="16" Height="16" 
                   Margin="8,0"/> -->
            <TextBlock x:Name="AppTitleTextBlock" Text="App title"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>


        <NavigationView  Grid.Row="1" x:Name="nvSample8" 
                        PaneDisplayMode="Left"
                        IsTabStop="False"
                        SelectionChanged="NavigationView_SelectionChanged8"
                        IsPaneOpen="False"
                        >
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Accounts" Icon="Contact" ToolTipService.ToolTip="Accounts" Tag="AccountsPage">
                </NavigationViewItem>
            </NavigationView.MenuItems>
            <Frame x:Name="contentFrame8" />
        </NavigationView>
    </Grid>
</Page>

主頁.xaml.cs

    {
        public MainPage()
        {
            this.InitializeComponent();
            nvSample8.SelectedItem = nvSample8.MenuItems.OfType<NavigationViewItem>().First();
            AppTitleTextBlock.Text = "My App Title";
          
        }
    }

Answer 1

您是否嘗試過將Window.ExtendsContentIntoTitleBar設置為 true？

你可能想看看這個： https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3

Answer 2

@Nick 的答案已經顯示了您需要檢查的正確文檔。 但您可能需要檢查其中的 UWP 部分。

要更改標題欄的文本和背景，您需要先獲取CoreApplicationViewTitleBar並將ExtendViewIntoTitleBar屬性設置為true 。 然后您可以將您創建的 UIElement 作為 TitleBar 傳遞。 之后，您可以通過獲取包含這些按鈕的系統標題欄來更改系統標題按鈕的顏色。

主頁.Xaml：

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="AppTitleBar" Background="Red">
   
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/StoreLogo.png" 
       Grid.Column="1"
       HorizontalAlignment="Left"
       Width="16" Height="16"
       Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
           Text="App title" 
           Style="{StaticResource CaptionTextBlockStyle}" 
           Grid.Column="1"
           VerticalAlignment="Center"
           Margin="28,0,0,0"/>
    </Grid>
</Grid>

主頁.Xaml.cs

 public MainPage()
    {
        this.InitializeComponent();

        var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
        coreTitleBar.ExtendViewIntoTitleBar = true;
        // Set XAML element as a drag region.
        Window.Current.SetTitleBar(AppTitleBar);

        //change color for the caption buttons
        var systemTitleBar = ApplicationView.GetForCurrentView().TitleBar;
        systemTitleBar.ButtonBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonPressedBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonHoverBackgroundColor = Colors.Transparent;
    }