NavigationView does not respect MVVM

[SuperJMN]

Describe the bug
In order to follow the MVVM pattern, you need to avoid having references to anything that is related to the underlying presentation technology in a ViewModel. This control makes it very difficult to follow that requirement, because for example, the Settings item is a UI control.

I've rather go with all models instead.

[amwx]

You can disable the built-in Settings item (property on NavView) and supply your own in the FooterMenuItems/FooterMenuItemsSource.

[SuperJMN]

That's a nice workaround for the settings case, but how to define templates? I haven't managed to bind my own model's name and icon to the NavigationViewMenuItems.

I've looked for a pure MVVM sample, but found nothing.
Thanks in advance.

[amwx]

I'm assuming you have different ViewModel types for different types of items? To handle that, use a DataTemplateSelector, which there is an example for on the NavigationView page:

FluentAvalonia/samples/FAControlsGallery/Pages/FAControlsPages/NavigationViewPage.axaml

Lines 55 to 96 in 4d847a8

	<ctrls:ControlExample Header="Binding to a NavigationView"
	XamlSource="avares://FAControlsGallery/Pages/SampleCode/NavView3.xaml.txt">
	<ui:NavigationView x:Name="nvSample3" Height="460"
	PaneDisplayMode="LeftCompact"
	MenuItemsSource="{Binding Categories}"
	Content="{Binding CurrentPage}"
	SelectedItem="{Binding SelectedCategory}">
	<!--
	If you only need NavigationViewItems, you can just set the ItemTemplate:
	<ui:NavigationView.MenuItemTemplate>
	<DataTemplate DataType="{x:Type vm:Category}">
	<ui:NavigationViewItem Content="{Binding Name}" Icon="{Binding Icon}" ToolTip.Tip="{Binding ToolTip}" />
	</DataTemplate>
	</ui:NavigationView.MenuItemTemplate>
	-->
	<ui:NavigationView.MenuItemTemplateSelector>
	<!--
	If you need to bind to multiple different containers,
	like including separators, you'll need to use a DataTemplateSelector
	-->
	<vm:MenuItemTemplateSelector>
	<!--
	Default DataTemplate
	Our binded collection has 4 items and a Separator. This template
	will apply to all items, the separator was defined in the
	MenuItemTemplateSelector
	-->
	<DataTemplate DataType="{x:Type vm:Category}">
	<ui:NavigationViewItem Content="{Binding Name}" IconSource="{Binding Icon}" ToolTip.Tip="{Binding ToolTip}" />
	</DataTemplate>
	<vm:MenuItemTemplateSelector.SeparatorTemplate>
	<DataTemplate DataType="{x:Type vm:Separator}">
	<ui:NavigationViewItemSeparator />
	</DataTemplate>
	</vm:MenuItemTemplateSelector.SeparatorTemplate>
	</vm:MenuItemTemplateSelector>
	</ui:NavigationView.MenuItemTemplateSelector>
	</ui:NavigationView>
	</ctrls:ControlExample>

and the DataTemplateSelector class impl:

FluentAvalonia/samples/FAControlsGallery/ViewModels/FAControlPages/NavViewPageViewModel.cs

Lines 76 to 87 in 4d847a8

	public class MenuItemTemplateSelector : DataTemplateSelector
	{
	[Content]
	public IDataTemplate ItemTemplate { get; set; }
	public IDataTemplate SeparatorTemplate { get; set; }
	protected override IDataTemplate SelectTemplateCore(object item)
	{
	return item is Separator ? SeparatorTemplate : ItemTemplate;
	}
	}

(note in the sample app I put that class with the ViewModel, but that's just because I'm lazy - that can be put anywhere). This is a minimal version of the DataTemplateSelector. It could be made more extensible by storing a list of IDataTemplate which you could then declare an instance of your template selector as a resource with the the data templates desired and {StaticResource} it to the NavView. To handle the list, change the SelectTemplateCore method to loop over the templates to match its data type with the item argument (template[i].Match(item)).