lundi 27 août 2018

[UWP/XAML] How to customize your NavigationView and add NavigationViewItem next to the Settings button

In this tutorial we are going to see how to add NavigationViewItems next to your Settings button in your NavigationView view.

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.