【问题标题】:Display the title of a UWP application containing a NavigationView and an acrylic design extended to the title bar显示包含 NavigationView 的 UWP 应用程序的标题和延伸到标题栏的亚克力设计
【发布时间】:2019-12-14 23:28:55
【问题描述】:

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

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

【问题讨论】:

    标签: uwp navigationview


    【解决方案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 来显示应用标题。此外,我们还需要添加一些状态效果。在&lt;VisualStateGroup x:Name="PaneStateGroup"&gt; 中,我们添加了控制AppTitle 可见性和一些UI 处理的代码。


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

    最好的问候。

    【讨论】:

    • 您好 Richard,我将您建议的修改应用于 MainPage.xaml 的 XAML 代码,但我遇到了几个问题:在
    • 您好,您可以选择不使用此按钮,但不能删除。因为NavigationView 有依赖于这个Button 的功能。如果删除这个Button,在控件内部找不到名为TopNavOverflowButton的资源,会报错。
    • 你好理查德,我知道我不能删除这个
    • 我忘了说目标版本和最低版本是Windows 10 version 1809 (10.0; build 17763)。问题可能来自那里?
    • 嗨。控件默认模板是根据当前系统版本生成的,位于generic.xaml文件中。我用来生成这个模板的系统版本是1909。如果你的系统是1809,你可能需要找到你当前系统的generic.xaml文件,复制NavigationView模板代码,并进行相应修改。 generic.xaml 文件通常位于C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\your_system_version\Generic
    猜你喜欢
    • 1970-01-01
    • 2018-08-09
    • 1970-01-01
    • 1970-01-01
    • 2021-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多