Delete a subitem in a tree view with heirarchical data template

Question

Please find below my XAML,

<loc:MultiSelectTreeView Height="295" ScrollViewer.VerticalScrollBarVisibility="Visible" BorderThickness="1" Background="WhiteSmoke" x:Name="GridListEmulation" Grid.Row="2"   BorderBrush="Gray" ItemsSource="{Binding EmulationCollection,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" Margin="0,2,0,-2"  
                                        ItemContainerStyle="{StaticResource MultiSelectTreeViewItemStyle}" SelectedItemChanged="GridListEmulation_SelectedItemChanged">
                        <TreeView.ItemTemplate >
                            <HierarchicalDataTemplate  ItemsSource="{Binding Items,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"  >
                                <Grid  >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition SharedSizeGroup="Stream" Width="60"/>
                                        <ColumnDefinition SharedSizeGroup="Port" Width="55"/>
                                        <ColumnDefinition SharedSizeGroup="Device Name" Width="100"/>
                                        <ColumnDefinition SharedSizeGroup="Count" Width="50"/>
                                        <ColumnDefinition SharedSizeGroup="FromMAC" Width="120"/>

                                        <ColumnDefinition SharedSizeGroup="State" Width="60"/>
                                        <ColumnDefinition SharedSizeGroup="MACAddress" Width="120"/>
                                        <ColumnDefinition SharedSizeGroup="EmulationIPv4Address" Width="100"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Text="{Binding StreamId}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Port}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="2" Text="{Binding EmulationDeviceName}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="3" Text="{Binding SessionCount}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="4" Text="{Binding SourceMAC}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="5" Text="{Binding State}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="6" Text="{Binding SimulatedMAC}" Style="{StaticResource TextBlockStyle}"/>
                                    <TextBlock Grid.Column="7" Text="{Binding EmulationIPv4Address}" Style="{StaticResource TextBlockStyle}"/>
                                </Grid>
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>
                    </loc:MultiSelectTreeView>

I am trying to delete a subitem in this multi treeview which is bound to my observable collection as shown below,

tvm.EmulationCollection.RemoveAt(GridListEmulation.Items.IndexOf(subItem));

But i always get the index as -1 for subitem and then gives an exception. Please let me know if any way to get the subitem in the tree view item of the heirarchical data template and delete it? Thanks in advance.

Answer 1

here is a basic example of using a VM to host a tree

public class TreeVM : BindableBase
{
    public TreeVM()
    {
        AddChild = new DelegateCommand(() => Items.Add(new TreeVM() {Parent = this }));
        RemoveMe = new DelegateCommand(() => Parent.Items.Remove(this));
    }
    private string _Text;

    public string Text
    {
        get { return _Text; }
        set { SetProperty(ref _Text, value); }
    }

    private TreeVM _Parent;

    public TreeVM Parent
    {
        get { return _Parent; }
        set { SetProperty(ref _Parent, value); }
    }

    public ObservableCollection<TreeVM> Items { get; } = new ObservableCollection<TreeVM>();

    public DelegateCommand AddChild { get; set; }
    public DelegateCommand RemoveMe { get; set; }

}

then hosted on this XAML

<StackPanel>
    <Button Content="Add" Command="{Binding AddChild}"/>
    <TreeView ItemsSource="{Binding Items}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Items}">
                <StackPanel Orientation="Horizontal">
                    <TextBox Text="{Binding Text}"/>
                    <Button Content="Add" Command="{Binding AddChild}"/>
                    <Button Content="Delete" Command="{Binding RemoveMe}"/>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</StackPanel>

as you can see the child is responsible for removing itself from the tree, and this works because your VM knows its parent as well as its children