背水一战 Windows 10 (50) - 控件（集合类）: ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter
背水一战 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"> <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(); public ItemsControlDemo2()
{
this.InitializeComponent(); listView.Loaded += ListView_Loaded;
} private void ListView_Loaded(object sender, RoutedEventArgs e)
{
// 获取第 4 条数据的 ItemContainer
ListViewItem itemContainer1 = listView.ContainerFromIndex() 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的更多相关文章
- 背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter
[源码下载] 背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter 作 ...
- 背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid
[源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...
- 背水一战 Windows 10 (51) - 控件（集合类）: ItemsControl - 项模板选择器, 数据分组
[源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...
- 背水一战 Windows 10 (52) - 控件（集合类）: ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter
[源码下载] 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter 作者:weba ...
- 背水一战 Windows 10 (54) - 控件（集合类）: ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid
[源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingS ...
- 背水一战 Windows 10 (49) - 控件（集合类）: Pivot, Hub
[源码下载] 背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) Pivot Hub 示 ...
- 背水一战 Windows 10 (55) - 控件（集合类）: SemanticZoom, ISemanticZoomInformation
[源码下载] 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation 作者:webabcd 介绍背水一战 Wind ...
- 背水一战 Windows 10 (48) - 控件（集合类）: FlipView
[源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例Fl ...
- 背水一战 Windows 10 (56) - 控件（集合类）: ListViewBase - 基础知识, 拖动项
[源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合 ...
随机推荐
- Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...
- qr 生成二维码
package com.common; import com.swetake.util.Qrcode; import jp.sourceforge.qrcode.QRCodeDecoder; impo ...
- 微信JSSDK接口previewImage
<div class="pics"> <img src="http://pic1.ytqmx.com:82/2015/0409/01/15.jpg!96 ...
- Bootstrap学习遇到的role属性--- 无障碍网页应用属性
以前接触过Bootstrap,但也只是仅仅接触,现在重新学习下,今天看到一个例子中的属性有一个role, 查阅资料发现这个是--WAI-ARIA无障碍设计属性: 通俗说是该设计为了一些盲人,失聪,残疾 ...
- 494. Target Sum - Unsolved
https://leetcode.com/problems/target-sum/#/description You are given a list of non-negative integers ...
- Python之开发自动化管理工具paramiko
一.paramiko模块使用 1)远程执行主机命令获取结果 方法一 import paramiko # 创建SSH对象 ssh = paramiko.SSHClient() # 允许连接不在know_ ...
- 清幽傲竹实现的kbmMWServer数据库联接失败重联(转载红鱼儿)
1.修改kbmMWUnidac单元的TkbmMWUNIDACConnection.InternalOpenConnection方法,加上: //支持unidac重联 ...
- scope属性
scope属性 1.<bean>属性 2.作用:控制对象有效范围(单例.多例等) 3.<bean/> 标签对应的对象默认是单例的 3.1 无论获取多少次,都是同一个对象 4.s ...
- 初识python函数
一.函数 1.什么是函数 函数是对功能或者动作的封装 2.函数的语法和定义 def 函数名(): 函数体 调用: 函数名() 3.关于函数的返回值 return : 返回 1.当程序没写过retur ...
- MacBook小技巧
退出全屏:Control+Command+F.关闭当前的应用程序:Command+W.退出应用程序,可对着Dock上的应用程序辅助点按(右键),选择退出.也可直接按Commnad+Q退出当前的应用程序 ...