背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

[源码下载]

背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

作者:webabcd

介绍
背水一战 Windows 10 之 控件(集合类 - ItemsControl)

  • 项模板选择器
  • 数据分组

示例
1、ItemsControl 的项模板选择器
Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo3.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.ItemsControlDemo3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:common="using:Windows10.Common"> <Page.Resources>
<!--
DataTemplate - 数据模板
-->
<DataTemplate x:DataType="common:Employee" x:Key="DataTemplateMale">
<Grid Background="Blue">
<TextBlock Text="{x:Bind Name}" />
</Grid>
</DataTemplate>
<DataTemplate x:DataType="common:Employee" x:Key="DataTemplateFemale">
<Grid Background="Pink">
<TextBlock Text="{x:Bind Name}" />
</Grid>
</DataTemplate> <!--
自定义数据模板选择器(参见 code-behind 中的代码)
-->
<local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
DataTemplate1="{StaticResource DataTemplateMale}"
DataTemplate2="{StaticResource DataTemplateFemale}" />
</Page.Resources> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10" Orientation="Horizontal"> <!--
ItemsControl - 集合控件
ItemTemplateSelector - 每个数据项的数据模板选择器(如果指定了 ItemTemplate 则此配置无效)
-->
<ListView Name="itemsControl" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top"
ItemsSource="{x:Bind Employees}"
ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"> </ListView> </StackPanel>
</Grid>
</Page>

Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo3.xaml.cs

/*
* ItemsControl - 集合控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
*
*
* 本例用于演示 ItemsControl 如何通过 item 的不同而使用不同的数据模板
*/ using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows10.Common; namespace Windows10.Controls.CollectionControl.ItemsControlDemo
{
public sealed partial class ItemsControlDemo3 : Page
{
public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(); public ItemsControlDemo3()
{
this.InitializeComponent();
}
} // 自定义 DataTemplateSelector(数据模板选择器)
// 可以实现在 runtime 时,根据 item 的不同选择不同的数据模板
public class MyDataTemplateSelector : DataTemplateSelector
{
// 数据模板 1(配置在 xaml 端)
public DataTemplate DataTemplate1 { get; set; } // 数据模板 2(配置在 xaml 端)
public DataTemplate DataTemplate2 { get; set; } // 根据 item 的数据的不同,指定的不同的模板
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var employee = item as Employee;
if (employee == null || employee.IsMale)
return DataTemplate1; // 男员工用数据模板 1
return DataTemplate2; // 女员工用数据模板 2 // 如果想直接返回指定的资源也是可以的(但是不灵活),类似:return (DataTemplate)Application.Current.Resources["DataTemplateMale"];
}
}
}

2、ItemsControl 的数据分组
Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo4.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.ItemsControlDemo4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Page.Resources> <!--
GroupStyle - 组样式
HidesIfEmpty - 空组是否隐藏
HeaderContainerStyle - 组标题的容器样式
HeaderTemplate - 组标题的模板
HeaderTemplateSelector - 组标题的模板选择器 注:
ListView 的 Group 的 HeaderContainer 是 ListViewHeaderItem, GridView 的 Group 的 HeaderContainer 是 GridViewHeaderItem
ListViewHeaderItem 和 GridViewHeaderItem 均继承自 ListViewBaseHeaderItem, ListViewBaseHeaderItem 继承自 ContentControl
-->
<GroupStyle x:Key="GroupStyle1" HeaderTemplate="{StaticResource DataTemplateGroupHeader}">
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="Background" Value="Blue" />
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle>
<GroupStyle x:Key="GroupStyle2" HeaderTemplate="{StaticResource DataTemplateGroupHeader}">
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="Background" Value="Orange" />
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle> <DataTemplate x:Key="DataTemplateGroupHeader">
<TextBlock Text="{Binding Title}" />
</DataTemplate> <!--
自定义 GroupStyle 选择器(参见 code-behind 中的代码)
-->
<local:MyGroupStyleSelector x:Key="MyGroupStyleSelector"
GroupStyle1="{StaticResource GroupStyle1}"
GroupStyle2="{StaticResource GroupStyle2}" />
</Page.Resources> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <!--
ItemsControl - 集合控件
ItemsPanel - 用于指定 items 的布局控件,任何 Panel 类型的布局控件均可,所有 items 将在 Panel 内显示(Panel 是所有 items 的容器)
给 ItemsControl 用的,可虚拟化的布局控件有:ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, WrapGrid. 请参见:/Controls/CollectionControl/ItemsControlDemo/LayoutControl/
GroupStyle - 组样式
GroupStyleSelector - 组样式选择器
-->
<ListView Name="listView" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}"
GroupStyleSelector="{StaticResource MyGroupStyleSelector}" SelectionChanged="listView_SelectionChanged">
<!--
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
-->
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Foreground="Purple" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView> <TextBlock Name="lblMsg" Margin="5" /> </StackPanel>
</Grid>
</Page>

Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo4.xaml.cs

/*
* ItemsControl - 集合控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
* IsGrouping - 当前 ItemsControl 显示的是否是分组数据(只读)
* DependencyObject GroupHeaderContainerFromItemContainer(DependencyObject itemContainer) - 获取指定 ItemContainer 的 HeaderContainer
*
*
* 本例用于演示如何通过 ItemsControl 显示分组数据
*
* 注:本例是用 ListView 来演示数据分组的,用 GridView 做数据分组的示例请参见 /Index.xaml
*/ using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows10.Common; namespace Windows10.Controls.CollectionControl.ItemsControlDemo
{
public sealed partial class ItemsControlDemo4 : Page
{
public CollectionViewSource MyData
{
get
{
XElement root = XElement.Load("SiteMap.xml");
var items = LoadData(root); // 构造数据源
CollectionViewSource source = new CollectionViewSource();
source.IsSourceGrouped = true;
source.Source = items;
source.ItemsPath = new PropertyPath("Items"); return source;
}
} public ItemsControlDemo4()
{
this.InitializeComponent(); this.Loaded += ItemsControlDemo4_Loaded;
} private void ItemsControlDemo4_Loaded(object sender, RoutedEventArgs e)
{
lblMsg.Text = "IsGrouping: " + listView.IsGrouping.ToString();
} private async void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > && listView.ContainerFromItem(e.AddedItems[]) != null)
{
// 获取选中数据的 HeaderContainer
ListViewHeaderItem headerContainer = listView.GroupHeaderContainerFromItemContainer(listView.ContainerFromItem(e.AddedItems[])) as ListViewHeaderItem; NavigationModel headerNavigationModel = headerContainer.Content as NavigationModel;
await new MessageDialog($"header: {headerNavigationModel.Title}").ShowAsync();
}
} // 解析 xml 数据
private List<NavigationModel> LoadData(XElement root)
{
if (root == null)
return null; var items = from n in root.Elements("node")
select new NavigationModel
{
Title = (string)n.Attribute("title"),
Url = (string)n.Attribute("url"),
Items = LoadData(n)
}; return items.ToList();
}
} // 自定义 MyGroupStyleSelector(GroupStyle 选择器)
// 可以实现在 runtime 时,根据 group 的不同选择不同的 GroupStyle
public class MyGroupStyleSelector : GroupStyleSelector
{
static bool temp = false; // GroupStyle 1(配置在 xaml 端)
public GroupStyle GroupStyle1 { get; set; } // GroupStyle 2(配置在 xaml 端)
public GroupStyle GroupStyle2 { get; set; } protected override GroupStyle SelectGroupStyleCore(object group, uint level)
{
// 我这里测试,group 要么是 null 要么是 DependencyObject,level 总是 0 // 利用这个变量,来演示如何让不同的 group 使用不同的 GroupStyle
temp ^= true;
if (temp)
return GroupStyle1;
return GroupStyle2; // 如果想直接返回指定的资源也是可以的(但是不灵活),类似:return (GroupStyle)Application.Current.Resources["GroupStyle1"];
}
}
}

OK
[源码下载]

上一篇:C3p0 的一个异常


下一篇:MySQL:基础—数据分组