.NET MAUI NavigationView Events

The .NET MAUI NavigationView emits a set of events that allow you to configure the component's behavior in response to specific user actions.

The .NET MAUI NavigationView exposes the following events:

• The SelectionChanged—Raised when the currently selected NavigationView item has changed. The SelectionChanged event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadNavigationView control.
  • System.EventArgs.

• The ItemClicked—Raised when the NavigationView item is clicked. The ItemClicked event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadNavigationView control.
  • NavigationItem (Telerik.Maui.Controls.NavigationView.NavigationViewItem)—Gets the NavigationViewItem for which the interaction is performed.

• The PaneOpened—Raised when the Pane opening animation completes. The PaneOpened event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadNavigationView control.
  • System.EventArgs.

• The PaneClosed—Raised when the Pane closing animation completed. The PaneClosed event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadNavigationView control.
  • System.EventArgs.

Events Example:

1. Define the NavigationView control:

<telerik:RadNavigationView x:Name="navigationView"
                           PaneOpened="OnPaneOpened"
                           PaneClosed="OnPaneClosed"
                           SelectionChanged="OnSelectionChanged"
                           ItemClicked="OnItemClicked">
    <telerik:RadNavigationView.Items>
        <telerik:NavigationViewItem Position="Header">
            <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="About Author">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAuthor}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Add data" 
                                    IsSelectable="False">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAdd}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Edit data">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconEdit}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Delete data">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconDelete}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
    </telerik:RadNavigationView.Items>
    <telerik:RadNavigationView.Content>
        <Label x:Name="label"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
    </telerik:RadNavigationView.Content>
</telerik:RadNavigationView>

2. Add the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. The SelectionChanged implementation:

private void OnSelectionChanged(object sender, System.EventArgs e)
{
    var control = (RadNavigationView)sender;
    var selectedItem = (NavigationViewItem)control.SelectedItem;
    this.label.Text = selectedItem.Text;
}

4. The ItemClicked implementation:

private void OnItemClicked(object sender, Telerik.Maui.Controls.NavigationView.NavigationViewItemEventArgs e)
{
    var item = e.NavigationItem;
    Application.Current.MainPage.DisplayAlert("Item " + item.Text, " is clicked", "OK");
}

5. The PaneOpened implementation:

private void OnPaneOpened(object sender, System.EventArgs e)
{
    Application.Current.MainPage.DisplayAlert("Pane is opened", "", "OK");
}

6. The PaneClosed implementation:

private void OnPaneClosed(object sender, System.EventArgs e)
{
    Application.Current.MainPage.DisplayAlert("Pane is closed", "", "OK");
}

For the runnable NavigationView Events example, see the SDKBrowser Demo Application and go to NavigationView > Events category.

See Also

• Setting different Display Mode
• Selecting an item
• Configure the Navigation Pane
• Configure the Navigation Item
• Configure the Navigation Header
• Navigation Item Styling
• Navigation Pane Styling
• Navigation Header Styling
• Commands