UWP NavigationView Перекрытие заголовка на панели MenuItem - PullRequest
0 голосов
/ 24 января 2020

Я экспериментирую с NavigationView для моего текущего проекта UWP. Я настроил панель NavigationView MenuItem таким образом, чтобы на ней были только значки без меню (гамбургер) и кнопка возврата. Для этого я установил следующие свойства NavigationView

IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftCompact"
IsPaneToggleButtonVisible="False"

Я также настроил заголовок NavigationView, настроив HeaderTemplate. Это вполне соответствует моим требованиям.

Но я не могу найти никакой помощи, чтобы перекрыть заголовок NavigationView на панели MenuItem.

Ниже фрагмент поможет понять мое требование

Образец изображения

Я хочу, чтобы мой заголовок (с черным фоном) находился в верхней части панели MenuItem (с серым фоном).

Любая помощь будет быть высоко ценится. Спасибо

1 Ответ

0 голосов
/ 27 января 2020

Если вы хотите поместить свой заголовок в верхнюю часть панели MenuItem, вам нужно изменить его макет в стиле NavigationView. В своем стиле ContentControl с именем HeaderContent представляет заголовок 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>
...