Integrating NavigationView with MAUI Navigation
Environment
| Versions | Product | Author |
|---|---|---|
| 9.0.0 | Telerik UI for .NET MAUI NavigationView | Dobrinka Yordanova |
Description
Understanding how Telerik UI for .NET MAUI NavigationView integrates with the .NET MAUI Navigation system is crucial for developing seamless navigation within your application.
This knowledge base article also answers the following questions:
- How do I navigate between pages using NavigationView in a .NET MAUI application?
- Can NavigationView work with MAUI NavigationPage for navigating through pages?
- How to handle selection changes in NavigationView for page navigation?
Solution
To integrate Telerik UI for .NET MAUI NavigationView with MAUI navigation, first consider the difference between the two: Telerik MAUI RadNavigationView is a control for displaying navigation items (views, control, etc.) and does not inherently manage page navigation. In contrast, MAUI NavigationPage manages a stack of pages, facilitating navigation and user experience.
Then, once you know the difference between them, you can implement the navigation logic.
NavigationView Implementation
Use the SelectionChanged event of the NavigationView to implement custom navigation logic. When a navigation item is selected, navigate to the corresponding page using the Navigation.PushAsync method.
1. Define the RadNavigationView in XAML with the navigation items:
<telerik:RadNavigationView x:Name="navigationView" SelectionChanged="navigationView_SelectionChanged"
HeaderText="Navigation Header">
<telerik:RadNavigationView.Items>
<telerik:NavigationViewItem Text="Search"
Position="Header"
IsSelectable="False">
<telerik:NavigationViewItem.ImageSource>
<FontImageSource Glyph="{x:Static telerik:TelerikFont.IconSearch}"
FontFamily="{x:Static telerik:TelerikFont.Name}"
Size="16" />
</telerik:NavigationViewItem.ImageSource>
</telerik:NavigationViewItem>
<telerik:NavigationViewItem Text="Item 1" />
<telerik:NavigationViewItem Text="Item 2" />
<telerik:NavigationViewItem Text="Settings"
Position="Footer">
<telerik:NavigationViewItem.ImageSource>
<FontImageSource Glyph="{x:Static telerik:TelerikFont.IconMore}"
FontFamily="{x:Static telerik:TelerikFont.Name}"
Size="16" />
</telerik:NavigationViewItem.ImageSource>
</telerik:NavigationViewItem>
</telerik:RadNavigationView.Items>
<telerik:RadNavigationView.Content>
<Grid BackgroundColor="LightBlue">
<Label Text="Content area where you can add views but not pages"/>
</Grid>
</telerik:RadNavigationView.Content>
</telerik:RadNavigationView>
2. Handle the SelectionChanged event to navigate to different pages based on the selected item:
private void navigationView_SelectionChanged(object sender, EventArgs e)
{
var control = sender as RadNavigationView;
var selItem = control.SelectedItem as NavigationViewItem;
var selectedItemText = selItem == null ? "null" : selItem.Text;
if(selectedItemText == "Item 1")
{
Navigation.PushAsync(new NewPage1());
}
else if(selectedItemText == "Item 2")
{
Navigation.PushAsync(new NewPage2());
}
}
Using .NET MAUI NavigationPage
For managing a stack of pages and enhancing user experience, utilize the MAUI NavigationPage. Review the official NavigationPage documentation for detailed information.
Using .NET MAUI Shell Navigation
If your application requires shell-like navigation with hosting pages, consider using the .NET MAUI Shell navigation structure. For more details, refer to the official documentation on Shell navigation and Shell pages.