In WPF/Silverlight is it possible to bind to an HTML-like TableControl?

Answer 1

What you will need to do is create a query that somehow groups your items by categories (either you already have that or you can use linq to create your hierarchy through a Group By ... Into query).

Then you can use an ItemsControl that binds to the query result, displaying the data with an ItemTemplate containing a header and another ItemsControl which has an ItemsPanelTemplate set to a WrapPanel or a UniformGrid.

Assuming you manage to get your data in the following classes (sorry, VB here but C# would not be far from that if you need it):

Public Class Category

    Private _Name As String
    Public Property CategoryName() As String
        Get
            Return _Name
        End Get
        Set(ByVal value As String)
            _Name = value
        End Set
    End Property

    Private _SubCategories As New List(Of SubCategory)
    Public Property SubCategories() As List(Of SubCategory)
        Get
            Return _SubCategories
        End Get
        Set(ByVal value As List(Of SubCategory))
            _SubCategories = value
        End Set
    End Property

End Class

Public Class SubCategory

    Private _Name As String
    Public Property SubCategoryName() As String
        Get
            Return _Name
        End Get
        Set(ByVal value As String)
            _Name = value
        End Set
    End Property

End Class



<ItemsControl ItemsSource="{Binding QueryResult}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1"
                        BorderBrush="Black">

                    <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />                            
                    </Grid.RowDefinitions>
                        <Border BorderThickness="1"
                                BorderBrush="Black">
                            <TextBlock Margin="2"
                                       Text="{Binding CategoryName}" />
                        </Border>
                            <ItemsControl Grid.Row="1"
                                          ItemsSource="{Binding SubCategories}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Border BorderThickness="1"
                                                BorderBrush="Black">

                                            <TextBlock Margin="2"
                                                       Text="{Binding SubCategoryName}" />
                                        </Border>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <UniformGrid Columns="3" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

This is a very rough template, you'll have to tinker with the borders to get what you need, but that would do the trick.