在UWP app c＃中使用ExtendViewIntoTitleBar = true无法看到标题栏

Question

So I would like to customize the title bar of my UWP app as suggested here https://docs.microsoft.com/en-gb/windows/uwp/design/shell/title-bar . I would like to use a custom Windows.UI.Xaml.Controls.NavigationView and display that instead of the default title bar. So in my Xaml code I have:

<Page
    x:Class="Posta.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Posta"
    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="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <NavigationView x:Name="TopNavigationView" Header="Hello" PaneDisplayMode="Top" IsBackButtonVisible="Collapsed" Grid.Row="0">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="HomeItem" Content="Home" Icon="Home" ></NavigationViewItem>
                </NavigationView.MenuItems>
            </NavigationView>
        <WebView Source="https://website.com" Grid.Row="1" ></WebView>
    </Grid>
</Page>

And in my C# code I added when initializing the page:

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    TopNavigationView.Height = coreTitleBar.Height; // check this height setting (because we sat it to auto in xaml)
    Window.Current.SetTitleBar(TopNavigationView);

However, now my NavigationView is not visible when I launch the application and only the WebView is extended into the titlebar.

Answer 1

You need to handle the CoreApplicationViewTitleBar.LayoutMetricsChanged Event to update the TopNavigationView.Height by coreTitleBar.Height like the document has shown in the demo code.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Update title bar control size as needed to account for system size changes.
    TopNavigationView.Height = coreTitleBar.Height;
}