Question

I’m currently working on a WPF application, it’s my first so I’m learning as I go.
The basics are fine but I’ve hit a problem with what I’m trying to do at the moment. There seem to be tons of ways that might work but I’m pretty sure that I’m going down the path of making it harder than it needs to be.

What I need is some guidance on the simplest way to implement a piece of UI.

I’m using c# 4, wpf and the MVVM pattern.

The data I’m wanting to display looks like this:

obj1 —-< obj2 —-< obj3
i.e. a single obj1 has many obj2’s which has many (specifically 1-3) obj3’s

On my screen, I want to see a list/datagrid type view of the obj2 elements with the associated obj3 elements nested underneath.

The obj2 elements need to show a few text values and a check box (that will fire the appropriate command in the view model when toggled).
The obj3 elements need to show an image, possibly some text and be clickable (again, firing the appropriate command to the view model).

At first I looked at creating a custom control for the obj3 element, a custom control based on ItemsControl for a list of obj3 elements, another custom control for the obj2 element and finally another custom control to display a list of obj2 elements.

However, a little way in, I’ve got the feeling that I’ve massively over-complicated it.
Can I just use user controls? Do I even need them at all or can I just use the regular List control with a template?

Some pointers would be very welcome.
Thanks.

Answer 1

I spent quite some time getting this working as I wanted so thought I’d share…

The answer turned out to be a nested list control with data templates and associated view models for the items in each list. The list control is so much more flexible in WPF than Winforms that you can do pretty much anything with it.

I’ve found many different things that have helped on many different sites but the core details came from Dr.WPF: http://drwpf.com/blog/category/collections/

I won’t post all the code as it’s rather long. The core of it though is to first setup the list view in the user control:

<ListView Name="list" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    HorizontalContentAlignment="Stretch" Focusable="False"
    IsSynchronizedWithCurrentItem="True" ItemsPanel="{StaticResource VerticalItemsPanel}" 
    ItemContainerStyle="{StaticResource Obj2ContainerStyle}" ItemsSource="{Binding Obj2List}">
</ListView>

The keys things here are the ItemsPanel and ItemContainerStyle. These define the properties of the panel that contains all list items and the style for each list item respectively.
They are contained in the resources for the user control.

<ItemsPanelTemplate x:Key="VerticalItemsPanel">
    <StackPanel Orientation="Vertical" Focusable="False" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
<Style x:Key="Obj2ContainerStyle" TargetType="{x:Type ListViewItem}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Enabled}" Value="False">
            <Setter Property="Background" Value="LightSalmon"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=Enabled}" Value="True">
            <Setter Property="Background" Value="PaleGreen"></Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

I also have the data templates. The first tells the system to use the second for displaying objects of type Obj2ViewModel

<DataTemplate DataType="{x:Type src:Obj2ViewModel}">
    <ContentControl x:Name="Obj2Host" Focusable="False" Content="{Binding}"
                        ContentTemplate="{StaticResource Obj2ViewTemplate}" />
</DataTemplate>

<DataTemplate x:Key="Obj2ViewTemplate">
    <DataTemplate.Resources>
        <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
        <Style x:Key="Obj3ContainerStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid>
                            <Rectangle StrokeThickness="1" Stroke="#FF000000" Margin="0" />
                            <ContentPresenter x:Name="ContentHost" Margin="{TemplateBinding Padding}" 
                                                              HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
    <Style x:Key="LabelStyle" TargetType="{x:Type Label}">
        <Setter Property="Padding" Value="0,0,4,0" />
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
    <Style x:Key="DataStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="Padding" Value="0,0,4,0" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
     </DataTemplate.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" Content="{StaticResource Label1Text}" Style="{StaticResource LabelStyle}"/>
        <Label Grid.Row="1" Grid.Column="0" Content="{StaticResource Label2Text}" Style="{StaticResource LabelStyle}"/>
        <Label Grid.Row="2" Grid.Column="0" Content="{StaticResource Label3Text}" Style="{StaticResource LabelStyle}"/>
        <Label Grid.Row="3" Grid.Column="0" Content="{StaticResource Label4Text}" Style="{StaticResource LabelStyle}"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Property1}" Style="{StaticResource DataStyle}"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Property2}" Style="{StaticResource DataStyle}"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Property3}" Style="{StaticResource DataStyle}"/>
        <TextBlock Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Property4}" Style="{StaticResource DataStyle}"/>
        <ListView Grid.Row="0" Grid.RowSpan="3" Grid.Column="2" Name="Obj3List" 
                    HorizontalAlignment="Right" VerticalAlignment="Center"
                    IsSynchronizedWithCurrentItem="True"
                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
                    ItemsSource="{Binding Obj3s}" 
                    ItemContainerStyle="{StaticResource Obj3ContainerStyle}"
                    BorderThickness="0"
                    Background="Transparent">
        </ListView>
        <CheckBox Grid.Row="0" Grid.RowSpan="4" Grid.Column="3" VerticalAlignment="Center" 
                    IsChecked="{Binding Property5}" IsEnabled="{Binding NotExpired}" >
        </CheckBox>
        <Image Grid.Row="0" Grid.RowSpan="4" Grid.Column="4" Source="{StaticResource DeleteIcon}" Stretch="None">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseUp">
                    <cmd:EventToCommand PassEventArgsToCommand="False" Command="{Binding DeleteObj2Command, Mode=OneWay}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>
    </Grid>
</DataTemplate>

The second data template above contains another list view. This one containing Obj3 items.
The style for these is specified within the DataTemplate’s resources section.
Finally, the User control’s resources also contains the data templates for the Obj3 elements:

<DataTemplate DataType="{x:Type src:Obj3ViewModel}">
    <ContentControl x:Name="Obj3Host" Focusable="False" Content="{Binding}" 
        ContentTemplate="{StaticResource Obj3ViewTemplate}" />
</DataTemplate>
<DataTemplate x:Key="Obj3ViewTemplate">
    <Image Source="{Binding Image}" Stretch="None">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseUp">
                <cmd:EventToCommand PassEventArgsToCommand="False" Command="{Binding ToggleEnabledCommand, Mode=OneWay}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Image>
</DataTemplate>

Note that the EventToCommand stuff is thanks to the MVVM Light toolkit. It’s not a standard .NET thing.