.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:
<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:
<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:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"