AI 助理
备案控制台
开发者社区 云计算 文章 正文

UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（二）

2018-03-12 1057
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（二）上篇UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（一） 讲到该控件的需要和设计过程。
原文: UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（二）

上篇UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（一） 讲到该控件的需要和设计过程。

这篇讲讲开发过程中一些重要问题解决。

1.支持ISupportIncrementalLoading，实现HasMoreItems属性和LoadMoreItemsAsync方法

因为我们上篇里面讲过，需要把源数据分成一个一个的Group作为GirdView的源，

所以LoadMoreItemsAsync方法里面我做了以下的实现：

        public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
        {
            IAsyncOperation<LoadMoreItemsResult> result = rowAdapter.LoadMoreItemsAsync(count);
            if (rowAdapter.Count > 0)
            {
                for (int i = this.Count; i < rowAdapter.Count; i++)
                {
                    if (rowAdapter.SourceList.Count / rowAdapter.rowItemsCount > i)
                    {
                        var item = this.ElementAtOrDefault(i);
                        if (item == null)
                        {
                            this.Insert(i, rowAdapter[i]);
                        }
                    }
                }
            }

            return result;
        }

应该还是比较清楚的，当源数据里面的个数超过了RowItemsCount的时候，我们才插入Item。

也就是说。当满15个Item的时候我们才插入第1个Row Item，当满30个Item的时候我们插入第2个Row Item......

可能有人会说，如果源数据不是15个整数，那怎么办呢？？嗯，我也遇到了这个问题，当然，HasMoreItems属性也需要作相应的实现

        public bool HasMoreItems
        {
            get
            {
                var hasMoreItems = rowAdapter.HasMoreItems;
   
                if (!hasMoreItems)
                {
                    if (rowAdapter.Count > 0 && this.Count < rowAdapter.Count)
                    {
                        for (int i = this.Count; i < rowAdapter.Count; i++)
                        {
                            //sometime it will miss some indexs in LoadMoreItemsAsync method,
                            //if hasMoreItems is false, that means not more items,
                            //so at that monment we should add the missed items.
                            //if (rowAdapter.SourceList.Count / rowAdapter.rowItemsCount <= i)
                            {
                                var item = this.ElementAtOrDefault(i);
                                if (item == null)
                                {
                                    this.Insert(i, rowAdapter[i]);
                                }
                            }
                        }
                    }
                }
                return hasMoreItems;
            }
        }

当HasMoreItems为false的时候，就是说这个源不会有更多的数据了，所以这时候我们应该把剩余的Item都加入到下一个Row Item里面去。

2.当Window size 改变的时候，实现不同的可变大小结构。

public class ResizeableItems : List<ResizeableItem>

每一种结构，我用一个ResizeableItem来表示。

比如window 最小的时候这种结构。

                list = new List<Resizable>();
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });

                var c1 = new ResizeableItem() { Columns = 2, Items = list,               Min = windowMinwidth + +1, Max = windowMinwidth + rangwidth * 1 };
                _resizeableItems.Add(c1);

设置GirdView里面的每个Item的宽高比2：1，设置ResizeableItem的最小和最大值，这个意思就是当window 到达MIn和Max的这个区间的时候就使用这个结构。

然后也设置出其它的结构样式。（PS:我这里还没找到Get 最小window 宽度的办法，好像只能设置，如果有办法的朋友请留言一下）

                 _resizeableItems = new ResizeableItems();

                //ApplicationView.GetForCurrentView().SetPreferredMinSize(new Windows.Foundation.Size(200, 200));

                double windowMinwidth = 500;
                double windowMaxwidth = DeviceInfo.DeviceScreenSize.Width;
                double rangwidth = (windowMaxwidth - windowMinwidth) / 4.0;

                #region 4
                var list = new List<Resizable>();
                list.Add(new Resizable() { Width = 2, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });

                var c4 = new ResizeableItem() { Columns = 4, Items = list, Min = windowMinwidth + rangwidth * 3 + 1, Max = double.PositiveInfinity };
                _resizeableItems.Add(c4);
                #endregion

                #region 3
                list = new List<Resizable>();
                list.Add(new Resizable() { Width = 2, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });

                var c3 = new ResizeableItem() { Columns = 3, Items = list, Min = windowMinwidth + rangwidth * 2 + 1, Max = windowMinwidth + rangwidth * 3 };
                _resizeableItems.Add(c3);
                #endregion

                #region 2
                list = new List<Resizable>();
                list.Add(new Resizable() { Width = 2, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 2 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });
                list.Add(new Resizable() { Width = 1, Height = 1 });

                var c2 = new ResizeableItem() { Columns = 2, Items = list, Min = windowMinwidth + rangwidth * 1 + 1, Max = windowMinwidth + rangwidth * 2 };
                _resizeableItems.Add(c2);
                #endregion

                #region 1
                list = new List<Resizable>();
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });
                list.Add(new Resizable() { Width = 2, Height = 1 });

                var c1 = new ResizeableItem() { Columns = 2, Items = list, Min = windowMinwidth + +1, Max = windowMinwidth + rangwidth * 1 };
                _resizeableItems.Add(c1);
                #endregion
View Code

这样我们就设置好了，到达多少size的时候使用什么结构模板了。。

最后我们只需要在控件的MeasureOverrid中去设置，GridView的Item的样式就好了.

        protected override Size MeasureOverride(Size availableSize)
        {
            if (!PlatformIndependent.IsWindowsPhoneDevice)
            {
                OnMeasureOverride(availableSize);
            }
            return base.MeasureOverride(availableSize);
        }
        
         private void OnMeasureOverride(Size availableSize)
        {
            if (ItemsSource != null && ItemsSource is IResizeableItems && availableSize != Size.Empty)
            {
                var resizeableItem = ResizeableItems.GetItem(availableSize.Width);

                if (resizeableItem != null)
                {
                    resizeableItem.ItemWidth = (int)(availableSize.Width / resizeableItem.Columns - 7);

                    foreach (var item in this.Items)
                    {
                        var gridviewItem = this.ContainerFromItem(item) as ListViewItem;
                        //not null, it's in viewport, so it need to update.
                        if (gridviewItem != null && gridviewItem.ContentTemplateRoot != null)
                        {
                            var gridview = gridviewItem.ContentTemplateRoot as VariableSizedGridView;
                            gridview.ResizeableItem = null;
                            gridview.ResizeableItem = resizeableItem;

                        }
                    }
                }

            }
        }

 

3.ListViewItem默认模板的修改
在使用这个的时候因为其实是个ListView,所以当你点击到GridView外面的时候就点击到了ListLViewItem上面，会有些你不想要的效果，比如PointerDown。

第一次用VS拿到ListViewItem的模板的时候发现没地方可能修改这个动画呢？？？

再查了下MSDN,发现原来，ListViewItem是有2套模板的，

Default style

When the ListView's ItemsPanel is an ItemsStackPanel (the default) or ItemsWrapGrid, this template is used to show the data items. This template uses aListViewItemPresenter instead of a UIElement tree to improve grid performance.

这个模板跟我从VS里面拿到的是一样的。

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Margin" Value="0,0,18,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    Padding="{TemplateBinding Padding}"
                    SelectionCheckMarkVisualEnabled="True"
                    CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                    CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                    CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                    SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                    SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                    SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                    SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
                    SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    PointerOverBackgroundMargin="1"
                    ContentMargin="4" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

When the ListView's ItemsPanel is not an ItemsStackPanel (the default) or ItemsWrapGrid, this template is used to show the data items. This template uses aUIElement tree and visual states instead of a ListViewItemPresenter.

这个模板我就不贴了，比较多，MSDN地址

 

总结：

虽然说这个控件已经满足了Boss的需求，但是我还是觉得有一些需要改进的。

1.UI Virtualized

如果说GridView里面的Item个数被用户设置的很多，这个必定是很占用内存的。

实际Debug，也发现，Live Visual Tree里面有3个ListViewItem.

感觉内存中不需要这么多个ListViewItem 来循环回收利用，我的猜想是微软做了上下各一个Item的缓存来提高Scrolling的流畅。

但对于这个控件来说，内存里面的UI Item 会有3*15个，因为我们知道VariableSizedWrapGrid是不支持UI虚拟化的。

2.没有对Insert，Delete进行处理。

这个控件还有一个限制，就是源是一个固定个数或者是ISupportIncrementalLoading，如果在过程中add，insert，delete的话，暂时没有进行处理。

只对Reset这种情况进行了处理。

        private void ObservableRowAapter_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            switch (e.Action)
            {
                case NotifyCollectionChangedAction.Add:
                    break;
                case NotifyCollectionChangedAction.Move:
                    break;
                case NotifyCollectionChangedAction.Remove:
                    break;
                case NotifyCollectionChangedAction.Replace:
                    break;
                case NotifyCollectionChangedAction.Reset:
                    if (this.Count>0)
                    {
                        this.Clear();
                    }
                    break;
                default:
                    break;
            }
        }

希望有好想法的童鞋能留言，大家讨论共同进步。。

为了部落！

开源有益，GitHub源代码地址

文章标签：
虚拟化
C++
缓存
关键词：
virtualizedvariablesizedgridview虚拟化item view
虚拟化view
杰克.陈
目录
相关文章
杰克.陈
|
虚拟化 索引
UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（一）
原文:UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（一） Boss的需要时这样的，Item是可变大小的，同时根据不同的Window size，来确定Item的结构和大小Window 小的时候是 大的时候是这样的： 当然这size变化的过程中也允许其他结构，我这里只是举了最大和最小时候的样子。
杰克.陈
1142 0
像教授
|
存储 虚拟化 PHP
VMware发表新版桌面虚拟化软件View 3
像教授
1350 0
东方睿赢
|
3月前
|
存储 安全 虚拟化
虚拟化技术：实现资源高效利用和灵活管理的利器
虚拟化技术作为实现资源高效利用和灵活管理的重要手段，在数字化时代背景下，正逐步改变传统IT架构模式。本文概述了虚拟化技术的概念、原理及其在数据中心管理、云计算平台、企业信息化建设、科研教育及医疗行业的应用，并探讨了其面临的挑战与未来发展趋势。
东方睿赢
305 3
蓝易云
|
2月前
|
安全 Linux KVM
Linux虚拟化技术：从Xen到KVM
Xen和KVM是Linux平台上两种主要的虚拟化技术，各有优缺点和适用场景。通过对比两者的架构、性能、安全性、管理复杂性和硬件依赖性，可以更好地理解它们的适用场景和选择依据。无论是高性能计算、企业虚拟化还是云计算平台，合理选择和配置虚拟化技术是实现高效、稳定和安全IT环境的关键。
蓝易云
137 8
小Lee
|
6月前
|
存储 Linux 调度
OpenStack如何支持虚拟化技术？
【8月更文挑战第21天】
小Lee
354 0
源码星辰
|
4月前
|
存储 分布式计算 分布式数据库
云计算和虚拟化技术
云计算是指把计算资源、存储资源、网络资源、应用软件等集合起来，采用虚拟化技术，将这些资源池化，组成资源共享池，共享池即是“云”。
源码星辰
211 64
wljslmz
|
3月前
|
存储 持续交付 虚拟化
一张图带你详细了解容器和虚拟机这两种虚拟化技术的区别，有用！
【10月更文挑战第24天】
wljslmz
1120 0
一张图带你详细了解容器和虚拟机这两种虚拟化技术的区别，有用！
尹正杰
|
5月前
|
KVM 虚拟化
虚拟化技术概述及KVM环境安装
关于虚拟化技术概述及KVM环境安装的教程，涵盖了虚拟化的定义、分类、管理工具，以及KVM的系统需求、安装步骤和使用指南。
尹正杰
165 11
虚拟化技术概述及KVM环境安装
jcLee95
|
6月前
|
存储 运维 虚拟化
Docker技术概论（1）：Docker与虚拟化技术比较
Docker技术概论（1）：Docker与虚拟化技术比较
jcLee95
263 17
Docker技术概论（1）：Docker与虚拟化技术比较
wljslmz
|
6月前
|
Devops 虚拟化 Docker
DevOps 中的标准虚拟化技术
【8月更文挑战第27天】
wljslmz
81 5

热门文章

最新文章

  • 1
    虚拟化数据恢复—误还原快照导致虚拟机上数据库丢失的数据恢复案例
  • 2
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 3
    时序数据库TDengine 与中移软件达成兼容性互认证，推动虚拟化云平台与时序数据库的深度融合
  • 4
    虚拟化是如何降低数据中心功耗的？
  • 5
    虚拟化平台cloudstack（2）——安装（上）
  • 6
    存储虚拟化与服务器虚拟化相辅相成
  • 7
    运营商认为虚拟化也难快速降低企业OPEX
  • 8
    vmware安装ubuntu12.04嵌套安装xen server（实现嵌套虚拟化）
  • 9
    DataCore对外出售其虚拟化软件产品
  • 10
    CNStack 虚拟化服务：实现虚拟机和容器资源的共池管理
  • 1
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    27
  • 2
    虚拟化数据恢复—误还原快照导致虚拟机上数据库丢失的数据恢复案例
    55
  • 3
    时序数据库TDengine 与中移软件达成兼容性互认证，推动虚拟化云平台与时序数据库的深度融合
    62
  • 4
    虚拟化数据恢复—VMFS简介&误删除虚拟机的数据恢复案例
    85
  • 5
    Linux虚拟化技术：从Xen到KVM
    137
  • 6
    虚拟化数据恢复—ESX SERVER常见故障的数据恢复方案
    57
  • 7
    虚拟化技术：实现资源高效利用和灵活管理的利器
    305
  • 8
    虚拟化数据恢复—VMware ESX SERVER数据恢复案例
    66
  • 9
    网络功能虚拟化（NFV）：定义、原理及应用前景
    270
  • 10
    虚拟化识别USB加密狗|银行U盾等解决方案
    86

    • 相关课程

    更多
  • KVM 虚拟化

    • 相关电子书

    更多
  • 虚拟化异构计算产品发布
  • 基于虚拟化的CI CD流程与基础架构建设
  • 移动虚拟化：360分身大师那些事
    • 下一篇
    通义万相：视觉生成大模型再进化