Question

I try to make a view that will display a treeview on one side (master), and for the selected node, some information on the left (detail), using the MVVM pattern.

The treeview is bound on a collection of a ViewModel that is, in fact, an abstract class. I have two classes that inherits from my abstract ViewModel, one representing a category, the other one a requirement.

In the tree, the categories may have childs that are either categories or requirements.

The requirements cannot have childs, they are just leaves.

i.e.:

• category 1
  • requirement 1
  • sub-category 1
• category 2
  • sub-category 2
• category 3

I managed to display some data from the abstract class in my detail view. My problem is that I have to display different data if a category or a requirement is selected… I have no clue how to do this.

Is there a control that will allow me to display data based on the type of the selected node from my tree?

My XAML looks like this for now:

<Grid DataContext="{Binding Requirements}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="350" />
        <ColumnDefinition Width="400*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>

    <TreeView 
        x:Name="treeRequirements"
        Grid.Column="0" Grid.Row="0" 
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
        ItemsSource="{Binding}">
        <TreeView.ItemContainerStyle>
            <!-- This Style binds a TreeViewItem to a PersonViewModel. -->
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                <Setter Property="FontWeight" Value="Normal" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>

        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

    <Grid 
        Grid.Column="1" Grid.Row="0"
        DataContext="{Binding ElementName=treeRequirements, Path=SelectedItem}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <!-- Name comes from the abstract class, so no problem -->
        <TextBlock 
            Grid.Row="0" Grid.Column="0">
            Name
        </TextBlock>
        <TextBox
            Grid.Row="0" Grid.Column="1" 
            Text="{Binding Path=Name, Mode=TwoWay}" />


    </Grid>
</Grid>

My problem is, I have no idea how to display different details based on the type of the viewmodel represented by the selected node. I am only able to display properties of the abstract class.

Any help?

EDIT

To sum up my question, the whole master-detail and treeview are pretty irrelevant to the problem, there are just to put in context. My problem is really just to display different fields based on the subtype of my viewmodel, which may vary.

Answer 1

I was curious about your question, so I did some looking around myself. It looks like you might want to use a DataTemplateSelector. There’s a nice example shown here.