Windows 10 (51) and 51

Windows 10 (51) and 51

[Download source code]

Backwater world war I Windows 10 (51)-control (Collection class): ItemsControl-item template selector, Data grouping

Author: webabcd


Introduction
Controls for Windows 10 (Collection class-ItemsControl)

• Item template Selector
• Data Group

Example
1. ItemsControl's item template Selector
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-data template --> <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> <! -- Customize the data template selector (see code in 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-set control ItemTemplateSelector-Data Template selector for each data item (this configuration is invalid if ItemTemplate is specified) --> <ListView Name = "itemsControl" Margin = "5" Width = "400" Height = "400" HorizontalAlignment = "Left" verticalignment = "Top" ItemsSource = "{x: bind Employees} "ItemTemplateSelector =" {StaticResource MyDataTemplateSelector} "> </ListView> </StackPanel> </Grid> </Page>

Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo3.xaml. cs

/** ItemsControl-set Control (inherited from Control, see/Controls/BaseControl/ControlDemo /) * ** This example demonstrates how ItemsControl uses different data templates through different items */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 (100); public ItemsControlDemo3 () {this. initializeComponent () ;}}// custom ememplateselector (Data Template selector) // You can select different public class MyDataTemplateSelector templates based on different items during runtime: dataTemplateSelector {// data template 1 (configured on The xaml end) public DataTemplate DataTemplate1 {get; set ;}// data template 2 (configured on The xaml end) public DataTemplate DataTemplate2 {get; set ;}// the specified protected override DataTemplate SelectTemplateCore (object item, DependencyObject container) {var employee = item as Employee based on the data of items; if (employee = null | employee. isMale) return DataTemplate1; // a male employee uses the data template 1 return DataTemplate2; // data template for a female employee 2 // it is also possible to directly return the specified resource (but not flexible), for example: return (DataTemplate) Application. current. resources ["DataTemplateMale"] ;}}

2. Data Group of 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-group style HidesIfEmpty-empty group whether to hide HeaderContainerStyle-container style HeaderTemplate of group title-template of group title HeaderTemplateSelector-template selector of group title Note: the HeaderContainer of the ListView Group is ListViewHeaderItem. The HeaderContainer of the GridView Group is ListViewHeaderItem and the HeaderContainer are inherited from ListViewBaseHeaderItem, And the ListViewBaseHeaderItem is inherited from ContentControl --> <GroupStyle x: Key = RTemplate = "{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"> <Se Tter Property = "Background" Value = "Orange"/> </Style> </GroupStyle. headerContainerStyle> </GroupStyle> <DataTemplate x: Key = "DataTemplateGroupHeader"> <TextBlock Text = "{Binding Title}"/> </DataTemplate> <! -- Customize the GroupStyle selector (see code in code-behind) --> <local: MyGroupStyleSelector x: key = "MyGroupStyleSelector" GroupStyle1 = "{StaticResource GroupStyle1}" GroupStyle2 = "{StaticResource GroupStyle2}"/> </Page. resources> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <! -- ItemsControl-set control ItemsPanel-used to specify the layout control of items. Any layout control of any Panel type can be displayed in the Panel. All items will be displayed in the Panel (the Panel is the container of all items) for ItemsControl, the virtualized layout controls include ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, and WrapGrid. see: /Controls/CollectionControl/ItemsControlDemo/LayoutControl/GroupStyle-group style GroupStyleSelector-group style selector --> <ListView Name = "listView" Margin = "5" Width = "400" Height =" 400 "HorizontalAlignm Ent = "Left" ItemsSource = "{x: Bind MyData. View}" GroupStyleSelector = "{StaticResource MyGroupStyleSelector}" SelectionChanged = "listView_SelectionChanged"> <! -- <ListView. 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-set Control (inherited from Control, see/Controls/BaseControl/ControlDemo/) * IsGrouping-whether the current ItemsControl displays group data (read-only) * DependencyObject GroupHeaderContainerFromItemContainer (DependencyObject itemContainer)-obtains the HeaderContainer of the specified ItemContainer *** This example shows how to display group data through ItemsControl. ** note: in this example, ListView is used to demonstrate Data grouping. For an example of using GridView as a Data grouping, see/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 (roo T); // construct the data source 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:" + listV Iew. isGrouping. toString ();} private async void listView_SelectionChanged (object sender, SelectionChangedEventArgs e) {if (e. addedItems. count> 0 & listView. containerFromItem (e. addedItems [0])! = Null) {// obtain the selected data HeaderContainer ListViewHeaderItem headerContainer = listView. groupHeaderContainerFromItemContainer (listView. containerFromItem (e. addedItems [0]) as ListViewHeaderItem; NavigationModel headerNavigationModel = headerContainer. content as NavigationModel; await new MessageDialog ($ "header: {headerNavigationModel. title }"). showAsync () ;}}// Parse xml data 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 () ;}/// custom MyGroupStyleSelector (GroupStyle selector) // You can select different GroupStyle public class MyGroupStyleSelector based on different groups at runtime: groupStyleSelector {static bool temp = false; // GroupStyle 1 (configured on The xaml end) public GroupStyle GroupStyle1 {get; set ;}// GroupStyle 2 (configured on The xaml end) public GroupStyle GroupStyle2 {get; set;} protected override GroupStyle SelectGroupStyleCore (object group, uint level) {// test it here. The group is either null or DependencyObject, level is always 0 // use this variable to demonstrate how to make different groups use different GroupStyle temp ^ = true; if (temp) return GroupStyle1; return GroupStyle2; // If You Want To directly return the specified resource, it is also possible (but not flexible), such as: return (GroupStyle) Application. current. resources ["GroupStyle1"] ;}}

OK
[Download source code]