Can't achieve the same behavior in NavigationView's item template across Windows 10 Versions

Question

I'm very frustrated trying to achieve the same visual behavior in my UWP app. Here is my problem:

I’m using a NavigationView and I want to supply the NavigationViewItem(s) from the ViewModel. I also want to supply headers, so I create an ICollectionDataItem interface and implement ViewModels for both the NavigationViewItem and NavigationViewItemHeader so that the Main View Model supplies a list of ICollectionDataItem to the NavigationView and a DataTemplateSelector do the magic. This is how it looks like right now:

<NavigationView 
  MenuItemsSource="{Binding Home.CollectionsView, Source={StaticResource Locator}}"
  MenuItemTemplateSelector="{StaticResource NavigationViewTemplateSelector}" />

public interface ICollectionDataItem
{
    string Title { get; set; }
    string Glyph { get; set; }
    bool IsVisible { get; set; }
    bool IsHeader { get; set; }
}

Then I create a DataTemplate for NavigationViewItem and another for the NavigationViewItemHeader:

<DataTemplate x:Key="NavigationItemTemplate" x:DataType="models:ICollectionDataItem">
  <NavigationViewItem> <!--Bindings-->
  </NavigationViewItem>
</DataTemplate>
<DataTemplate x:Key="NavigationHeaderTemplate" x:DataType="models:ICollectionDataItem">
  <NavigationViewItemHeader> <!--Bindings-->
  </NavigationViewItemHeader>
</DataTemplate>

And now, of course, the DataTemplateSelector:

public DataTemplate NavItemTemplate { get; set; }
public DataTemplate NavItemHeaderTemplate { get; set; }

protected override DataTemplate SelectTemplateCore(object item)
{
    ICollectionDataItem data = (ICollectionDataItem)item;
    return (data.IsHeader) ? NavItemHeaderTemplate : NavItemTemplate;
}

This works perfectly fine… until it doesn’t. The default style for NavigationViewItem in Windows 10 SDK 1809 is completely different than in 1803. While in the first SDK everything works perfect, in the second it doesn’t recognize the NavigationHeaderTemplate as a NavigationViewItemHeader, instead it shows a NavigationViewItem with a NavigationViewItemHeader as Content which is perfectly selectable.

I can imagine how to solve this for NavigationViewItem(s), I can check Windows versions, I can set different templates for the different versions, but my question is:

How can I provide a list of ICollectionDataItem to a NavigationView and then translate that into NavigationViewItem(s) and NavigationViewItemHeader(s) using xaml and guarantee the same behavior in both Windows 10 1803 and 1809 (I don’t pretend to use previous versions)?

Maybe you think the answer is obvious, try it by yourself and you’ll see.

I’m really frustrated with this issue; any help will be appreciated.

Thanks in advance

Answer 1

Aside from using SplitView and implementing your custom navigation (which is basically what NavigationView does), I don't see any other solutions - as described this seems to be the bug at the operating system level.

Answer 2

I have checked the latest NavigationView. And it has a lot of new feature such as top placement. We add NavigationViewItemPresenter class for the new NavigationView.Certainly, we suggest you use the latest version of NavigationView. if you do want make it has same appearance in different target version. You could use NavigationView that comes from Community Tool Kit.