首页 > 代码库 > 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

背水一战 Windows 10 (53) - 控件(集合类): 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
[源码下载]

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