显示包含 NavigationView 和扩展到标题栏的亚克力设计的 UWP 应用程序的标题

Question

我的 UWP 应用程序有一个 NavigationView，并使用 Fluent Design 和标题栏中的扩展 acrylic。因此，您必须自己绘制应用程序标题，该标题通常会自动出现在标题栏中，并带有一个使用 CaptionTextBlockStyle 的 TextBlock 控件。我尝试应用 Microsoft here 提供的示例但不幸的是，这个例子没有考虑到标题栏中的扩展 acrylic。在修改后的 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>

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

Answer 1

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

这是一个例子：

xaml

<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>

xaml.cs

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

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

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

此致。

显示包含 NavigationView 和扩展到标题栏的亚克力设计的 UWP 应用程序的标题

Display the title of a UWP application containing a NavigationView and an acrylic design extended to the title bar

navigationview

uwp