New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI NavigationView Commands

Updated over 6 months ago

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"

.NET MAUI NavigationView Commands

See Also