CODEWITHSUNDEEP
c#wpfxamlmvvmtreeview
lkjasd2
lkjasd2

Reputation: 84

How to bind ObservableCollections to a TreeView and display the corresponding views?

I would like to build a TreeView from two user controls, which are to be built up hierarchically (item beneath header). This should be done by binding two nested ObservableCollection. Since all controls are already defined in the subordinate views themselves, they should not be defined in the superordinate view.

As I understand it, it should be enough to set the itemsource of the treeview and then define the HierarchicalDataTemplate and the "underlying" DataTemplate.

Unfortunately, however, the assignment of view and viewmodel is not applied with the following setting:

App.xaml:

<DataTemplate DataType="{x:Type Models:EvaluationHeaderViewModel}">
    <Views:EvaluationHeaderView/>
</DataTemplate>
<DataTemplate DataType="{x:Type Models:EvaluationItemViewModel}">
    <Views:EvaluationItemView/>
</DataTemplate>

The TreeView:

<TreeView 
    MaxHeight="500"
    Name="EvaluationTreeView"
    ScrollViewer.CanContentScroll="True" 
    ScrollViewer.VerticalScrollBarVisibility="Auto" 
    ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
    Grid.Row="4" 
    Grid.Column="1"
    ItemsSource="{Binding EvaluationHeaderViewModels, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True}"
    >
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type Models:EvaluationHeaderViewModel}" ItemsSource="{Binding EvaluationItemViewModels}"/>
        <DataTemplate DataType="{x:Type Models:EvaluationItemViewModel}"/>
    </TreeView.Resources>
</TreeView>

The Lists:

private ObservableCollection<EvaluationHeaderViewModel> evaluationHeaderViewModels;
public ObservableCollection<EvaluationHeaderViewModel> EvaluationHeaderViewModels {
    get => evaluationHeaderViewModels;
    set
    {
        evaluationHeaderViewModels = value;
        OnPropertyChanged();
    }
}

public ObservableCollection<EvaluationItemViewModel> EvaluationItemViewModels { get; set; }

public EvaluationHeaderViewModel()
{
    EvaluationItemViewModels = new ObservableCollection<EvaluationItemViewModel>();
    EvaluationItemViewModels.Add(new EvaluationItemViewModel());
}

How can I bind the ObservableCollections to the TreeView so that the UserControls are displayed?

Upvotes: 1

Views: 108

Answers (1)

mm8
mm8

Reputation: 169350

You seem to define the templates twice. Either remove the <TreeView.Resources> element or define the actual templates to be used there instead of in App.xaml:

<TreeView ItemsSource="{Binding EvaluationHeaderViewModels}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type Models:EvaluationHeaderViewModel}"
                                  ItemsSource="{Binding EvaluationItemViewModels}">
            <Views:EvaluationHeaderView/>
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type Models:EvaluationItemViewModel}">
            <Views:EvaluationItemView/>
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

Upvotes: 1

Related Questions