UWP NavigationView Selected Item as CommandParameter in MVVM Community Toolkit

DotNET Fan 191

UWP/XAML experts , How to set the selecteditem tag value as the CommandParameter in NavigationView SelectionChanged? Using community MVVM toolkit here. In example below the tag value is 3456 and would change dynamically .

CommandParameter="{Binding ????????}"

<muxc:NavigationView x:Name="DocumentNavView" Grid.Row="3" Grid.Column="0"
                  PaneDisplayMode="Left" 
                  IsTabStop="False" IsSettingsVisible="False" OpenPaneLength="200" Margin="10" 
                 IsBackButtonVisible="Collapsed" >
     <interactivity:Interaction.Behaviors>
         <core:EventTriggerBehavior EventName="SelectionChanged">
             <core:InvokeCommandAction Command="{x:Bind ViewModel.DocumentChanged}" CommandParameter="{Binding }" />
           
         </core:EventTriggerBehavior>
     </interactivity:Interaction.Behaviors>
    
    
         <muxc:NavigationViewItem   ToolTipService.ToolTip="Document1" Tag="3456">
             <muxc:NavigationViewItem.Content>
                 <StackPanel Orientation="Horizontal" >
                     <Image Source="ms-appx:///Assets/Doc.png" Width="20" Height="20" Margin="0 0 8 0" />
                     <TextBlock Text="Document1" Margin="8 0 0 0"></TextBlock>
                 </StackPanel>
             </muxc:NavigationViewItem.Content>
         </muxc:NavigationViewItem>
        
     </muxc:NavigationView.MenuItems>
     <Frame x:Name="rootFrame" >
     <Frame.ContentTransitions>
         <TransitionCollection>
             <NavigationThemeTransition/>
         </TransitionCollection>
     </Frame.ContentTransitions>
     </Frame>
 </muxc:NavigationView>

1 answer

Junjie Zhu - MSFT 16,391 Reputation points Microsoft Vendor

2024-06-25T07:48:38.17+00:00
Hi @DotNET Fan ,

Welcome to Microsoft Q&A!

It is recommended to bind the NavigationView, then you can get the item in ViewModel.

<core:InvokeCommandAction Command="{x:Bind ViewModel.DocumentChanged}" CommandParameter="{Binding ElementName=DocumentNavView}" />

public class TestViewModel { public ICommand DocumentChanged { get { return new CommadEventHandler<object>((s) => this.getContent(s)); } } private void getContent(object obj) { try { Microsoft.UI.Xaml.Controls.NavigationView navigationView = (Microsoft.UI.Xaml.Controls.NavigationView)obj; Microsoft.UI.Xaml.Controls.NavigationViewItem item = navigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem; Debug.WriteLine(item.Tag); } catch (Exception ex) { Debug.WriteLine(ex.Message); } } }

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
DotNET Fan 191 Reputation points

2024-06-25T07:54:23.1466667+00:00

@Junjie Zhu - MSFT , I would like to follow the MVVM approach where the view objects are not used in the viewmodel .

Something like this, is it available?

CommandParameter="{Binding Path=SelectedItem.Tag.ToString() ElementName=DocumentNavView}

Roy Li - MSFT 32,721 Reputation points Microsoft Vendor

2024-06-26T06:55:09.99+00:00

@DotNET Fan I have to say that it is unavailable. You should be able to get the same result if you have tired your code. There is no such xaml syntax like SelectedItem.Tag.ToString() that you could use for path. You need to pass a property of the DocumentNavView or DocumentNavView itself as the parameter. The reason for passing the DocumentNavView as parameter not the DocumentNavView.SelectedItem is that at the moment when the SelectionChanged is triggered, the DocumentNavView.SelectedItem is not changed yet. The parameter passed is the previous selected item not the current selected item.
Sign in to comment

Share via

UWP NavigationView Selected Item as CommandParameter in MVVM Community Toolkit

1 answer