WPF: Expand/Collapse items in ListView

Question

I have got the following ListView:

ListView without hierarchy

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

makc · Answer 1 · 2013-05-15T08:06:00.083

5

you should use Expander Control

go over Customizing WPF Expander with ControlTemplate

edited May 15 '13 at 08:06

answered Apr 15 '13 at 13:36

makc

2,569
1
18
28

score 1 · Answer 2 · answered Apr 15 '13 at 12:56

1

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

answered Apr 15 '13 at 12:56

Felix C

1,755
5
26
40

2

Is there no other possibility as a TreeView? It seems that there is only one description per node possible. But I want to show multiple infos per item. In the tutorials behind the link I can't find a similar case to my needs. – mburm Apr 15 '13 at 13:08
`ListView` is a view for displaying a collection of standalone information. There is no way to create hierarchical architecture. For that we have `TreeView` in WPF. What you can do: Create an `ItemTemplate` for displaying the "standalone information" in special ways. Example: http://stackoverflow.com/questions/2456643/wpf-very-basic-listbox-itemtemplate-question – Felix C Apr 15 '13 at 13:15

WPF: Expand/Collapse items in ListView

2 Answers2