背水一战 Windows 10 (50) - 控件（集合类）: ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

<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>

/*

 * 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();

        }

    }

}

<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>

/*

 * 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;

        }

    }

}

<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>

/*

 * 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();

        }

    }

}

<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>

/*

 * 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();

        }

    }

}