First we need to get the Template of the NavigationView, Document Outline => Your NavigationView => Edit Template => edit a Copy.
Here is mine:
Look for the style that has a target type = Navigation View, here is mine:
<Style x:Key="NavigationViewStyle1" TargetType="NavigationView">
Next we will need to find the NavigationViewItem that holds our settings button:
<NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="7"> <NavigationViewItem.Icon> <SymbolIcon Symbol="Setting" /> </NavigationViewItem.Icon> </NavigationViewItem>
Now we are going to add our 2 new buttons, first we are going to add s stackpanel and move the property Grid.Row=7 to it as follows:
<StackPanel Grid.Row="7"> <NavigationViewItem x:Name="AddedNavItemOne" Tag="MyViewOne"> <NavigationViewItem.Icon><SymbolIcon Symbol="World" /> </NavigationViewItem.Icon></NavigationViewItem> <NavigationViewItem x:Name="AddedNavItemTwo" Tag="MyViewTwo">
<NavigationViewItem.Icon><SymbolIcon Symbol="Search" /> </NavigationViewItem.Icon></NavigationViewItem> <NavigationViewItem x:Name="SettingsNavPaneItem"> <NavigationViewItem.Icon> <SymbolIcon Symbol="Setting" /> </NavigationViewItem.Icon> </NavigationViewItem> </StackPanel>
Now we need to be able to handle the Click actions of these 2 new NavigationViewItem.
We are going to create a class that inherits from NavigationView that will be called ExtendedNavigationView and we arer going to look for our 2 buttons and set handlers on the Tapped events as follows:
_navItemOne= GetTemplateChild("AddedNavItemOne") as NavigationViewItem; //addign events _navItemOne.Tapped += NavItem_Tapped;
The full class will look as follows:
public class ExtendedNavigationView : NavigationView { private NavigationViewItem _navItemOne; private NavigationViewItem _navItemTwo; protected override void OnApplyTemplate() { base.OnApplyTemplate(); SetupExtraNavItems(); } private void SetupExtraNavItems() { //check to see if not already set if (_navItemOne!= null) { //unload events _navItemOne.Tapped -= NavItem_Tapped; } if (_navItemTwo!= null) { _navItemTwo.Tapped -= NavItem_Tapped; } _navItemOne= GetTemplateChild("AddedNavItemOne") as NavigationViewItem; _navItemTwo = GetTemplateChild("AddedNavItemTwo") as NavigationViewItem; if (_navItemOne== null || _navItemTwo== null) { return; } //addign events _navItemOne.Tapped += NavItem_Tapped; _navItemTwo.Tapped += NavItem_Tapped; } private void NavItem_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) { var NavView = (sender as NavigationViewItem).Tag; //navigate to item }
And there you have it you have customized your NavigationView with 2 new NavigationViewItems above the Settings button.
Happy Coding.