显示包含导航视图和扩展到标题栏的丙烯酸设计的UWP应用程序的标题

问题描述 投票:0回答:1

我的UWP应用具有导航视图,并在标题栏中使用带有扩展丙烯酸的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个回答
0
投票

[NavigationView是集成的组合控件,如果要在TextBlock上添加PaneToggleButton,则只能修改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处理的代码。


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

最诚挚的问候。

© www.soinside.com 2019 - 2024. All rights reserved.