World War I Windows 10 (50) and World War I windows

World War I Windows 10 (50) and World War I windows

[Download source code]

Backwater world war I Windows 10 (50)-Controls (Collection class): ItemsControl-basic knowledge, data binding, item template Selector

Author: webabcd


Introduction
Controls for Windows 10 (Collection class-ItemsControl)

• Basic knowledge
• Data Binding
• Item template Selector

Example
1. Basic ItemsControl knowledge
Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo1.xaml

<Page x: Class = "Windows10.Controls. CollectionControl. ItemsControlDemo. ItemsControlDemo1" 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 "> <Grid Background =" Transparent "> <StackPanel Margin =" 10 0 10 10 "> <! -- ItemsControl-set control Items-item set ([ContentProperty (Name = "Items")]) ItemsPanel-specifies the layout control of items. Any layout control of Panel type can, all items will be displayed in the Panel (Panel is the container of all items) for ItemsControl. The Virtualized layout controls include ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, and WrapGrid. see: /Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemContainerTransitions-specify the container transition effect of ItemsControl --> <ItemsControl Name = "itemsControl" Margin = "5" HorizontalAlignment = "Left"> <itemsControl. items> <Rectangle Width = "100" Height = "100" Fill = "Red"/> <Rectangle Width = "100" Height = "100" Fill = "Green"/> <Rectangle Width = "100" Height = "100" Fill = "Blue"/> </ItemsControl. items> <ItemsControl. itemsPanel> <ItemsPanelTemplate> <StackPanel Orientation = "Horizontal"/> </ItemsPanelTemplate> </ItemsControl. itemsPanel> <ItemsControl. itemContainerTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset = "1000"/> </TransitionCollection> </ItemsControl. itemContainerTransitions> </ItemsControl> <TextBlock Name = "lblMsg" Margin = "5"/> </StackPanel> </Grid> </Page>

Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo1.xaml. cs

/** ItemsControl-set Control (inherited from Control, see/Controls/BaseControl/ControlDemo/) * ItemsPanelRoot-get the layout Control of items (return a Panel object) * ** This example demonstrates the basic knowledge of ItemsControl */using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows10.Controls. collectionControl. itemsControlDemo {public sealed partial class ItemsControlDemo1: Page {public ItemsControlDemo1 () {this. initializeComponent (); this. loaded + = itemscontroldemow.loaded;} private void itemscontroldemow.loaded (object sender, RoutedEventArgs e) {lblMsg. text = "layout control of items:" + itemsControl. itemsPanelRoot. getType (). toString ();}}}

2. Data Binding of ItemsControl
Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo2.xaml

<Page x: Class = "Windows10.Controls. CollectionControl. ItemsControlDemo. ItemsControlDemo2" 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 "> <Grid Background =" Transparent "> <StackPanel Margin =" 10 0 10 10 "Orientation =" Horizontal "> <! -- ItemsControl-set control ItemsSource-Data Source DisplayMemberPath-fields to be displayed for each data item --> <ItemsControl Name = "itemsControl" Margin = "5" Width = "400" Height = "400" horizontalAlignment = "Left" verticalignment = "Top" ItemsSource = "{x: bind Employees} "DisplayMemberPath =" Name "/> <! -- 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/ItemContainerStyle-container style of each data item ItemContainer of ListView is ItemContainer of ListViewItem GridView and GridViewItem ItemTemplate-data template of each data item --> <ListView Name = "listView" Margin = "5" Width = "400" Height = "400" HorizontalAlignment = "Left" VerticalAlignment = "Top" ItemsSource = "{x: bind Employees} "> <ListView. itemTemplate> <DataTemplate x: DataType = "common: Employee"> <Grid Background = "Red"> <TextBlock Text = "{x: bind Name} "/> </Grid> </DataTemplate> </ListView. itemTemplate> <ListView. itemsPanel> <ItemsPanelTemplate> <StackPanel Orientation = "Vertical"/> </ItemsPanelTemplate> </ListView. itemsPanel> <ListView. itemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "Padding" Value = "10"/> <Setter Property = "Background" Value = "Orange"/> </ style> </ListView. itemContainerStyle> </ListView> </StackPanel> </Grid> </Page>

Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo2.xaml. cs

/** ItemsControl-set Control (inherited from Control, see/Controls/BaseControl/ControlDemo/) * DependencyObject ContainerFromIndex (int index) -Get the container * DependencyObject ContainerFromItem (object item) of the item at the specified index location-get the container * int IndexFromContainer (DependencyObject container) of the item of the specified data object) -retrieve the index location of the specified ItemContainer * object ItemFromContainer (DependencyObject container)-obtain the bound object of the specified ItemContainer ** This example shows the data binding of ItemsControl */using System. collections. objectModel; using Windows. UI. xaml; using Windows. UI. xaml. controls; using System. linq; using Windows10.Common; namespace Windows10.Controls. collectionControl. itemsControlDemo {public sealed partial class ItemsControlDemo2: Page {public ObservableCollection <Employee> Employees {get; set ;}= TestData. getEmployees (100); public ItemsControlDemo2 () {this. initializeComponent (); listView. loaded + = ListView_Loaded;} private void ListView_Loaded (object sender, RoutedEventArgs e) {// ItemContainer ListViewItem itemContainer1 = listView for obtaining 4th pieces of data. containerFromIndex (3) as ListViewItem; // ItemContainer ListViewItem itemContainer2 = listView. containerFromItem (Employees. first () as ListViewItem; // gets the index position of itemContainer1 int index = listView. indexFromContainer (itemContainer1); // gets the bound object of itemContainer2: Employee employee = listView. itemFromContainer (itemContainer2) as Employee ;}}}

3. 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"] ;}}

OK
[Download source code]