背水一戰 Windows 10 之 控制項(集合類 - ItemsControl): 基礎知識, 數據綁定, 項模板選擇器 ...
背水一戰 Windows 10 (50) - 控制項(集合類): ItemsControl - 基礎知識, 數據綁定, 項模板選擇器
作者:webabcd
介紹
背水一戰 Windows 10 之 控制項(集合類 - ItemsControl)
- 基礎知識
- 數據綁定
- 項模板選擇器
示例
1、ItemsControl 的基礎知識
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 - 集合控制項 Items - 項集合([ContentProperty(Name = "Items")]) ItemsPanel - 用於指定 items 的佈局控制項,任何 Panel 類型的佈局控制項均可,所有 items 將在 Panel 內顯示(Panel 是所有 items 的容器) 給 ItemsControl 用的,可虛擬化的佈局控制項有:ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, WrapGrid. 請參見:/Controls/CollectionControl/ItemsControlDemo/LayoutControl/ ItemContainerTransitions - 指定 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 - 集合控制項(繼承自 Control, 請參見 /Controls/BaseControl/ControlDemo/) * ItemsPanelRoot - 用於獲取 items 的佈局控制項(返回一個 Panel 類型的對象) * * * 本例用於演示 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 += ItemsControlDemo1_Loaded; } private void ItemsControlDemo1_Loaded(object sender, RoutedEventArgs e) { lblMsg.Text = "items 的佈局控制項: " + itemsControl.ItemsPanelRoot.GetType().ToString(); } } }
2、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 - 集合控制項 ItemsSource - 數據源 DisplayMemberPath - 每個數據項需要顯示的欄位 --> <ItemsControl Name="itemsControl" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{x:Bind Employees}" DisplayMemberPath="Name" /> <!-- ItemsControl - 集合控制項 ItemsPanel - 用於指定 items 的佈局控制項,任何 Panel 類型的佈局控制項均可,所有 items 將在 Panel 內顯示(Panel 是所有 items 的容器) 給 ItemsControl 用的,可虛擬化的佈局控制項有:ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, WrapGrid. 請參見:/Controls/CollectionControl/ItemsControlDemo/LayoutControl/ ItemContainerStyle - 每個數據項的容器的樣式 ListView 的 ItemContainer 是 ListViewItem GridView 的 ItemContainer 是 GridViewItem ItemTemplate - 每個數據項的數據模板 --> <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 - 集合控制項(繼承自 Control, 請參見 /Controls/BaseControl/ControlDemo/) * DependencyObject ContainerFromIndex(int index) - 獲取指定索引位置的 item 的 container * DependencyObject ContainerFromItem(object item) - 獲取指定數據對象的 item 的 container * int IndexFromContainer(DependencyObject container) - 獲取指定 ItemContainer 的索引位置 * object ItemFromContainer(DependencyObject container) - 獲取指定 ItemContainer 的綁定對象 * * * 本例用於演示 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) { // 獲取第 4 條數據的 ItemContainer ListViewItem itemContainer1 = listView.ContainerFromIndex(3) as ListViewItem; // 獲取第 1 條數據的 ItemContainer ListViewItem itemContainer2 = listView.ContainerFromItem(Employees.First()) as ListViewItem; // 獲取 itemContainer1 的索引位置 int index = listView.IndexFromContainer(itemContainer1); // 獲取 itemContainer2 的綁定對象 Employee employee = listView.ItemFromContainer(itemContainer2) as Employee; } } }
3、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(100); 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"]; } } }
OK
[源碼下載]