背水一戰 Windows 10 (50) - 控件(集合類): ItemsControl - 基礎知識, 數據綁定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter
[源碼下載]
作者:webabcd
介紹
背水一戰 Windows 10 之 控件(集合類 - ItemsControl)
- 基礎知識
- 數據綁定
- ItemsPresenter
- GridViewItemPresenter
- ListViewItemPresenter
示例
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"> <GridBackground="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、ItemsPresenter - 用來呈現 ItemsControl 的 Items
Controls/CollectionControl/ItemsControlDemo/ItemsPresenterDemo.xaml
<Page x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.ItemsPresenterDemo" 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"> <!-- ItemsPresenter - 用來呈現 ItemsControl 的 Items Padding - 全部 Items 與 ItemsPresenter 之間的 Padding Header, HeaderTemplate, Footer, HeaderTransitions - 顧名思義,不用解釋 HeaderTransitions - header 的過渡效果 FooterTransitions - footer 的過渡效果 --> <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.Template> <ControlTemplate> <Border BorderBrush="Orange" BorderThickness="1" Width="400" Height="400"> <ItemsPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0"> <ItemsPresenter.HeaderTemplate> <DataTemplate> <TextBlock Text="header" Foreground="Orange" /> </DataTemplate> </ItemsPresenter.HeaderTemplate> <ItemsPresenter.FooterTemplate> <DataTemplate> <TextBlock Text="footer" Foreground="Orange" /> </DataTemplate> </ItemsPresenter.FooterTemplate> <ItemsPresenter.HeaderTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset="1000"/> </TransitionCollection> </ItemsPresenter.HeaderTransitions> <ItemsPresenter.FooterTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset="1000"/> </TransitionCollection> </ItemsPresenter.FooterTransitions> </ItemsPresenter> </Border> </ControlTemplate> </ItemsControl.Template> </ItemsControl> </StackPanel> </Grid> </Page>
Controls/CollectionControl/ItemsControlDemo/ItemsPresenterDemo.xaml.cs
/* * ItemsPresenter - 用來呈現 ItemsControl 的 Items(繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/) */ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.CollectionControl.ItemsControlDemo { public sealed partial class ItemsPresenterDemo : Page { public ItemsPresenterDemo() { this.InitializeComponent(); } } }
4、GridViewItemPresenter 和 ListViewItemPresenter - 用於呈現 GridView 或 ListView 的 Item
Controls/CollectionControl/ItemsControlDemo/ItemPresenterDemo.xaml
<Page x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.ItemPresenterDemo" 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> <Style x:Key="MyGridViewItemPresenterTemplate" TargetType="GridViewItem"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="GridViewItem"> <!-- GridViewItemPresenter 和 ListViewItemPresenter - 用於呈現 GridView 或 ListView 的 Item Margin - item 的 margin SelectionCheckMarkVisualEnabled - 是否顯示選中狀態的標記 SelectedBorderThickness - 選中狀態的邊框粗細 SelectedBackground - 選中狀態的邊框顏色 CheckBrush - 選中狀態的圖標(本例就是那個小對勾) ...... - 還有好多好多,看文檔吧 --> <GridViewItemPresenter Margin="10" SelectionCheckMarkVisualEnabled="True" SelectedBorderThickness="3" SelectedBackground="Red" CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid Background="Transparent"> <GridView x:Name="gridView" Margin="10 0 10 10" ItemContainerStyle="{StaticResource MyGridViewItemPresenterTemplate}" SelectionMode="Multiple"> <GridView.ItemTemplate> <DataTemplate> <StackPanel Height="100" Width="100" Background="Blue"> <TextBlock x:Name="lblName" Text="{Binding Name}" Foreground="Yellow" /> <TextBlock x:Name="lblAge" Text="{Binding Age}" Foreground="Aqua" /> <TextBlock x:Name="lblIsMale" Text="{Binding IsMale}" Foreground="Gray" /> </StackPanel> </DataTemplate> </GridView.ItemTemplate> </GridView> </Grid> </Page>
Controls/CollectionControl/ItemsControlDemo/ItemPresenterDemo.xaml.cs
/* * GridViewItemPresenter, ListViewItemPresenter - 用於呈現 GridView 或 ListView 的 Item(繼承自 ContentPresenter, 請參見 /Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml) */ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; using Windows10.Common; namespace Windows10.Controls.CollectionControl.ItemsControlDemo { public sealed partial class ItemPresenterDemo : Page { public ItemPresenterDemo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { gridView.ItemsSource = TestData.GetEmployees(); } } }
OK
[源碼下載]
背水一戰 Windows 10 (50) - 控件(集合類): ItemsControl - 基礎知識, 數據綁定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter