NavigationView
Namespace: FluentAvalonia.UI.Controls
Represents a container that enables navigation of app content. It has a header, a view for the main content, and a menu pane for navigation commands.
C#
public class NavigationView : HeaderedContentControl
Xaml
<ui:NavigationView />
Required Template Parts
| Name | Control Type |
|---|---|
| TogglePaneButton | Button |
| PaneHeaderContentBorder | ContentControl |
| PaneCustomContentBorder | ContentControl |
| FooterContentBorder | ContentControl |
| PaneHeaderOnTopPane | ContentControl |
| PaneTitleOnTopPane | ContentControl |
| PaneCustomContentOnTopPane | ContentControl |
| PaneFooterOnTopPane | ContentControl |
| RootSplitView | SplitView |
| TopNavGrid | Grid |
| MenuItemsHost | ItemsRepeater |
| TopNavMenuItemsHost | ItemsRepeater |
| TopNavMenuItemsOverflowHost | ItemsRepeater |
| TopNavOverflowButton | Button |
| FooterMenuItemsHost | ItemsRepeater |
| TopFooterMenuItemsHost | ItemsRepeater |
| TopNavContentOverlayAreaGrid | Border |
| PaneAutoSuggestBoxPresenter | ContentControl |
| TopPaneAutoSuggestBoxPresenter | ContentControl |
| PaneContentGrid | Grid |
| ContentLeftPadding | Rectangle |
| PlaceholderGrid | Grid |
| PaneTitleTextBlock | Control |
| PaneTitlePresenter | ContentControl |
| PaneTitleHolder | Control |
| PaneAutoSuggestButton | Button |
| NavigationViewBackButton | Button |
| NavigationViewCloseButton | Button |
| MenuItemsScrollViewer | ScrollViewer |
| FooterItemsScrollViewer | ScrollViewer |
| ItemsContainerGrid | Control |
Pseudoclasses
:separator, :listsizecompact, :closedcompact, :backbuttoncollapsed, :panecollapsed, :headercollapsed, :minimalwithback, :minimal, :topnavminimal, :compact, :expanded, :autosuggestcollapsed, :settingscollapsed, :panetogglecollapsed, :panenotoverlaying, :disabled, :focus, :focus-visible, :focus-within, :pointerover
Examples and Usage Notes
None yet.
API
Note: Inherited members are not shown
Properties
| AlwaysShowHeader | Gets or sets a value that indicates whether the header is always visible. |
| AlwaysShowHeaderProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.AlwaysShowHeader` property |
| AutoCompleteBox | Gets or sets an `Avalonia.Controls.AutoCompleteBox` to be displayed in the NavigationView. |
| AutoCompleteBoxProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.AutoCompleteBox` property |
| CompactModeThresholdWidth | Gets or sets the minimum window width at which the NavigationView enters Compact display mode. |
| CompactModeThresholdWidthProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.CompactModeThresholdWidth` property |
| CompactPaneLength | Gets or sets the width of the NavigationView pane in its compact display mode. |
| CompactPaneLengthProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.CompactPaneLength` property |
| ContentOverlay | Gets or sets a UI element that is shown at the top of the control, below the pane if PaneDisplayMode is Top. |
| ContentOverlayProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.ContentOverlay` property |
| DisplayMode | Gets a value that specifies how the pane and content areas of a NavigationView are being shown. |
| DisplayModeProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.DisplayMode` property |
| ExpandedModeThresholdWidth | Gets or sets the minimum window width at which the NavigationView enters Expanded display mode. |
| ExpandedModeThresholdWidthProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.ExpandedModeThresholdWidth` property |
| FooterMenuItems | Gets the list of objects to be used as navigation items in the footer menu. |
| FooterMenuItemsProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.FooterMenuItemsProperty` |
| FooterMenuItemsSource | Gets or sets the object that represents the navigation items to be used in the footer menu. |
| FooterMenuItemsSourceProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.FooterMenuItems` property |
| IsBackButtonVisible | Gets or sets a value that indicates whether the back button is visible or not. |
| IsBackButtonVisibleProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsBackButtonVisible` property |
| IsBackEnabled | Gets or sets a value that indicates whether the back button is enabled or disabled. |
| IsBackEnabledProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsBackEnabled` property |
| IsPaneOpen | Gets or sets a value that specifies whether the NavigationView pane is expanded to its full width. |
| IsPaneOpenProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsPaneOpen` property |
| IsPaneToggleButtonVisible | Gets or sets a value that indicates whether the menu toggle button is shown. |
| IsPaneToggleButtonVisibleProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsPaneToggleButtonVisible` property |
| IsPaneVisible | Gets or sets a value that determines whether the pane is shown. |
| IsPaneVisibleProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsPaneVisible` property |
| IsSettingsVisible | Gets or sets a value that indicates whether the settings button is shown. |
| IsSettingsVisibleProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.IsSettingsVisible` property |
| MenuItems | Gets the collection of menu items displayed in the NavigationView. |
| MenuItemsProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.MenuItems` property |
| MenuItemsSource | Gets or sets an object source used to generate the content of the NavigationView menu. |
| MenuItemsSourceProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.MenuItemsSource` property |
| MenuItemTemplate | Gets or sets the DataTemplate used to display each menu item. |
| MenuItemTemplateProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.MenuItemTemplate` property |
| MenuItemTemplateSelector | Gets or sets a reference to a custom DataTemplateSelector logic class. The DataTemplateSelector referenced by this property returns a template to apply to items. |
| MenuItemTemplateSelectorProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.MenuItemTemplate` property |
| NavigationViewItemRevokersProperty | Property that stores disposables to each NavigationViewItem when their created in the ItemsRepeater, so they can be disposed when the item is removed |
| OpenPaneLength | Gets or sets the width of the NavigationView pane when it's fully expanded. |
| OpenPaneLengthProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.OpenPaneLength` property |
| PaneCustomContent | Gets or sets a UI element that is shown in the NavigationView pane. |
| PaneCustomContentProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.PaneCustomContent` property |
| PaneDisplayMode | Gets or sets a value that indicates how and where the NavigationView pane is shown. |
| PaneDisplayModeProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.PaneDisplayMode` property |
| PaneFooter | Gets or sets the content for the pane footer. |
| PaneFooterProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.PaneFooter` property |
| PaneHeader | Gets or sets the content for the pane header. |
| PaneHeaderProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.PaneHeader` property |
| PaneTitle | Gets or sets the label adjacent to the menu icon when the NavigationView pane is open. |
| PaneTitleProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.PaneTitle` property |
| SelectedItem | Gets or sets the selected item. |
| SelectedItemProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.SelectedItem` property |
| SelectionFollowsFocus | Gets or sets a value that indicates whether item selection changes when keyboard focus changes. |
| SelectionFollowsFocusProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.SelectionFollowsFocus` property |
| SettingsItem | Gets the navigation item that represents the entry point to app settings. |
| SettingsItemProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.SettingsItem` property |
| TemplateSettings | Gets an object that provides calculated values that can be referenced as TemplateBinding sources when defining templates for a NavigationView control. |
| TemplateSettingsProperty | Defines the `FluentAvalonia.UI.Controls.NavigationView.TemplateSettings` property |
Events
| BackRequested | Occurs when the back button receives an interaction such as a click or tap. |
| DisplayModeChanged | Occurs when the DisplayMode property changes. |
| ItemCollapsed | Occurs when a node in the tree is collapsed. |
| ItemExpanding | Occurs when a node in the tree starts to expand. |
| ItemInvoked | Occurs when an item in the menu receives an interaction such a a click or tap. |
| PaneClosed | Occurs when the NavigationView pane is closed. |
| PaneClosing | Occurs when the NavigationView pane is closing. |
| PaneOpened | Occurs when the NavigationView pane is opened. |
| PaneOpening | Occurs when the NavigationView pane is opening. |
| SelectionChanged | Occurs when the currently selected item changes. |
Methods
| CoercePropertyValueToGreaterThanZero(AvaloniaObject, Double) | Coerces a double to ensure its valid for use, i.e. >= 0 and not NaN or infinity Used for: CompactModeThresholdWidthProperty, CompactPaneLengthProperty, ExpandedModeThresholdWidthProperty, and OpenPaneLengthProperty |
Related Enums/Classes
NavigationViewDisplayMode
| Minimal | Only the menu button remains fixed. The pane shows and hides as needed. |
| Compact | The pane always shows as a narrow sliver which can be opened to full width. |
| Expanded | The pane stays open alongside the content. |
NavigationViewPaneDisplayMode
| Auto | The pane is shown on the left side of the control, and changes between minimal, compact, and full states depending on the width of the window. |
| Left | The pane is shown on the left side of the control in its fully open state. |
| Top | The pane is shown at the top of the control. |
| LeftCompact | The pane is shown on the left side of the control. Only the pane icons are shown by default. |
| LeftMinimal | The pane is shown on the left side of the control. Only the pane menu button is shown by default. |
NavigationViewPaneClosingEventArgs
| Cancel | Gets or sets a value that indicates whether the event should be canceled. |
| SplitViewClosingArgs | Gets the events pane closing event args from the SplitView |
NavigationViewBackRequestedEventArgs
NavigationViewSelectionChangedEventArgs
| SelectedItem | Gets the newly selected menu item. |
| SelectedItemContainer | Gets the container for the selected item. |
| IsSettingsSelected | Gets a value that indicates whether the SelectedItem is the menu item for Settings. |
| RecommendedNavigationTransitionInfo | Gets the navigation transition recommended for the direction of the navigation. |
NavigationViewItemInvokedEventArgs
| InvokedItem | Gets a reference to the invoked item. |
| IsSettingsInvoked | Gets a value that indicates whether the InvokedItem is the menu item for Settings. |
| InvokedItemContainer | Gets the container for the invoked item. |
| RecommendedNavigationTransitionInfo | Gets the navigation transition recommended for the direction of the navigation. |
NavigationViewDisplayModeChangedEventArgs
| DisplayMode | Gets the new display mode. |
NavigationViewItemExpandingEventArgs
| ExpandingItem | Gets the object that is expanding after the NavigationViewItem.Expanding event. |
| ExpandingItemContainer | Gets the container of the expanding item after a NavigationViewItem.Expanding event. |
NavigationViewItemCollapsedEventArgs
| CollapsedItem | Gets the object that has been collapsed after the NavigationViewItem.ItemCollapsed event. |
| CollapsedItemContainer | Gets the container of the object that was collapsed in the NavigationViewItem.ItemCollapsed event. |