通过 itemsource 模型的属性对 ItemsControl 进行分组答案

【问题标题】：Group an ItemsControlby a property of itemsource model通过 itemsource 模型的属性对 ItemsControl 进行分组
【发布时间】：2018-11-14 09:23:55
【问题描述】：

有了这个类：

Public Class PageBetModel
Private _name As String

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

Private _group As String

Public Property Group As String
    Get
        Return _group
    End Get
    Set(ByVal value As String)
        _group = value
    End Set
End Property
End Class

我想创建一个带有ItemsControl 的样式，绘制Name 属性，并按Group 属性分组。

<ItemsControl ItemsSource="{Binding Path=Model}" ItemsPanel="{DynamicResource MyPanel}" ItemTemplate="{DynamicResource MyTemplate}"/>

<DataTemplate x:Key="MyTemplate">
    <Border MinHeight="100" BorderThickness="0,0,0,2" BorderBrush="#dfe1e0">

            <TextBlock x:Name="RadioButtonText" Margin="16,40,16,16" Width="287" Text="{Binding Path=Name}" FontFamily="Arial" FontSize="17" Foreground="#474747" FontWeight="SemiBold" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>

    </Border>
</DataTemplate>

我想展示这个简单的设计，但通过Group 属性将不同的名称与Expander 分组。

【问题讨论】：

标签： wpf vb.net datatemplate itemscontrol

【解决方案1】：

将ItemsSource 设置为分组的CollectionViewSource：

<CollectionViewSource x:Key="cvs" Source="{Binding Path=Model}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Group" />
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

...并定义一个包含Expander 的GroupStyle：

<ItemsControl ItemsPanel="{DynamicResource MyPanel}"
            ItemsSource="{Binding Source={StaticResource cvs}}"
            ItemTemplate="{DynamicResource MyTemplate}">
    <ItemsControl.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Expander IsExpanded="True">
                                    <Expander.Header>
                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
                                    </Expander.Header>
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ItemsControl.GroupStyle>
</ItemsControl>

【讨论】：