Data Binding a List in a Class

Here is a possible answer!

My Classes:

Imports System.Collections.ObjectModel

Public Class Person

    Dim mname As String
    Dim mkids As New ObservableCollection(Of Kid)

    Public Property PName() As String
        Get
            Return mname
        End Get
        Set(ByVal value As String)
            mname = value
        End Set
    End Property

    Public Property Kids() As ObservableCollection(Of Kid)
        Get
            Return mkids
        End Get
        Set(ByVal value As ObservableCollection(Of Kid))
            mkids = value
        End Set
    End Property

    Public Sub New(ByVal _nm As String, ByVal _kids As ObservableCollection(Of Kid))
        mname = _nm
        mkids = _kids
    End Sub

End Class

Public Class Kid

    Dim mkname As String

    Public Property KName() As String
        Get
            Return mkname
        End Get
        Set(ByVal value As String)
            mkname = value
        End Set
    End Property

    Public Sub New(ByVal _kname As String)
        mkname = _kname
    End Sub

End Class

The above class has a Constructor to load values as you will see down how i have used it.

My window_loaded event:

Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    Dim perList As New ObservableCollection(Of Person)

    Dim kidList1 As New ObservableCollection(Of Kid)
    kidList1.Add(New Kid("AAA"))
    kidList1.Add(New Kid("BBB"))
    perList.Add(New Person("Person 1", kidList1))

    Dim kidList2 As New ObservableCollection(Of Kid)
    kidList2.Add(New Kid("CCC"))
    kidList2.Add(New Kid("DDD"))
    perList.Add(New Person("Person 2", kidList2))

    ListBox1.ItemsSource = perList

End Sub

So i have created a collection of kids without creating objects for each kid.

Item template:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Expander Name="myExpander" ExpandDirection="Right">
            <Expander.Header>
                <TextBlock Text="{Binding Path=PName}"/>
            </Expander.Header>
            <Expander.Content>
                <TextBlock Text="{Binding Path=Kids, Converter={StaticResource MyConv}}"/>
            </Expander.Content>
        </Expander>
    </DataTemplate>
</ListBox.ItemTemplat

e>

I have created a Value Converter class to convert the collection of kids to string, so the textblock can get that string.

Converter Class:

Imports System.Collections.ObjectModel
Public Class MyValueConverter
    Implements IValueConverter

'Convert function which takes values from list and uses casting to get the Kid class object myKid and assign it to the string myKids.

    Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert

'The value contains the Collection of kids from the property defined in 
 the property of person class
        Dim myList As ObservableCollection(Of Kid) = value
        Dim myKids As String = String.Empty
        Dim myKid As Kid
        For i As Integer = 0 To myList.Count - 1
            myKid = TryCast(myList.Item(i), Kid) ' Get the Kid object
            myKids = myKids & myKid.KName & " "
        Next
        Return myKids
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Throw New NotImplementedException("Convert Back not implemented")
    End Function
End Class

So the above code returns a string by retrieving the kid's name in the collection.

The xaml should recognize this class so we have to provide a namespace of the current assembly:

xmlns:local="clr-namespace:ListBoxWithExpander"

and provide a key in window.resources to use the converter in textblock!:

<Window.Resources>
    <local:MyValueConverter x:Key="MyConv"/>
</Window.Resources

>
So the we will use the key as static resource and assign it in the textblock!!

That's it!! :-D PHEW!

And sorry that the code is in VB but i think there won't be any problem in converting.
U can use this to convert: http://www.developerfusion.com/tools/convert/vb-to-csharp/[^]

Now it should work fine! :thumbsup:

Hi there!
To completely solve your question, it would be great if you can show the class that you are using.

Here is how i did:

Person Class

Public Class Person

    Private myname As String
    Private myage As Integer

    Public Property Name() As String
        Get
            Return myname
        End Get
        Set(ByVal value As String)
            myname = value
        End Set
    End Property

    Public Property Age() As Integer
        Get
            Return myage
        End Get
        Set(ByVal value As Integer)
            myage = value
        End Set
    End Property

    Public Sub New(ByVal myn As String, ByVal mya As Integer)
        myname = myn
        myage = mya
    End Sub

End Class

Now in the window_loaded event,
write this:

Dim myoList As New ObservableCollection(Of Person)
myoList.Add(New Person("Tarun Kumar", 21))
myoList.Add(New Person("Bhupesh Kumar", 17))
ListBox2.ItemsSource = myoList

As a tip, use observablecollection instead of list because it is optimized for WPF.

Now you need to create a style together with a control template to give a new look to your listbox items:
Style for ListBoxItem

<Style x:Key="TryExp" TargetType="ListBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Expander Header="{Binding Path=Name}" Margin="3" ExpandDirection="Right" BorderThickness="1" BorderBrush="LightBlue">
                    <!--<ContentPresenter Content="{Binding Path=Age}"/>-->
                    <TextBlock Text="{Binding Path=Age}"/>
                </Expander>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and in the xaml for ListBox, add this:

<ListBox ItemContainerStyle="{DynamicResource TryExp}" Margin="0,0,61,46" Name="ListBox2" Height="105" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="151" >
</ListBox

>

now it should work smoothly! :)