背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件

背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

介绍
背水一战 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[] 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[] 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
[源码下载]

背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid的更多相关文章

背水一战 Windows 10 (54) - 控件（集合类）: ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid
[源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingS ...
背水一战 Windows 10 (50) - 控件（集合类）: ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter
[源码下载] 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresen ...
背水一战 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 (49) - 控件（集合类）: Pivot, Hub
[源码下载] 背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub 作者:webabcd 介绍背水一战 Windows 10 之控件(集合类) Pivot Hub 示 ...
背水一战 Windows 10 (48) - 控件（集合类）: FlipView
[源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之控件(集合类) FlipView 示例Fl ...
背水一战 Windows 10 (55) - 控件（集合类）: SemanticZoom, ISemanticZoomInformation
[源码下载] 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation 作者:webabcd 介绍背水一战 Wind ...
背水一战 Windows 10 (56) - 控件（集合类）: ListViewBase - 基础知识, 拖动项
[源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项作者:webabcd 介绍背水一战 Windows 10 之控件(集合 ...
背水一战 Windows 10 (57) - 控件（集合类）: ListViewBase - 增量加载, 分步绘制
[源码下载] 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制作者:webabcd 介绍背水一战 Windows 10 之控件(集 ...

随机推荐

JS closure
闭包的概念闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量. --维基百科闭包就是能够读取其他函数内部变量的函数. --阮一峰由于在Javascript语言中, ...
.net调用word转换pdf出现80080005错误的解决办法
检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 80080005. 1:在服务器上安装offi ...
regular exception
RegexBuddy :正则表达式编辑器. 正则表达式:通过特定的规则,选取特定的字符串. ^ 为匹配输入字符串的开始位置.$ 为匹配输入字符串的结束位置. \d匹配[0-9] \w匹配[A-Z a- ...
python之Bottle框架
一.简单的Bottle框架 1)bottle框架简介安装 pip install bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架. 此框架只由一个 .py 文件,除 ...
Django的学习（四）———— admin
admin是django自带的一个管理者,由于自带所以直接对admin文件进行一个配置. 一.创建用户: python manage.py createsuperuser 创建合理的用户信息就可以在网 ...
谈互联网开放平台：“去中心化”大势所趋 zz
文/磐石之心几天前与好友聊到众筹咖啡馆的事情,他向我讲述了一个非常具有特色的众筹咖啡馆案例.而这个案例也引发我对当前互联网开放.去中心和集权的一些思考,今天就简单写出来与大家分享. 一个无赚钱目的的 ...
ios 基础知识篇堆和栈的区别
前言堆和栈是什么?有什么区别?是干嘛的? 内存管理移动设备的内存及其有限,每一个APP所能占用的内存是有限制的 (吐槽一下:iPhone6s还是16G起步,还好我也买不起->_-> 扯 ...
RabbitMQ c#版实现（转）
出处:https://www.cnblogs.com/hanfan/p/9842301.html 网上很多人已经总结的很好了,比如今天看到的这个.https://www.cnblogs.com/Lip ...
负载均衡下 tomcat session 共享
概述在分布式部署的情况下,每台tomcat 都会有自己的session ,这样如果用户A 在tomcat1 下登录,在tomcat2 下并没有session信息.如果 tomcat1宕机,tomc ...
ibatis注意要点
一.ibatis的关键字like查询 select * from t_student where s_name '%张%'; 这种like语句在ibatis中怎么写,他们现在的项目是用ibatis作为 ...

背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid的更多相关文章

随机推荐

热门专题