xamlwinui-3winui

How can I change the height of the NavigationView Header?


Header Screenshot

How can i reduce the space above and bellow the Header Text shown in my picture. I see that it comes from the DataTemplate for the header but I did not get it. Also https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview.header?view=winrt-22621 did not really help. I would also like to know how to align the Header Text left in one line with the blue content area bellow.

<NavigationView
            x:Name="NavigationViewControl"
            Canvas.ZIndex="0"
            IsBackButtonVisible="Visible"
            IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
            IsSettingsVisible="True"
            ExpandedModeThresholdWidth="1280"
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            OpenPaneLength="160"
            IsPaneOpen="False"
            Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Dashboard" helpers:NavigationHelper.NavigateTo="App.ViewModels.DashboardViewModel" Icon="Home" ></NavigationViewItem>
            </NavigationView.MenuItems>
            <NavigationView.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </NavigationView.HeaderTemplate>
            <i:Interaction.Behaviors>
                <behaviors:NavigationViewHeaderBehavior
                    DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
                    <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock
                                    Text="{Binding}"
                                    Style="{ThemeResource TitleTextBlockStyle}" />
                            </Grid>
                        </DataTemplate>
                    </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                </behaviors:NavigationViewHeaderBehavior>
            </i:Interaction.Behaviors>
            <Frame x:Name="NavigationFrame" Grid.Row="2" Background="{ThemeResource SystemAccentColorLight2}" Padding="3" CornerRadius="8"/>
</NavigationView>

Solution

  • You need to override this resource:

    <Thickness x:Key="NavigationViewHeaderMargin">56,44,0,0</Thickness>
    

    You can override it as Page resource:

    <Page>
        <Page.Resources>
            <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
        </Page.Resources>
        <NavigationView />
    </Page>
    

    or inside your NavigationView:

    <NavigationView>
        <NavigationView.Resources>
            <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
        </NavigationView.Resources>
    </NavigationView>
    

    You can see how NavigationViewHeaderMargin is actually used in generic.xaml.