在 WPF/Silverlight 中是否可以绑定到类似 HTML 的 TableControl？

Question

鉴于以下类别和子类别：

1. 动画（全家福、Calvin & Hobes、The Boondocks、Duck Tales、Looney Toons、Pink & The Brain）
2. 芝麻街（Oscar、Ernie & Bert、Kermit de Frog、Elmo、Cookie Monster、Grover）

我正在寻找一种将其（动态）呈现为行和列的方法，如下所示：

-------------------------------------------------- -- |动画 | -------------------------------------------------- -- |居家男人 |卡尔文和霍布斯 |贫民窟 | -------------------------------------------------- -- |鸭子故事 |鲁尼卡通 |小指与大脑 | -------------------------------------------------- -- |芝麻街 | -------------------------------------------------- -- |奥斯卡 |厄尼和伯特 |克米特蛙 | -------------------------------------------------- -- |埃尔莫 |饼干怪兽 |格罗弗 | -------------------------------------------------- --

P/S：我知道列表控件（ItemsControl、DataGrid、ListView 等），但似乎没有一个符合这个标准。

Answer 1

您需要做的是创建一个查询，该查询以某种方式按类别对您的项目进行分组（您已经拥有它，或者您可以使用 linq 通过 Group By ... Into 查询创建您的层次结构）。

然后您可以使用绑定到查询结果的 ItemsControl，使用包含标题的 ItemTemplate 和另一个 ItemsControl（其 ItemsPanelTemplate 设置为 WrapPanel 或 UniformGrid）显示数据。

假设您设法在以下类中获取数据（抱歉，这里是 VB，但如果您需要，C# 不会太远）：

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>

这是一个非常粗糙的模板，您必须修改边框才能获得所需的内容，但这样就可以了。