时间戳

首页 > 解决方案 > 显示包含 NavigationView 的 UWP 应用程序的标题和延伸到标题栏的亚克力设计

uwp - 显示包含 NavigationView 的 UWP 应用程序的标题和延伸到标题栏的亚克力设计

问题描述

我的 UWP 应用有一个 NavigationView，并在标题栏中使用带有扩展丙烯酸的 Fluent Design。所以你必须自己绘制应用程序标题，它通常会自动出现在标题栏中，并带有一个使用 CaptionTextBlockStyle 的 TextBlock 控件。我尝试在这里应用微软提供的示例 但不幸的是，这个示例没有考虑到标题栏中的扩展亚克力。在修改后的 XAML 代码下方：

<Page
x:Class="MesProjets.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MesProjets"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">


<Page.Resources>
    <ImageBrush x:Key="imagefond" 
                ImageSource="/Assets/Images/Wallpaper.png"
                Stretch="UniformToFill"/>

    <Style TargetType="NavigationView">
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>



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

    <Grid.Resources>
        <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
              BackgroundSource="HostBackdrop"
              TintColor="DarkOliveGreen"
              TintOpacity="0.6"
              FallbackColor="DarkGray"/>
        <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
              BackgroundSource="HostBackdrop"
              TintColor="DarkOliveGreen"
              TintOpacity="0.6"
              FallbackColor="DarkGray"/>
        <SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>
        <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="White"/>
        <SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="GreenYellow"/>
        <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="White"/>
        <SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="GreenYellow"/>
    </Grid.Resources>

    <!--<TextBlock Text="Mes Projets"
               Style="{StaticResource CaptionTextBlockStyle}" 

               Margin="0,8,0,0"/>-->

    <!--<Grid x:Name="AppTitleBar" Background="Transparent">
         --><!--Width of the padding columns is set in LayoutMetricsChanged handler. 
         Using padding columns instead of Margin ensures that the background
     paints the area under the caption control buttons (for transparent buttons).--><!-- 
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        --><!--<Image Source="Assets/Square44x44Logo.png" 
       Grid.Column="1" HorizontalAlignment="Left" 
       Width="20" Height="20" Margin="12,0"/>--><!--
        <TextBlock Text="Mes Projets" 
           Grid.Column="1" 
           Style="{StaticResource CaptionTextBlockStyle}" 
           Margin="10,8,0,0"/>
    </Grid>-->



    <NavigationView x:Name="NavViewMain"
                    PaneTitle="  Mes Projets"
                    Margin="0,0,0,0" Grid.Row="1" 
                    Loaded="NavViewMain_Loaded"
                    SelectionChanged="NavViewMain_SelectionChanged"
                    ItemInvoked="NavViewMain_ItemInvoked"
                    CompactModeThresholdWidth="0"
                    ExpandedModeThresholdWidth="1000"
                    OpenPaneLength="250"
                    FontSize="24"
                    IsSettingsVisible="{Binding ElementName=settingsCheck,Path=IsChecked}" IsTabStop="False"
                    IsBackButtonVisible="Collapsed"
                    >

        <NavigationView.HeaderTemplate>
            <DataTemplate>
                <!--<Grid Margin="100,0,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="Auto"/>
                        -->
                <!--<ColumnDefinition/>-->
                <!--
                    </Grid.ColumnDefinitions>-->
                <TextBlock  x:Name="appTitle" 
                                Style="{StaticResource TitleTextBlockStyle}"
                                Grid.Column="1"
                                FontSize="28"
                                VerticalAlignment="Top"
                                x:Uid="MainPageTitre"/>
                <!--</Grid>-->
            </DataTemplate>
        </NavigationView.HeaderTemplate>

        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Library" Tag="ListeProjets_Page" >
                <TextBlock Tag="Nav_ListeProjets" x:Uid="NVItem1" />
            </NavigationViewItem>

            <NavigationViewItem Icon="Library" Tag="ProjetsPrevus_Page" >
                <TextBlock Tag="Nav_ProjetsPrevus" x:Uid="NVItem2" />
            </NavigationViewItem>

            <NavigationViewItem Icon="Library" Tag="ProjetsEnCours_Page" >
                <TextBlock Tag="Nav_ProjetsEnCours" x:Uid="NVItem3" />
            </NavigationViewItem>

            <NavigationViewItem Icon="Library" Tag="ProjetsRealises_Page" >
                <TextBlock Tag="Nav_ProjetsRealises" x:Uid="NVItem4" />
            </NavigationViewItem>

            <NavigationViewItemSeparator/>

            <NavigationViewItem Icon="XboxOneConsole" Tag="ListeMonnaies_Page" >
                <TextBlock Tag="Nav_ListeMonnaies" x:Uid="NVItem5" />
            </NavigationViewItem>

            <NavigationViewItem Icon="Save" Tag="Backup_Page" >
                <TextBlock Tag="Nav_Backup" x:Uid="NVItem6" />
            </NavigationViewItem>

            <NavigationViewItem Icon="Help" Tag="Aide_Page" >
                <TextBlock Tag="Nav_Aide" x:Uid="NVItem7" />
            </NavigationViewItem>
        </NavigationView.MenuItems>

        <Frame x:Name="contentFrame">
        </Frame>
    </NavigationView>

</Grid>

结果是应用程序的标题出现在左上角，但出现在通常不应该存在的标题栏中。如何获得与日历应用程序相同的结果？谢谢你的帮助。

标签： uwpnavigationview

解决方案

NavigationView是一个集成的组合控件，如果要在 上添加一个TextBlock，PaneToggleButton只能修改 的模板NavigationView。

这是一个例子：

xml

<Style TargetType="NavigationView">
    <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationView">
                <Grid x:Name="RootGrid">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="DisplayModeGroup">
                            <VisualState x:Name="Compact">
                                <VisualState.Setters>
                                    <Setter Target="AppTitle.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Expanded">
                                <VisualState.Setters>
                                    <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Minimal">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="48,5,0,0" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="TopNavigationMinimal" />
                            <VisualState x:Name="MinimalWithBackButton">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="104,5,0,0" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="TogglePaneGroup">
                            <VisualState x:Name="TogglePaneButtonVisible" />
                            <VisualState x:Name="TogglePaneButtonCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="PaneContentGridToggleButtonRow.Height" Value="4" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="HeaderGroup">
                            <VisualState x:Name="HeaderVisible" />
                            <VisualState x:Name="HeaderCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SettingsGroup">
                            <VisualState x:Name="SettingsVisible" />
                            <VisualState x:Name="SettingsCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed" />
                                    <Setter Target="SettingsTopNavPaneItem.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="AutoSuggestGroup">
                            <VisualState x:Name="AutoSuggestBoxVisible" />
                            <VisualState x:Name="AutoSuggestBoxCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed" />
                                    <Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="PaneStateGroup">
                            <VisualState x:Name="NotClosedCompact" />
                            <VisualState x:Name="ClosedCompact">
                                <VisualState.Setters>
                                    <Setter Target="AppTitle.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneToggleButtonGrid.Padding" Value="0,25,0,0"/>
                                    <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed" />
                                    <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="PaneStateListSizeGroup">
                            <VisualState x:Name="ListSizeFull" />
                            <VisualState x:Name="ListSizeCompact">
                                <VisualState.Setters>
                                    <Setter Target="MenuItemsHost.HorizontalAlignment" Value="Left" />
                                    <!-- This is essentially a TemplateBinding: -->
                                    <Setter Target="MenuItemsHost.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                    <Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left" />
                                    <Setter Target="SettingsNavPaneItem.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                    <Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed" />
                                    <Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed" />
                                    <Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left" />
                                    <Setter Target="PaneCustomContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                    <Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left" />
                                    <Setter Target="FooterContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="TitleBarVisibilityGroup">
                            <VisualState x:Name="TitleBarVisible" />
                            <VisualState x:Name="TitleBarCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="PaneContentGrid.Margin" Value="0,32,0,0" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="OverflowLabelGroup">
                            <VisualState x:Name="OverflowButtonWithLabel" />
                            <VisualState x:Name="OverflowButtonNoLabel">
                                <VisualState.Setters>
                                    <Setter Target="TopNavOverflowButton.Style" Value="{ThemeResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="BackButtonGroup">
                            <VisualState x:Name="BackButtonVisible" />
                            <VisualState x:Name="BackButtonCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid
                    x:Name="PaneToggleButtonGrid"
                    Margin="0,0,0,8"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Canvas.ZIndex="100">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock 
                        Style="{StaticResource CaptionTextBlockStyle}"
                            Margin="10,5" x:Name="AppTitle"
                        VerticalAlignment="Center"
                        Text="MainPageTitre"/>
                        <Grid x:Name="TogglePaneTopPadding"
                              Grid.Row="1"
                          />

                        <Grid x:Name="ButtonHolderGrid" Grid.Row="2">
                            <Button 
                            x:Name="NavigationViewBackButton"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            VerticalAlignment="Top"
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.BackButtonVisibility}"
                            IsEnabled="{TemplateBinding IsBackEnabled}">
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Name="NavigationViewBackButtonToolTip" />
                                </ToolTipService.ToolTip>
                            </Button>
                            <Button
                            x:Name="TogglePaneButton"
                            Style="{TemplateBinding PaneToggleButtonStyle}"
                            AutomationProperties.LandmarkType="Navigation"
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
                            VerticalAlignment="Top">
                                <TextBlock
                                x:Name="PaneTitleTextBlock" 
                                Grid.Column="0"
                                Text="{TemplateBinding PaneTitle}"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
                            </Button>
                        </Grid>

                    </Grid>

                    <Grid>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackPanel x:Name="TopNavArea" Background="{ThemeResource NavigationViewTopPaneBackground}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Canvas.ZIndex="1" XYFocusKeyboardNavigation="Enabled">

                                    <Grid x:Name="TopNavTopPadding"
                                      Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
                                      Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}"/>

                                    <Grid x:Name="TopNavGrid" 
                                      Height="{ThemeResource NavigationViewTopPaneHeight}"
                                      Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" MinWidth="48" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <Grid 
                                        x:Name="TopNavLeftPadding" 
                                        Grid.Column="1"
                                        Width="0"/>

                                        <ContentControl
                                        x:Name="PaneHeaderOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="2"/>

                                        <!-- Top nav list -->
                                        <NavigationViewList AutomationProperties.LandmarkType="Navigation" x:Name="TopNavMenuItemsHost" Grid.Column="3" SelectionMode="Single" IsItemClickEnabled="True" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}">
                                            <ListView.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <ItemsStackPanel Orientation="Horizontal" />
                                                </ItemsPanelTemplate>
                                            </ListView.ItemsPanel>
                                            <ListView.ItemContainerTransitions>
                                                <TransitionCollection />
                                            </ListView.ItemContainerTransitions>
                                        </NavigationViewList>

                                        <Button 
                                        x:Name="TopNavOverflowButton"
                                        Grid.Column="4"

                                        Content="More"
                                        Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">

                                            <Button.Flyout>
                                                <Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
                                                    <Flyout.FlyoutPresenterStyle>
                                                        <Style TargetType="FlyoutPresenter">
                                                            <Setter Property="Padding" Value="0,8" />
                                                            <!-- Set negative top margin to make the flyout align exactly with the button -->
                                                            <Setter Property="Margin" Value="0,-4,0,0" />
                                                        </Style>
                                                    </Flyout.FlyoutPresenterStyle>
                                                    <NavigationViewList x:Name="TopNavMenuItemsOverflowHost" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" SingleSelectionFollowsFocus="False" IsItemClickEnabled="True">
                                                        <ListView.ItemContainerTransitions>
                                                            <TransitionCollection />
                                                        </ListView.ItemContainerTransitions>
                                                    </NavigationViewList>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>

                                        <ContentControl
                                        x:Name="PaneCustomContentOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="5"/>

                                        <Grid
                                        x:Name="TopPaneAutoSuggestArea"
                                        Height="{ThemeResource NavigationViewTopPaneHeight}"
                                        Grid.Column="6">

                                            <ContentControl
                                            x:Name="TopPaneAutoSuggestBoxPresenter"
                                            Margin="12,0,12,0"
                                            MinWidth="48"
                                            IsTabStop="False"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Center"/>
                                        </Grid>

                                        <ContentControl
                                        x:Name="PaneFooterOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="7" />
                                        <NavigationViewItem x:Name="SettingsTopNavPaneItem" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}" Grid.Column="8" Icon="Setting" />

                                    </Grid>
                                    <Border
                                    x:Name="TopNavContentOverlayAreaGrid"
                                    Child="{TemplateBinding ContentOverlay}" />
                                </StackPanel>

                                <SplitView
                                x:Name="RootSplitView"
                                Background="{TemplateBinding Background}"
                                CompactPaneLength="{TemplateBinding CompactPaneLength}"
                                DisplayMode="Inline"
                                IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
                                IsTabStop="False"
                                OpenPaneLength="{TemplateBinding OpenPaneLength}"
                                PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"

                                Grid.Row="1">

                                    <SplitView.Pane>
                                        <Grid 
                                        x:Name="PaneContentGrid"
                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="0" />
                                                <!-- above button margin + back button space -->
                                                <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="8" />
                                                <!-- above list margin -->
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="8" />
                                            </Grid.RowDefinitions>

                                            <Grid x:Name="ContentPaneTopPadding"
                                              Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>

                                            <Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>

                                                <ContentControl
                                                x:Name="PaneHeaderContentBorder"
                                                IsTabStop="False"
                                                VerticalContentAlignment="Stretch"
                                                HorizontalContentAlignment="Stretch"
                                                Grid.Column="1" />
                                            </Grid>

                                            <Grid
                                            x:Name="AutoSuggestArea"
                                            Grid.Row="3"
                                            Height="{ThemeResource NavigationViewTopPaneHeight}"
                                            VerticalAlignment="Center">

                                                <ContentControl
                                                x:Name="PaneAutoSuggestBoxPresenter"
                                                Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
                                                IsTabStop="False"
                                                HorizontalContentAlignment="Stretch"
                                                VerticalContentAlignment="Center"/>

                                                <Button
                                                x:Name="PaneAutoSuggestButton"
                                                Visibility="Collapsed"
                                                Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
                                                Width="{TemplateBinding CompactPaneLength}"/>
                                            </Grid>

                                            <ContentControl
                                            x:Name="PaneCustomContentBorder"
                                            IsTabStop="False"
                                            VerticalContentAlignment="Stretch"
                                            HorizontalContentAlignment="Stretch"
                                            Grid.Row="4" />

                                            <!-- Left nav list -->
                                            <NavigationViewList x:Name="MenuItemsHost" Grid.Row="6" Margin="0,0,0,20" SelectionMode="Single" IsItemClickEnabled="True" HorizontalAlignment="Stretch" SelectedItem="{TemplateBinding SelectedItem}" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}" />

                                            <ContentControl
                                            x:Name="FooterContentBorder"
                                            IsTabStop="False"
                                            VerticalContentAlignment="Stretch"
                                            HorizontalContentAlignment="Stretch"
                                            Grid.Row="7" />
                                            <NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="8" Icon="Setting" />
                                        </Grid>
                                    </SplitView.Pane>

                                    <SplitView.Content>
                                        <Grid x:Name="ContentGrid">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>

                                            <Grid x:Name="ContentTopPadding"
                                              Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
                                              Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}"/>

                                            <ContentControl
                                            x:Name="HeaderContent"
                                            Grid.Row="1"
                                            MinHeight="{StaticResource PaneToggleButtonHeight}"
                                            IsTabStop="False"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                            VerticalContentAlignment="Stretch"
                                            HorizontalContentAlignment="Stretch"
                                            Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}"/>

                                            <ContentPresenter
                                            AutomationProperties.LandmarkType="Main"
                                            Grid.Row="2"
                                            Content="{TemplateBinding Content}"/>
                                        </Grid>
                                    </SplitView.Content>
                                </SplitView>

                            </Grid>

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

xml.cs

public MainPage()
{
    this.InitializeComponent();
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
}

在名为 的网格PaneToggleButtonGrid中，我们添加了一个TextBlock来显示应用程序标题。此外，我们还需要添加一些状态效果。在<VisualStateGroup x:Name="PaneStateGroup">中，我们添加了控制AppTitle可见性和一些 UI 处理的代码。

BTW，如果你需要一些更复杂的效果，比如动态改变 的值AppTitle，那么你可以尝试使用SplitView并Frame构建一个自定义NavigationView来满足你的需求。

此致。

推荐阅读