.NET MAUI NavigationView Item

This articles explains the configuration options of the NavigationViewItem.

Setting Text

Display text in the NavigationViewItem by setting the Text (string) property.

Setting Image

Display images in the NavigationViewItem by setting the ImageSource (Microsoft.Maui.Controls.ImageSource) property.

Setting Position

You can configure the navigation items' position by adding them to the Pane header, footer, or to the content.

• Position (enum of type Telerik.Maui.Controls.NavigationView.NavigationViewItemPosition)—Specifies the position of the navigation item. The available options are:
  • Default Content—The navigation item is placed in the content area of the NavigationViewPane control.
  • Header—The navigation item is placed in the header area of the NavigationViewPane control.
  • Footer—The navigation item is placed in the footer area of the NavigationViewPane control.

The content area is scrollable, while the header and the footer are sticky.

Setting Selection

The .NET MAUI NavigationViewItem exposes the following properties related to the item selection:

• IsSelected (bool)—Specifies a value indicating whether the navigation item is selected.
• IsSelectable (bool)—Specifies a value indicating whether the navigation item is selectable. The default value is true.

Setting Custom Content

Customize the NavigationViewItem content by using the ContentTemplate (DataTemplate) property.

Here is an example with ContentTemplate property.

1. Define the ContentTemplate in the resources:

<DataTemplate x:Key="ItemContentTemplate">
    <telerik:RadEntry Placeholder="Search..."
                      ReserveSpaceForErrorView="False"
                      Margin="{OnIdiom Default='0, 0, 12, 0', Phone='0, 0, 4, 0'}" />
</DataTemplate>

2. Set the ContentTemplate to the NavigationViewItem:

<telerik:RadNavigationView x:Name="navigationView"
                            HeaderText="NavigationView Header">
    <telerik:RadNavigationView.Items>
        <telerik:NavigationViewItem Text="Search"
                                    Position="Header"
                                    ContentTemplate="{StaticResource SearchTemplate}"
                                    IsSelectable="False">
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Item 1" />
        <telerik:NavigationViewItem Text="Item 2" />
        <telerik:NavigationViewItem Text="Item 5" />
    </telerik:RadNavigationView.Items>
</telerik:RadNavigationView>

Setting Visibility and Enabled State

Change the visibility of the NavigationViewItem by setting the IsVisible (bool) property.

Change the enabled state of the NavigationViewItem by setting the IsEnabled (bool) property.

Configuring the Items

You can further configure the NavigationView items by using the ControlTemplate (ControlTemplate) property.

Here is an example with ControlTemplate property.

1. Define the ControlTemplate in the resources:

<ControlTemplate x:Key="ItemTemplate">
    <Grid BackgroundColor="Transparent">
        <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                           Background="{TemplateBinding BackgroundColor}"
                           BorderColor="{TemplateBinding BorderColor}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}"
                           CornerRadius="{TemplateBinding CornerRadius}"
                           Margin="{TemplateBinding ContentPadding}" />
        <Grid ColumnDefinitions="Auto, *"
              ColumnSpacing="{TemplateBinding Spacing}">
            <Grid WidthRequest="{TemplateBinding LeadingWidth}">
                <Image Source="{TemplateBinding ActualImageSource}"
                       Aspect="{TemplateBinding ImageAspect}"
                       WidthRequest="{TemplateBinding ImageWidth}"
                       HeightRequest="{TemplateBinding ImageHeight}" />
            </Grid>
            <Grid Grid.Column="1"
                  ColumnDefinitions="*, Auto">
                <Label Text="{TemplateBinding Text}"
                       TextColor="{TemplateBinding TextColor}"
                       FontFamily="{TemplateBinding FontFamily}"
                       FontSize="{TemplateBinding FontSize}"
                       FontAttributes="{TemplateBinding FontAttributes}"
                       HorizontalTextAlignment="{TemplateBinding HorizontalTextAlignment}"
                       VerticalTextAlignment="{TemplateBinding VerticalTextAlignment}"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Column="1"
                       FontSize="16"
                       FontFamily="{x:Static telerik:TelerikFont.Name}"
                       Text="{x:Static telerik:TelerikFont.IconOpenHyperlink}"
                       TextColor="#0078D4"
                       Margin="{OnIdiom Default='0, 0, 12, 0', Phone='0, 0, 4, 0'}"
                       VerticalOptions="Center" />
            </Grid>
        </Grid>
    </Grid>
</ControlTemplate>

2. Set the ContentTemplate to the NavigationViewItem:

<telerik:RadNavigationView x:Name="navigationView"
                            HeaderText="NavigationView Header">
    <telerik:RadNavigationView.Items>
        <telerik:NavigationViewItem Text="Item 1" />
        <telerik:NavigationViewItem Text="Item 2" />
        <telerik:NavigationViewItem Text="Item 3" />
        <telerik:NavigationViewItem ControlTemplate="{StaticResource ItemTemplate}"/>
        <telerik:NavigationViewItem Text="Item 5" />
    </telerik:RadNavigationView.Items>
</telerik:RadNavigationView>

For the runnable NavigationView Navigation Item example, see the SDKBrowser Demo Application and go to NavigationView > Features > Pane Header and Footer example.

Events

The .NET MAUI NavigationViewItem exposes the following events:

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

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

• IsSelectedChanged—Raised when the NavigationView item IsSelected property has changed. The IsSelectedChanged event handler receives two parameters:

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

Commands

• Command (ICommand)—Executed when the navigation item is clicked.
• CommandParameter—Specifies the parameter to the command which is executed when the navigation item is clicked.

Next Steps

How to style the NavigationView items is described in the NavigationItem Styling article.

See Also

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