.NET MAUI NavigationView Commands

The .NET MAUI NavigationView provides commands that allow you to initiate open or close actions for the pane and toggle its state.

The available commands are:

• OpenPaneCommand (ICommand)—Gets the command which opens the pane.
• ClosePaneCommand (ICommand)—Gets the command which closes the pane.
• TogglePaneCommand (ICommand)—Gets the command which opens and closes the pane.

Here is an example how to use the commands:

1. Bind the NavigationView commands to buttons command:

• XAML

<HorizontalStackLayout Spacing="5">
    <Button Text="Open Pane" Command="{Binding OpenPaneCommand, Source={x:Reference navigationView}}"/>
    <Button Text="Close Pane" Command="{Binding ClosePaneCommand, Source={x:Reference navigationView}}"/>
    <Button Text="Toggle Pane" Command="{Binding TogglePaneCommand, Source={x:Reference navigationView}}"/>
</HorizontalStackLayout>

2. Define the NavigationView control:

• XAML

<Grid RowDefinitions="Auto,*" RowSpacing="10">
    <HorizontalStackLayout Spacing="5">
        <Button Text="Open Pane" Command="{Binding OpenPaneCommand, Source={x:Reference navigationView}}"/>
        <Button Text="Close Pane" Command="{Binding ClosePaneCommand, Source={x:Reference navigationView}}"/>
        <Button Text="Toggle Pane" Command="{Binding TogglePaneCommand, Source={x:Reference navigationView}}"/>
    </HorizontalStackLayout>

    <telerik:RadNavigationView x:Name="navigationView" Grid.Row="1">
        <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>
</Grid>

3. Add the telerik namespaces:

• XAML

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