UWP XAML dynamically add Navigation View items using a menu selection

Question

Looking into creating a way to dynamically add navigation view items either using a page with drop downs or flyout menu and didn't know if it would be possible or should I look at using tree view vs navigation view.

Menu

Accepted Answer

Hi @Douglas Harris Welcome to Microsoft Q&A!

You can dynamically add Navigation View items using NavigationView.MenuItems.

Here is a minimal sample written according to your needs, you can refer to it.

The NavigationView used in the sample is a WinUI control, you need to install the latest version Microsoft.UI.Xaml in the NuGet Package Manager.

MainPage.xaml

// xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

MainPage.xaml.cs

// using MUXC = Microsoft.UI.Xaml.Controls;
private void NavigationViewControl_ItemInvoked_1(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked)
    {
        if (SettingPanel.Visibility == Visibility.Collapsed) 
        {
            SettingPanel.Visibility = Visibility.Visible;
        }
        else
        {
            SettingPanel.Visibility = Visibility.Collapsed;
        }
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    MUXC.NavigationViewItem newSubItem = new MUXC.NavigationViewItem();
    newSubItem.Content = "newSubItem";
            
    foreach (var item  in NavigationViewControl.MenuItems)
    {
        var menuItem = item as MUXC.NavigationViewItem;
        var selectItem = NavigationViewControl.SelectedItem as MUXC.NavigationViewItem;
        //find selectedItem
        if (menuItem!=null &&
            selectItem!=null &&
            menuItem.Content.ToString() == selectItem.Content.ToString()) 
        {
            menuItem.MenuItems.Add(newSubItem);
        }
    }
                
}

Click the Setting button, AddSubItem Button will show on the right. Then select the MenuItem which you want to add sub-items and click AddSubItem Button.

Thank you,

Junjie

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer

Hi @Douglas Harris In the following example, it use Frame.Navigate to send the navigationView object to SettingPage, and use FrameworkElement.Tag to save the URL in SubItem, and finally use Frame.Navigate again to send the URL to WebviewPage.

MainPage.xaml

MainPage.xaml.cs

private void NavigationViewControl_ItemInvoked_1(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked)
    {
        ContentFrame.Navigate(typeof(SettingPage), sender);
    }
    else if (args.InvokedItem.ToString() == "C#" || args.InvokedItem.ToString() == "XAML")
    {             
        var selectItem = NavigationViewControl.SelectedItem as MUXC.NavigationViewItem;
        var strURL = selectItem.Tag.ToString();
               
        ContentFrame.Navigate(typeof(WebView2Page), strURL);
    }
           
}

SettingPage.xaml


    
    

    
        Coding
        Github
    

    
        C#
        XAML

SettingPage.xaml.cs

List Cb1List= new List();
MUXC.NavigationView navigationView = null;
int NewItemCount= 0;
       
public SettingPage()
{
    this.InitializeComponent();
            
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{

    base.OnNavigatedTo(e);

    navigationView = e.Parameter as MUXC.NavigationView;

    if (navigationView != null)
    {
        Cb1List.Clear();

        foreach (var item in navigationView.MenuItems)
        {
            var menuItem = item as MUXC.NavigationViewItem;
            if (menuItem != null)
            {
                Cb1List.Add(menuItem.Content.ToString());
            }
        }
        Cb1List.Add("New Location");
    }

    CB1.ItemsSource = Cb1List;
}

private void button_Click(object sender, RoutedEventArgs e)
{
    if (navigationView == null) return;

    if (CB1.SelectionBoxItem==null || CB2.SelectionBoxItem== null || CB3.SelectionBoxItem == null || textBox.Text == null)
    {
        Debug.WriteLine("invalid value");
        return;
    }

    string strMenuItem = CB1.SelectionBoxItem.ToString();
    string strItem     = CB2.SelectionBoxItem.ToString();
    string strSubItem  = CB3.SelectionBoxItem.ToString();
    string strURL      = textBox.Text.ToString();

    MUXC.NavigationViewItem newItem = new MUXC.NavigationViewItem();
    newItem.Content = strItem;
    //define the newSubItem Tag
    MUXC.NavigationViewItem newSubItem = new MUXC.NavigationViewItem();
    newSubItem.Content = strSubItem;

    try
    {
        Uri targetUri = new Uri(strURL); 
        newSubItem.Tag = strURL;
    }
    catch (Exception)
    {
        Debug.WriteLine("invalid URL");
    }

            
    if (strMenuItem== "New Location")
    {
        //Add new menuItems
        NewItemCount++;
        strMenuItem = strMenuItem + "_" + NewItemCount.ToString(); //New Location_x
        MUXC.NavigationViewItem newMenuItem = new MUXC.NavigationViewItem();
        newMenuItem.Content = strMenuItem ;

        navigationView.MenuItems.Add(newMenuItem);

        foreach (var item in navigationView.MenuItems)
        {
                   
            var menuItem = item as MUXC.NavigationViewItem;
            //find selectedItem
            if (menuItem != null && menuItem.Content.ToString()== strMenuItem)
            {
                menuItem.MenuItems.Add(newItem);
                newItem.MenuItems.Add(newSubItem);
                break;
            }
        }
    }
    else
    {
        //Add new Items in selected Item
        foreach (var item in navigationView.MenuItems)
        {
            var menuItem = item as MUXC.NavigationViewItem;
            //find selectedItem
            if (menuItem != null && menuItem.Content.ToString() == strMenuItem)
            {
                menuItem.MenuItems.Add(newItem);
                newItem.MenuItems.Add(newSubItem);
                break;
            }
        }
    }

            

}

WebView2Page.xaml

WebView2Page.xaml.cs

public WebView2Page()
{
    this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    var strURL = e.Parameter as string;

    try
    {
        Uri targetUri = new Uri(strURL);              
        webview2.Source = targetUri;
    }
    catch (Exception)
    {
        Debug.WriteLine("invalid URL");
    }
           
}

Share via