需要 emc rectangle ems sources mic navi schema mark

原文:背水一戰 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(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