背水一戰 Windows 10 (53) - 控制項（集合類）: ItemsControl 的佈局控制項 - ItemsStackPanel, ItemsWrapGrid

来源:http://www.cnblogs.com/webabcd/archive/2017/06/15/7017133.html
-Advertisement-
Play Games

背水一戰 Windows 10 之 控制項（集合類 - ItemsControl 的佈局控制項）: ItemsStackPanel, ItemsWrapGrid ...


[源碼下載]


背水一戰 Windows 10 (53) - 控制項（集合類）: ItemsControl 的佈局控制項 - ItemsStackPanel, ItemsWrapGrid



作者：webabcd


介紹
背水一戰 Windows 10 之 控制項（集合類 - ItemsControl 的佈局控制項）

  • ItemsStackPanel
  • ItemsWrapGrid



示例
1、ItemsStackPanel 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsStackPanelDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.ItemsStackPanelDemo"
    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.LayoutControl"
    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">

            <StackPanel Margin="5">
                <!--
                    ItemsStackPanel - 虛擬化佈局控制項，ListView 的預設佈局控制項
                        Orientation - 子元素的排列方向
                            Vertical - 垂直排列，預設值
                            Horizontal - 水平排列
                        CacheLength - 可見區外的需要緩存的數據的大小（以可見區條數大小的倍數為單位），預設值為 4.0
                            比如當可見區可以顯示 10 條數據，CacheLength 為 4 時，可見區外的需要緩存的數據的大小則為 4 * 10 = 40，也就是說整個緩存數據的大小為 10 + 4 * 10 = 50
                            實際測試發現，可能會有一定的偏差，但是大體是準確的
                -->
                <ListView Name="listView1" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="common:NavigationModel">
                            <Grid Background="Blue">
                                <TextBlock Text="{x:Bind Title}" />
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel Orientation="Vertical" CacheLength="4" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
                <TextBlock Name="lblMsg1" Margin="5" />
            </StackPanel>

            <StackPanel Margin="5">
                <!--
                    ItemsStackPanel - 虛擬化佈局控制項，ListView 的預設佈局控制項
                        GroupPadding - 每一個數據組的 padding
                        GroupHeaderPlacement - 每一個數據組的 header 的顯示位置
                            Top - 頂部。預設值
                            Left - 左側
                        AreStickyGroupHeadersEnabled - 組 header 是否是固定的，即不隨組數據的滾動而滾動。預設值為 true
                -->
                <ListView Name="listView2" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel GroupPadding="4"  
                                             GroupHeaderPlacement="Top" 
                                             AreStickyGroupHeadersEnabled="{Binding IsChecked, ElementName=chkAreStickyGroupHeadersEnabled}" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
                <ComboBox x:Name="cmbGroupHeaderPlacement" Margin="5" PlaceholderText="GroupHeaderPlacement" SelectionChanged="cmbGroupHeaderPlacement_SelectionChanged">
                    <ComboBoxItem>Top</ComboBoxItem>
                    <ComboBoxItem>Left</ComboBoxItem>
                </ComboBox>
                <CheckBox Name="chkAreStickyGroupHeadersEnabled" Content="AreStickyGroupHeadersEnabled" IsChecked="True" Margin="5" />
            </StackPanel>

        </StackPanel>
    </Grid>
</Page>

Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsStackPanelDemo.xaml.cs

/*
 * ItemsStackPanel - 虛擬化佈局控制項，ListView 的預設佈局控制項（繼承自 Panel, 請參見 /Controls/LayoutControl/PanelDemo.xaml）
 *     FirstCacheIndex - 緩存中的第一項在全部數據中的索引位置
 *     FirstVisibleIndex - 屏幕上顯示的第一項在全部數據中的索引位置
 *     LastCacheIndex - 緩存中的最後一項在全部數據中的索引位置
 *     LastVisibleIndex - 屏幕上顯示的最後一項在全部數據中的索引位置
 *     CacheLength - 可見區外的需要緩存的數據的大小（以可見區條數大小的倍數為單位），預設值為 4.0
 *         比如當可見區可以顯示 10 條數據，CacheLength 為 4 時，可見區外的需要緩存的數據的大小則為 4 * 10 = 40，也就是說整個緩存數據的大小為 10 + 4 * 10 = 50
 *         實際測試發現，可能會有一定的偏差，但是大體是準確的
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl
{
    public sealed partial class ItemsStackPanelDemo : Page
    {
        public CollectionViewSource MyData
        {
            get
            {
                XElement root = XElement.Load("SiteMap.xml");
                var items = LoadData(root);

                // 構造數據源
                CollectionViewSource source = new CollectionViewSource();
                source.IsSourceGrouped = true;
                source.Source = items;
                source.ItemsPath = new PropertyPath("Items");

                return source;
            }
        }
        
        private ItemsStackPanel _itemsStackPanel1 = null;
        private ItemsStackPanel _itemsStackPanel2 = null;

        public ItemsStackPanelDemo()
        {
            this.InitializeComponent();

            this.Loaded += ItemsStackPanelDemo_Loaded;
        }

        private void ItemsStackPanelDemo_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimer dTimer = new DispatcherTimer();
            dTimer.Interval = TimeSpan.Zero;
            dTimer.Tick += DTimer_Tick;
            dTimer.Start();

            // 獲取 ListView 中的 ItemsStackPanel 控制項
            _itemsStackPanel1 = listView1.ItemsPanelRoot as ItemsStackPanel;
            _itemsStackPanel2 = listView2.ItemsPanelRoot as ItemsStackPanel;

            // 獲取 ListView 中的 ItemsStackPanel 控制項
            // _itemsStackPanel1 = Helper.GetVisualChild<ItemsStackPanel>(listView1);
            // _itemsStackPanel2 = Helper.GetVisualChild<ItemsStackPanel>(listView2);
        }

        private void DTimer_Tick(object sender, object e)
        {
            lblMsg1.Text = "FirstCacheIndex: " + _itemsStackPanel1.FirstCacheIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "FirstVisibleIndex: " + _itemsStackPanel1.FirstVisibleIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "LastCacheIndex: " + _itemsStackPanel1.LastCacheIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "LastVisibleIndex: " + _itemsStackPanel1.LastVisibleIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "CacheLength: " + _itemsStackPanel1.CacheLength.ToString();
        }

        private void cmbGroupHeaderPlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            _itemsStackPanel2.GroupHeaderPlacement = (GroupHeaderPlacement)Enum.Parse(typeof(GroupHeaderPlacement), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
        }

        // 解析 xml 數據
        private List<NavigationModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new NavigationModel
                        {
                            Title = (string)n.Attribute("title"),
                            Url = (string)n.Attribute("url"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }
    }
}


2、ItemsWrapGrid 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsWrapGridDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.ItemsWrapGridDemo"
    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.LayoutControl"
    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">

            <StackPanel Margin="5">
                <!--
                    ItemsWrapGrid - 虛擬化佈局控制項，GridView 的預設佈局控制項
                        Orientation - 子元素的排列方向
                            Vertical - 垂直排列，預設值
                            Horizontal - 水平排列
                        ItemWidth - 每個 item 的寬
                        ItemHeight - 每個 item 的高
                        MaximumRowsOrColumns - 最大行數或最大列數（預設值為 -1）
                        CacheLength - 可見區外的需要緩存的數據的大小（以可見區條數大小的倍數為單位），預設值為 4.0
                            比如當可見區可以顯示 10 條數據，CacheLength 為 4 時，可見區外的需要緩存的數據的大小則為 4 * 10 = 40，也就是說整個緩存數據的大小為 10 + 4 * 10 = 50
                            實際測試發現，可能會有一定的偏差，但是大體是準確的
                -->
                <GridView Name="gridView1" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="common:NavigationModel">
                            <Grid Background="Blue">
                                <TextBlock Text="{x:Bind Title}" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal" ItemWidth="120" ItemHeight="50" MaximumRowsOrColumns="3" CacheLength="4" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
                <TextBlock Name="lblMsg1" Margin="5" />
            </StackPanel>

            <StackPanel Margin="5">
                <!--
                    ItemsWrapGrid - 虛擬化佈局控制項，GridView 的預設佈局控制項
                        GroupPadding - 每一個數據組的 padding
                        GroupHeaderPlacement - 每一個數據組的 header 的顯示位置
                            Top - 頂部。預設值
                            Left - 左側
                        AreStickyGroupHeadersEnabled - 組 header 是否是固定的，即不隨組數據的滾動而滾動。預設值為 true
                -->
                <ListView Name="gridView2" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" Width="100" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"
                                           GroupPadding="4"
                                           GroupHeaderPlacement="Top" 
                                           AreStickyGroupHeadersEnabled="{Binding IsChecked, ElementName=chkAreStickyGroupHeadersEnabled}" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
                <ComboBox x:Name="cmbGroupHeaderPlacement" Margin="5" PlaceholderText="GroupHeaderPlacement" SelectionChanged="cmbGroupHeaderPlacement_SelectionChanged">
                    <ComboBoxItem>Top</ComboBoxItem>
                    <ComboBoxItem>Left</ComboBoxItem>
                </ComboBox>
                <CheckBox Name="chkAreStickyGroupHeadersEnabled" Content="AreStickyGroupHeadersEnabled" IsChecked="True" Margin="5" />
            </StackPanel>
            
        </StackPanel>
    </Grid>
</Page>

Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsWrapGridDemo.xaml.cs

/*
 * ItemsWrapGrid - 虛擬化佈局控制項，GridView 的預設佈局控制項（繼承自 Panel, 請參見 /Controls/LayoutControl/PanelDemo.xaml）
 *     FirstCacheIndex - 緩存中的第一項在全部數據中的索引位置
 *     FirstVisibleIndex - 屏幕上顯示的第一項在全部數據中的索引位置
 *     LastCacheIndex - 緩存中的最後一項在全部數據中的索引位置
 *     LastVisibleIndex - 屏幕上顯示的最後一項在全部數據中的索引位置
 *     CacheLength - 可見區外的需要緩存的數據的大小（以可見區條數大小的倍數為單位），預設值為 4.0
 *         比如當可見區可以顯示 10 條數據，CacheLength 為 4 時，可見區外的需要緩存的數據的大小則為 4 * 10 = 40，也就是說整個緩存數據的大小為 10 + 4 * 10 = 50
 *         實際測試發現，可能會有一定的偏差，但是大體是準確的
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl
{
    public sealed partial class ItemsWrapGridDemo : Page
    {
        public CollectionViewSource MyData
        {
            get
            {
                XElement root = XElement.Load("SiteMap.xml");
                var items = LoadData(root);

                // 構造數據源
                CollectionViewSource source = new CollectionViewSource();
                source.IsSourceGrouped = true;
                source.Source = items;
                source.ItemsPath = new PropertyPath("Items");

                return source;
            }
        }

        private ItemsWrapGrid _itemsWrapGrid1 = null;
        private ItemsWrapGrid _itemsWrapGrid2 = null;

        public ItemsWrapGridDemo()
        {
            this.InitializeComponent();

            this.Loaded += ItemsWrapGridDemo_Loaded;
        }

        private void ItemsWrapGridDemo_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimer dTimer = new DispatcherTimer();
            dTimer.Interval = TimeSpan.Zero;
            dTimer.Tick += DTimer_Tick;
            dTimer.Start();

            // 獲取 GridView 中的 ItemsWrapGrid 控制項
            _itemsWrapGrid1 = gridView1.ItemsPanelRoot as ItemsWrapGrid;
            _itemsWrapGrid2 = gridView2.ItemsPanelRoot as ItemsWrapGrid;

            // 獲取 GridView 中的 ItemsWrapGrid 控制項
            // _itemsWrapGrid1 = Helper.GetVisualChild<ItemsWrapGrid>(gridView1);
            // _itemsWrapGrid2 = Helper.GetVisualChild<ItemsWrapGrid>(gridView2);
        }

        private void DTimer_Tick(object sender, object e)
        {
            lblMsg1.Text = "FirstCacheIndex: " + _itemsWrapGrid1.FirstCacheIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "FirstVisibleIndex: " + _itemsWrapGrid1.FirstVisibleIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "LastCacheIndex: " + _itemsWrapGrid1.LastCacheIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "LastVisibleIndex: " + _itemsWrapGrid1.LastVisibleIndex.ToString();
            lblMsg1.Text += Environment.NewLine;
            lblMsg1.Text += "CacheLength: " + _itemsWrapGrid1.CacheLength.ToString();
        }

        private void cmbGroupHeaderPlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            _itemsWrapGrid2.GroupHeaderPlacement = (GroupHeaderPlacement)Enum.Parse(typeof(GroupHeaderPlacement), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
        }

        // 解析 xml 數據
        private List<NavigationModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new NavigationModel
                        {
                            Title = (string)n.Attribute("title"),
                            Url = (string)n.Attribute("url"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }
    }
}



OK
[源碼下載]


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

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類