NavigationView Examples | where is command button???

[michalss]

Its very hard to understand how to navigare throuth Frame. Why there is not any Command button please ? This is very strange and it is so confusing. can any one please simple make some example how navigation works please. I did check samples but its all about mess i could not find it answer just xaml samples without any explnation how to click and navigate.

Thank you

<ui:NavigationView x:Name="nvSample6" Height="460" 
                   PaneDisplayMode="$(PaneDisplayMode)"
                   IsBackButtonVisible="$(BackButtonVis)"
                   IsBackEnabled="$(BackEnabled)"
                   Header="$(Header)"
                   AlwaysShowHeader="$(AlwaysHeader)"
                   PaneTitle="$(PaneTitle)"
                   IsSettingsVisible="$(Settings)">
    <ui:NavigationView.MenuItems>
        <ui:NavigationViewItem Content="Menu Item1" Tag="SamplePage1" Icon="Play" />
        <ui:NavigationViewItemHeader Content="Actions" />
        <ui:NavigationViewItem Name="MenuItem2" Content="Menu Item2" Tag="SamplePage2" Icon="Download" $(NoSelection) />
        <ui:NavigationViewItem Content="Menu Item3" Tag="SamplePage3" Icon="Refresh" />
    </ui:NavigationView.MenuItems>

    <ui:NavigationView.AutoCompleteBox>
        <AutoCompleteBox />
    </ui:NavigationView.AutoCompleteBox>

    <ui:NavigationView.PaneCustomContent>
        <TextBlock Name="PaneHyperlink" TextDecorations="Underline" Text="More Info" IsVisible="$(CustomContent)" />
    </ui:NavigationView.PaneCustomContent>

    <ui:NavigationView.PaneFooter>
        <StackPanel Name="FooterStackPanel" Orientation="Vertical" IsVisible="$(PaneFooter)">
            <ui:NavigationViewItem Icon="Download" />
            <ui:NavigationViewItem Icon="Alert" />
        </StackPanel>
    </ui:NavigationView.PaneFooter>
			<Panel>
				<ui:Frame x:Name="FrameView"/>
			</Panel>
</ui:NavigationView>

[amwx]

Don't use the raw text in the files in the /SampleCode folder, they're read by the sample app and edited dynamically which is why they have things like $(BackEnabled). Build and run the sample app to preview the actual xaml source code.

However, I will note there needs to be an example with the Frame control, so I'll add that as part of my refactoring coming up. To use Frame with the NavigationView:

<ui:NavigationView Name="MyNavigationView">
    <!-- Set the frame as the content of the NavigationView -->
    <ui:Frame Name="MyFrameControl" />
</ui:NavigationView>

In code behind, handle navigation

// Handle invoking an NavigationViewItem (clicking on it, for example)
MyNavigationView.ItemInvoked += OnNavItemInvoked;
// Handle pressing the back button of the NavigationView (if you want it enabled)
MyNavigationView.BackRequested += OnBackRequested;

private void OnNavItemInvoked(object sender, NavigationViewItemInvokedEventArgs e)
{
    // Get the invoked NavigationViewItem
    var nvi = e.InvokedItemContainer as NavigationViewItem;
    // Get the invoked item (if using MVVM, otherwise its the same as the invoked container)
    var item = e.InvokedItem;
 
    // From the item selected, decide where you want to navigate to:
    // You can use the Tag property (or your view model from 'item' to determine the page to go to next
    if (nvi.Tag is Type t && t == typeof(HomePage))
    {
        // Call the Navigate method on Frame to navigate to the page you want
        MyFrame.Navigate(typeof(HomePage));
    }
}

private void OnNavigationViewBackRequested(object sender, NavigationViewBackRequestedEventArgs e)
{
    MyFrame.GoBack();
}

Also these controls come from WinUI, so you can always check their documentation too - the examples should work the same.

Why there is not any Command button please ?

I'm not sure what you mean by "Command button"