Question

I currently have a treeview that displays data using a hierarchicaldatatemplate and when the user clicks on the Remove button, it removes the selected node(s). This works as intended.

However, Instead of having the user click a button I’m trying to have the command be executed by right clicking a node and selecting the appropriate menu item.

This is proving to be much more difficult because it is being picked up by the ViewModel of a node (which doesn’t know anything about the View) instead of the View’s corresponding ViewModel.

Is there someway to hand the control over to the ViewModel of the View instead?

Here is the code for the Remove Button:

View:

        <Button Content="Remove" Grid.Row="2" Height="23" VerticalAlignment="Top" Name="removeButton" 
                Width="75"  Margin="5,20,5,0"  Command="{Binding Path=RemoveCommand}" />

ViewModel:

public RelayCommand RemoveCommand
        {
            get
            {
                if (_removeCommand == null)
                {
                    _removeCommand = new RelayCommand(
                        () => this.Remove()
                        );
                }
                return _removeCommand;
            }
        }

        public void Remove()
        {
            _organLocationTree2.RemoveOrganLocations(ProjectOrganLocationView.GetExtendedTreeView().SelectedItems);
            ProjectOrganLocationView.GetExtendedTreeView().SelectedItems.Clear();

            base.RaisePropertyChanged("DestOrganTree");
        }

And the XAML for the menu item:

            <local:ExtendedTreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding SubOrganLocations}">
                    <TextBlock Text="{Binding OrganName}" >
            <TextBlock.ContextMenu>
                <ContextMenu>
                    <MenuItem Header ="Add SubNode" Command="{Binding Path=MenuItem_Add}"></MenuItem>
                    <MenuItem Header ="Remove Node" Command="{Binding Path=RemoveCommand}"></MenuItem>
                    <MenuItem Header ="Edit Node" Command="{Binding Path=ProjMenuItem_Edit}"
                              CommandParameter="{Binding DestOrganTree, Path=Selected.OrganName}"></MenuItem>
                </ContextMenu>
            </TextBlock.ContextMenu>
                    </TextBlock>
                </HierarchicalDataTemplate>
            </local:ExtendedTreeView.ItemTemplate>
        </local:ExtendedTreeView>

I tried to implement a Remove command in the ViewModel of the node, but since it doesn’t know anything about the View it got very messy very quickly.

Answer 1

Well, I found my mistake, I was binding the context menu to the nodes of the tree instead of the tree itself. I moved the context menu outside of the declaration and it now works as intended.

Here’s my updated xaml for anyone else that has this issue:

 <local:ExtendedTreeView.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header ="Add SubNode" Command="{Binding Path=MenuItem_Add}"></MenuItem>
                            <MenuItem Header ="Remove Node" Command="{Binding Path=RemoveCommand}"></MenuItem>
                            <MenuItem Header ="Edit Node" Command="{Binding Path=ProjMenuItem_Edit}"
                                      CommandParameter="{Binding DestOrganTree, Path=Selected.OrganName}"></MenuItem>
                        </ContextMenu>                        
                    </local:ExtendedTreeView.ContextMenu>

                    <local:ExtendedTreeView.ItemTemplate>
                        <HierarchicalDataTemplate ItemsSource="{Binding SubOrganLocations}">
                            <TextBlock Text="{Binding OrganName}" >
                            </TextBlock>
                        </HierarchicalDataTemplate>
                    </local:ExtendedTreeView.ItemTemplate>