.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 typeTelerik.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 theNavigationViewPane
control. -
Header
—The navigation item is placed in the header area of theNavigationViewPane
control. -
Footer
—The navigation item is placed in the footer area of theNavigationViewPane
control.
- Default
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 istrue
.
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. TheClicked
event handler receives two parameters:- The
sender
argument, which is of typeobject
, but can be cast to theNavigationViewItem
. -
System.EventArgs
.
- The
-
IsSelectedChanged
—Raised when the NavigationView itemIsSelected
property has changed. TheIsSelectedChanged
event handler receives two parameters:- The
sender
argument, which is of typeobject
, but can be cast to theNavigationViewItem
. -
System.EventArgs
.
- The
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.