Do i have to build a ControlTemplate? Or is there an alternative? - wpf

Question

I got a TreeView and want to display the Data nested (not hierarchically). The first level data is called TaskViewModel, the second level data is ArtifactViewModel. I want the ArtifactViewModel horizontal inside a GroupBox which represents TaskViewModel.
I tried different approaches, this is my last one:
<TreeView Name="tvTasks" ItemsSource="{Binding Tasks}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:TaskViewModel}">
<GroupBox Header="{Binding Name, UpdateSourceTrigger=PropertyChanged}">
<StackPanel Orientation="Vertical">
<ListView ItemsSource="{Binding Children}"/>
<TextBlock Text="{Binding Description, UpdateSourceTrigger=PropertyChanged}" TextWrapping="Wrap"/>
</StackPanel>
</GroupBox>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type vm:ArtifactViewModel}">
<Border Background="{Binding Type,Converter={StaticResource Type2Background}}"
Margin="5" BorderBrush="Black" BorderThickness="2" CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"
TextAlignment="Center" Background="Black" Foreground="White"
Opacity="0.75" Grid.Column="0" Grid.Row="1"/>
</Grid>
</Border>
</DataTemplate>
</TreeView.Resources>
</TreeView>
This looks pretty much like what i want, besides that ArtifactViewModels are shown vertical. And if i click on ArtifactViewModel the tvTasks.SelectedItem doesn't change, because the ListView handels this event. I know that this approach is not the cleverest, but it's just a try.
I looked at this article, but i don't see how to deal with the different objects i want to put in the TreeView. So ... how do i build such a UI?

Answer 1

The main issue you're running into here is that you're nesting multiple controls, each with their own selected items.
If you're planning on showing the data as nested but not hierarchically, don't bother using TreeView. If you want to have one item be selectable at any given point in time, use a ListBox instead.
Now the tricky part is playing around with how you want to lay the items out. Take a look at Bea Stollnitz's example here where she redraws a ListBox as a Canvas. You could do something similar where the ItemsPanelTemplate is a Canvas, and you calculate the x,y coordinates. Alternately, you could use a Grid, and determine the Grid.Row and Grid.Column values.