CODEWITHSUNDEEP
xamluwp
Brandnorth
Brandnorth

Reputation: 13

How to change height of NavigationView top panel

Problem

I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.

What Have I Tried?

I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).

Code

Here is my current XAML code:

<NavigationView
        x:Name="navMain"
        IsBackButtonVisible="Collapsed"
        IsSettingsVisible="False"
        IsTabStop="False"
        PaneDisplayMode="Top">
        <NavigationView.MenuItems>
            <NavigationViewItem
                Content="ITEM 1"
                FontSize="60"
                Tag="Page1" />
            <NavigationViewItem
                Content="ITEM2"
                FontSize="60"
                Tag="Page2" />
            <NavigationViewItem
                Content="ITEM 3"
                FontSize="60"
                Tag="Page3" />
        </NavigationView.MenuItems>
</NavigationView>

Desired Result

I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.

Upvotes: 1

Views: 1764

Answers (2)

Daniel
Daniel

Reputation: 71

All you need to do is override NavigationViewTopPaneHeight using lightweight styling, like this (you don't need to re-template the control):

<muxc:NavigationView.Resources>
  <x:Double x:Key="NavigationViewTopPaneHeight">100</x:Double>
</muxc:NavigationView.Resources>

Upvotes: 3

Xie Steven
Xie Steven

Reputation: 8601

This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.

To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.

Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.

enter image description here

Upvotes: 0

Related Questions