UWP NavigationView标题与MenuItem窗格重叠

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

我正在为正在进行的UWP项目试用NavigationView。我自定义了NavigationView MenuItem窗格,以便它仅包含菜单(汉堡)和后退按钮的图标。为此,我设置了NavigationView

的以下属性
IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftCompact"
IsPaneToggleButtonVisible="False"

我还通过自定义HeaderTemplate自定义了NavigationView标头。完全符合我的要求。

但是我找不到将NavigationView标题重叠到MenuItem窗格的任何帮助。

下面的代码片段将有助于理解我的要求

Sample Image

我希望我的标题(具有黑色背景)位于MenuItem窗格(具有灰色背景)的顶部。

任何帮助将不胜感激。谢谢

uwp navigationview
1个回答
0
投票

如果您想将标题放置在MenuItem窗格的顶部,则需要以NavigationView的样式重新布局它。在其样式中,有一个名为HeaderContent的ContentControl,它表示NavigationView的标题,将其放在RootGrid中而不是ContentGrid中。例如:

。xaml:

    <Page.Resources>
        <Style x:Key="NavigationViewStyle1" TargetType="NavigationView">
            <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}"/>
            <Setter Property="IsTabStop" Value="False"/>
            <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 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="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"/>
                                            <Setter Target="MenuItemsHost.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            <Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left"/>
                                            <Setter Target="SettingsNavPaneItem.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            <Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed"/>
                                            <Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed"/>
                                            <Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left"/>
                                            <Setter Target="PaneCustomContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            <Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left"/>
                                            <Setter Target="FooterContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                        </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" HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Canvas.ZIndex="100">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="TogglePaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                <Grid x:Name="ButtonHolderGrid" Grid.Row="1">
                                    <Button x:Name="NavigationViewBackButton" IsEnabled="{TemplateBinding IsBackEnabled}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.BackButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                        <ToolTipService.ToolTip>
                                            <ToolTip x:Name="NavigationViewBackButtonToolTip"/>
                                        </ToolTipService.ToolTip>
                                    </Button>
                                    <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Style="{TemplateBinding PaneToggleButtonStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.PaneToggleButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                        <TextBlock x:Name="PaneTitleTextBlock" Grid.Column="0" HorizontalAlignment="Left" Style="{StaticResource NavigationViewItemHeaderTextStyle}" Text="{TemplateBinding PaneTitle}" VerticalAlignment="Center"/>
                                    </Button>
                                </Grid>
                            </Grid>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <StackPanel x:Name="TopNavArea" Background="{ThemeResource NavigationViewTopPaneBackground}" HorizontalAlignment="Stretch" Grid.Row="0" VerticalAlignment="Top" XYFocusKeyboardNavigation="Enabled" Canvas.ZIndex="1">
                                    <Grid x:Name="TopNavTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                    <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition MinWidth="48" Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid x:Name="TopNavLeftPadding" Grid.Column="1" Width="0"/>
                                        <ContentControl x:Name="PaneHeaderOnTopPane" Grid.Column="2" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                                        <NavigationViewList x:Name="TopNavMenuItemsHost" Grid.Column="3" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" AutomationProperties.LandmarkType="Navigation" SelectionMode="Single" SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                                            <NavigationViewList.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <ItemsStackPanel Orientation="Horizontal"/>
                                                </ItemsPanelTemplate>
                                            </NavigationViewList.ItemsPanel>
                                            <NavigationViewList.ItemContainerTransitions>
                                                <TransitionCollection/>
                                            </NavigationViewList.ItemContainerTransitions>
                                        </NavigationViewList>
                                        <Button x:Name="TopNavOverflowButton" Content="More" Grid.Column="4" Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}" Visibility="{Binding TemplateSettings.OverflowButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                            <Button.Flyout>
                                                <Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
                                                    <Flyout.FlyoutPresenterStyle>
                                                        <Style TargetType="FlyoutPresenter">
                                                            <Setter Property="Padding" Value="0,8"/>
                                                            <Setter Property="Margin" Value="0,-4,0,0"/>
                                                        </Style>
                                                    </Flyout.FlyoutPresenterStyle>
                                                    <NavigationViewList x:Name="TopNavMenuItemsOverflowHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" SingleSelectionFollowsFocus="False">
                                                        <NavigationViewList.ItemContainerTransitions>
                                                            <TransitionCollection/>
                                                        </NavigationViewList.ItemContainerTransitions>
                                                    </NavigationViewList>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>
                                        <ContentControl x:Name="PaneCustomContentOnTopPane" Grid.Column="5" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                                        <Grid x:Name="TopPaneAutoSuggestArea" Grid.Column="6" Height="{ThemeResource NavigationViewTopPaneHeight}">
                                            <ContentControl x:Name="TopPaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" MinWidth="48" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
                                        </Grid>
                                        <ContentControl x:Name="PaneFooterOnTopPane" Grid.Column="7" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                                        <NavigationViewItem x:Name="SettingsTopNavPaneItem" Grid.Column="8" Icon="Setting" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}"/>
                                    </Grid>
                                    <Border x:Name="TopNavContentOverlayAreaGrid" Child="{TemplateBinding ContentOverlay}"/>
                                </StackPanel>
                                <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" MinHeight="{StaticResource PaneToggleButtonHeight}" Grid.Row="1" Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}" VerticalContentAlignment="Stretch"/>

                                <SplitView x:Name="RootSplitView" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" DisplayMode="Inline" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}" Grid.Row="2">
                                    <SplitView.Pane>
                                        <Grid x:Name="PaneContentGrid" Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                            <Grid.RowDefinitions>

                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="0"/>
                                                <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="8"/>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="8"/>
                                            </Grid.RowDefinitions>

                                            <Grid x:Name="ContentPaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            <Grid Height="{StaticResource PaneToggleButtonHeight}" Grid.Row="2">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <ContentControl x:Name="PaneHeaderContentBorder" Grid.Column="1" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                                            </Grid>
                                            <Grid x:Name="AutoSuggestArea" Height="{ThemeResource NavigationViewTopPaneHeight}" Grid.Row="3" VerticalAlignment="Center">
                                                <ContentControl x:Name="PaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}" VerticalContentAlignment="Center"/>
                                                <Button x:Name="PaneAutoSuggestButton" Style="{ThemeResource NavigationViewPaneSearchButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
                                            </Grid>
                                            <ContentControl x:Name="PaneCustomContentBorder" HorizontalContentAlignment="Stretch" IsTabStop="False" Grid.Row="4" VerticalContentAlignment="Stretch"/>
                                            <NavigationViewList x:Name="MenuItemsHost" HorizontalAlignment="Stretch" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="6" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}" SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            <ContentControl x:Name="FooterContentBorder" HorizontalContentAlignment="Stretch" IsTabStop="False" Grid.Row="7" VerticalContentAlignment="Stretch"/>
                                            <NavigationViewItem x:Name="SettingsNavPaneItem" Icon="Setting" Grid.Row="8"/>
                                        </Grid>
                                    </SplitView.Pane>
                                    <Grid x:Name="ContentGrid">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Grid x:Name="ContentTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                        <ContentPresenter Content="{TemplateBinding Content}" AutomationProperties.LandmarkType="Main" Grid.Row="1"/>
                                    </Grid>
                                </SplitView>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>


    <Grid>
        <NavigationView Style="{StaticResource NavigationViewStyle1}" ......>
        ......
        </NavigationView>
    </Grid>
© www.soinside.com 2019 - 2024. All rights reserved.