背水一戰 Windows 10 (50) - 控制項(集合類): ItemsControl - 基礎知識, 數據綁定, 項模板選擇器

来源:http://www.cnblogs.com/webabcd/archive/2017/05/22/6887865.html
-Advertisement-
Play Games

背水一戰 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
[源碼下載]


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • U盤安裝CentOS 7提示 “Warning: /dev/root does not exist, could not boot” 解決辦法 ...
  • xargs命令是把接收到的數據重新格式化,再將其作為參數提供給其他命令,下麵介紹xargs命令的各種使用技巧 一、將多行輸入轉換成單行輸入: 將單行輸入轉換成多行輸出: 自定義定界符進行轉換(預設的定界符是空格): 二、在腳本中運用: 在上面的例子中,我們把參數源都放入args.txt文件,但是除了 ...
  • 初始化git 配置git 使用Git的第一件事就是設置你的名字和email,這些就是你在提交commit時的簽名,每次提交記錄里都會包含這些信息。使用git config命令進行配置 執行了上面的命令後,會在家目錄( )下建立一個叫 的文件(該文件為隱藏文件,需要使用 查看到). 內容一般像下麵這樣 ...
  • How to set up host-only virtual machines that host can access it... 問題 因為工作和學習,我經常需要移動裝有Linux系統的筆記本電腦,有時在家裡用,有時在公司里用,這兩個地方的網路都是不同的,或者有時要開會或到外面,不能連接任何的 ...
  • 問題如題,df -h 出來的容量與du -sh 查看的容量信息不一樣,是那裡出了問題了嗎? 下麵分別是du -sh *與df -h出來的結果 以上是相關查詢命令的輸出,下麵是硬碟fdisk -l的輸出信息 之前也使用 badblocks 進行掃描了下,壞的塊為0。 實在是找不出來相關的原因了,遂發出 ...
  • 目錄結構: /bin:存放系統常用的命令程式 /boot:系統啟動或引導所需要的一些文件 /dev:可用的設備文件 /etc:系統配置相關的東西 /home:所有用戶的主目錄 /lib,lib64:存放系統的庫文件 /media:即插即用設備文件 /mnt:存儲設備掛載目錄 /opt:可選軟體包安裝 ...
  • ———————————————————————————————————————————— 分類: 按結構原理分: 觸點式開關按鍵 無觸點開關按鍵 接入方式 獨立式按鍵 矩陣式鍵盤 按結構原理分: 觸點式開關按鍵 無觸點開關按鍵 接入方式 獨立式按鍵 矩陣式鍵盤 ——————————————————— ...
  • 提高逼格,給自己的網站加入智能聊天功能 引言 現在突然發現有很多 QQ 群都開啟了群機器人的功能,其中有兩個角色,他們分別是:Baby Q 和 QQ 小冰。在 Q 群中,你可以對他們進行任意程度的調戲,不過,遺憾的是魚和熊掌不可得兼,一個群只能進行二選一。據說 Baby Q 來自圖靈公司,而小冰卻是 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...