实现效果:
当选中复选框时, ItemsControl 的内容将按 Type 特性进行分组。

clipboard.png
实践:

  1. GroupStyle、ItemContainerStyle使用
  2. CollectionView、CollectionViewSource使用
  3. PropertyGroupDescription使用

代码:
xaml:

  1. 数据模板内的资源设置TextBlock字体,排列方向
  2. 模板内各text绑定xml数据
  3. ItemContainerStyle子项容器样式设置
  4. GroupStyle组样式设置及分组头目标设置
<ItemsControl Margin="10" Name="myItemsControl"
          ItemsSource="{Binding Source={StaticResource MyTasks}}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DataTemplate.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontSize" Value="18"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                </Style>
            </DataTemplate.Resources>
            <Grid>
                <Ellipse Fill="Silver"/>
                <StackPanel>
                    <TextBlock Margin="3,8,3,0"
                 Text="{Binding XPath=@Name}"/>
                    <TextBlock Margin="3,0,3,7"
                 Text="{Binding XPath=@Priority}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Control.Width" Value="100"/>
            <Setter Property="Control.Margin" Value="5"/>
            <!--<Setter Property="Control.Height" Value="100"/>-->
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock FontWeight="Bold" FontSize="15"
                 Text="{Binding Path=Name}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ItemsControl.GroupStyle>
</ItemsControl>

ps:每组的类型均为 CollectionViewGroup。 指定了 GroupStyle HeaderTemplate,以便它显示为一个 TextBlock,其中显示了每个组HeaderTemplate的 Name。 在本例中, Text="{Binding Path=Name}"中的Name 为实际表现为 Work 或 Home,而非xml的XPath=@Name。

以下后台按分组样式显示:

  1. 获取绑定源的默认视图,转换为集合视图
  2. 实例一个属性分组描述PropertyGroupDescription
  3. 添加进入集合视图的属性分组描述集合中-myView.GroupDescriptions.Add(groupDescription)
private void AddGrouping(object sender, RoutedEventArgs e)
{
    _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
    if (_myView.CanGroup)
    {
        var groupDescription
            = new PropertyGroupDescription("@Type");
        _myView.GroupDescriptions.Add(groupDescription);
    }
}

取消分组显示

  1. 集合视图的_myView.GroupDescriptions.Clear()
private void RemoveGrouping(object sender, RoutedEventArgs e)
{
    _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
    _myView.GroupDescriptions.Clear();
}

扩展:

  1. 不应在代码中创建CollectionViewSource此类的对象。若要为只实现 IEnumerable 的集合创建集合视图,请创建 CollectionViewSource 对象,将集合添加到 Source 属性,然后从 View 属性获取集合视图。
  2. 可以将集合视图视为位于绑定源集合之上的一个层,您可以通过它使用排序、筛选和分组查询来导航和显示集合,所有这些操作都无需操作基础源集合本身。
  3. 需要CollectionViewSource.GetDefaultView来获取默认视图,CollectionView无此方法
  4. PropertyGroupDescription 允许您根据 PropertyName 创建隐式组。 如果您只想按属性进行分组,可以设置 PropertyName 属性。 如果您要更改最终用于组的值,可以使用 Converter 属性提供值转换器。
  5. 例如,您可能要根据名称的第一个字母对项进行分组。 如果 PropertyName 属性尚未设置,则项本身会传递到值转换器。 转换器可能返回集合,即指示项可能出现在多个组中。您也可以使用 StringComparison 属性定义如何进行字符串比较。

ps:

  1. 根据 CollectionView 的内部类是仅实现 IEnumerable的集合的默认值视图。 ListCollectionView 是实现 IList 的集合的默认视图。 BindingListCollectionView 是实现 IBindingListView 或 IBindingList 的集合的默认视图。
  2. 若要在 XAML 中设置视图,请使用 CollectionViewSource 类。 CollectionViewSource 是 CollectionView 类的 XAML 表示形式,而且它公开了最常用的 CollectionView 类的成员。

李志玮
22 声望34 粉丝

求索~~


引用和评论

0 条评论