How can I use NavigationBar with MVVM? (MaterialDesign3)

[BrensNina]

Hi! First of all, I apologize if I’m missing something obvious, but I’ve been looking into the example of how to use the Navigation Bar with MVVM and I can’t seem to find a clear way to connect it properly.

Here’s the code I’m referring to (Design Material Demo):

<Grid Height="80" Background="{DynamicResource MaterialDesignCardBackground}">
  <ListBox
    Height="80"
    ItemsSource="{Binding SampleList}"
    SelectedIndex="0"
    Style="{StaticResource MaterialDesign3.NavigationBarListBox}">
    <ListBox.ItemContainerStyle>
      <Style
        TargetType="ListBoxItem"
        BasedOn="{StaticResource MaterialDesign3.NavigationBarListBoxItem}">
        <Setter
          Property="materialDesign:NavigationBarAssist.IsTextVisible"
          Value="True" />
        <Setter
          Property="materialDesign:NavigationBarAssist.SelectedIcon"
          Value="{Binding SelectedIcon}" />
        <Setter
          Property="materialDesign:NavigationBarAssist.UnselectedIcon"
          Value="{Binding UnselectedIcon}" />
      </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.Resources>
      <DataTemplate DataType="{x:Type domain:SampleItem}">
        <TextBlock Text="{Binding Title}" />
      </DataTemplate>
    </ListBox.Resources>
  </ListBox>
</Grid>

Maybe this sample is for design purposes but I didn't find another example with mvvm to navigate.

Where is the usual command binding expected to go in this case? I’m used to working with buttons and binding commands to them. Should I create a RelayCommand inside the SampleItem class and then add a Button inside the ItemTemplate to bind the command?

If I do this, would it break the design? Since the NavigationBar style already seems to act like a button in the UI, even though I don’t see any clear command-related code. I’m not new to WPF, but I’m still getting used to using third-party UI libraries. Maybe this control isn’t fully documented yet, or maybe I’m missing something?

Thanks a lot for your help!

[corvinsz]

"Navigation" in WPF can implemented in many different ways.

In the MD3 demo Navigation is not implemented on a Button click/RelayCommand.
For each view/page a DemoItem is created, and each DemoItem consists of multiple different properties, e.g.:

• Name
• Icon
• Content (An instance of a UserControl)

etc..

The MainWindowViewModel holds a List/ObservableCollection of those DemoItems. This List is displayed (via the ListBox) on the left, as you already mentioned. On the right side is a ContentControl which is bound to the Content of the SelectedItem of the ListBox.
So essentially the "only" thing that is happening is, that the Content of the said ContentControl is switched, whenever the SelectedItem of the ListBox changes.

MaterialDesignInXamlToolkit/src/MaterialDesign3.Demo.Wpf/MainWindow.xaml

Line 334 in e3c1240

<ContentControl Margin="{Binding MarginRequirement, FallbackValue=16}"

Here is the ContentPresenter with a Fuchsia colored Border and alot of margin around it, if that helps visualizing:

As an alternative to the above, I have seen people implement Navigation via the Frame class. I think the latter one gives a more browser-like navigation experience.