WPF: Expand/Collapse items in ListView

Question

I have got the following ListView:

At click on the red button from the parent row I want to show the subordinated rows. With a second click the rows should be hidden again.

I'm new at WPF and have no idea 1. how to get a row expandable/collapsable and 2. how to create a relationship between parent and children rows.

My XAML is the following:

<ListView Name="lvUpgrade">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="20px">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Path=Icon}" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Width="75px" DisplayMemberBinding="{Binding Path=Time, StringFormat={}{0:HH:mm:ss}}" />
            <GridViewColumn Width="300px" Header="Nachricht" DisplayMemberBinding="{Binding Path=Message}" />
        </GridView>
    </ListView.View>
</ListView>

The code behind:

Public Class Upgrade

    Public Sub AddMessage(ByVal message As Message)
        Me.lvUpgrade.Items.Add(message)
    End Sub

    Public Class Message

        Public Enum MessageType

            Normal
            Information
            Success
            Warning
            [Error]
        End Enum

        Public Sub New(ByVal type As MessageType, ByVal message As String)
            _Type = type
            _Message = message
        End Sub

        Private _Type As MessageType = MessageType.Normal
        Public ReadOnly Property Type As MessageType
            Get
                Return _Type
            End Get
        End Property

        Private _Message As String = String.Empty
        Public ReadOnly Property Message As String
            Get
                Return _Message
            End Get
        End Property

        Private _Time As DateTime = Now
        Public ReadOnly Property Time As DateTime
            Get
                Return _Time
            End Get
        End Property

        Public ReadOnly Property Icon As BitmapImage
            Get
                Select Case Me.Type
                    Case MessageType.Information
                        Return My.Resources.Information16.ToBitmapImage
                    Case MessageType.Success
                        Return My.Resources.OK16.ToBitmapImage
                    Case MessageType.Warning
                        Return My.Resources.Alert16.ToBitmapImage
                    Case MessageType.Error
                        Return My.Resources.Error16.ToBitmapImage
                    Case Else
                End Select

                Return Nothing
            End Get
        End Property
    End Class
End Class

Solution 1

you should use Expander Control

go over Customizing WPF Expander with ControlTemplate

Solution 2

You need the TreeView control.

First link available on google for "wpf treeview tutorial": http://www.howdoicode.net/2011/10/wpf-treeview-example-part-4.html