Windows 8 系列（九）：关于VariableSizedWrapGrid与WrapGrid 对Visibility变化而引起的布局变化的支持...
最近好久没有写博客了，今天分享一下关于工作中遇到的关于Visibility变化而引起的布局变化的问题。
先以一个小例子开场，需求： 新浪微博 添加账号界面中需要有“登陆”按钮，当用户点击此按钮后，需要把按钮换成ProgressRing。如果登陆不成功，弹出错误信息并把ProgressRing替换成“登陆”按钮。
如下图：
在按钮与ProgressRing切换的时候我们的一般做法是两种：
1. 用两个Visibility属性隐藏其中按钮，然后再显示；
2. 删除按钮、添加ProgressRing；删除ProgressRing，添加按钮；
第二种比较浪费资源，所以大家都把第一种作为较为常用的方法，即： 用Visibility属性来控制某些UI元素的隐藏与否，特别是需要重复切换的。
现在切入正题，先上图：
想必玩过Win8开发的童鞋们一定不陌生，这是在VS中创建GridView模版的应用，启动后的首页面。
需求是：点击某一项，使其从界面中消失，但是布局不变，即：如果我任意删除一个单元，后面的单元会补充到前面去，中间不会有空白空间。
乍一看跟上面例子的需求类似，可以在数据集的单元数据中添加个Visibility类型的属性，通过绑定到ItemTemplate中的最外层布局控件上来实现隐藏。但是你真的这么做了，却发现结果是这样的：
Wow！ 为什么? 如果你看看GridView的代码，并试图修改点内容，或许会有所发现：
<GridViewx:Name="itemGridView"AutomationProperties.AutomationId="ItemGridView"AutomationProperties.Name="Grouped Items"Grid.RowSpan="2"Padding="116,137,40,46"ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"ItemTemplate="{StaticResource Standard250x250ItemTemplate}"SelectionMode="None"IsSwipeEnabled="false"IsItemClickEnabled="True"ItemClick="ItemView_ItemClick"><GridView.ItemsPanel><ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/></ItemsPanelTemplate></GridView.ItemsPanel><GridView.GroupStyle><GroupStyle><GroupStyle.HeaderTemplate><DataTemplate><Grid Margin="1,0,0,6"><ButtonAutomationProperties.Name="Group Title"Click="Header_Click"Style="{StaticResource TextPrimaryButtonStyle}" ><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /><TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/></StackPanel></Button></Grid></DataTemplate></GroupStyle.HeaderTemplate><GroupStyle.Panel><ItemsPanelTemplate><VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/></ItemsPanelTemplate></GroupStyle.Panel></GroupStyle></GridView.GroupStyle></GridView>关键因素1：<GroupStyle.Panel>中的 VariableSizedWrapGrid
如果把<GroupStyle.Panel>中的 VariableSizedWrapGrid替换成<StackPanel Orientation="Horizontal" Margin="0,0,80,0"/>，你会发现效果变成了这样：
Group Title 1 中的 Item Titile 2的项被删除掉了以后，后面的元素都向前移动了，证明VariableSizedWrapGrid控件内部对Visibility变化导致的布局变化的支持度不是很好。（你注意到在ItemTitile2项被隐藏后，为什么中间的空间会比较大，不像其他元素一样？ 这个留给大家去研究吧，卖个关子。。。）
关键因素2：WrapGrid
或许你的应用中不需要分组，也会出现类似的情况，那可能是这样的：
<GridViewx:Name="itemGridView"AutomationProperties.AutomationId="ItemGridView"AutomationProperties.Name="Grouped Items"Grid.RowSpan="2"Padding="116,137,40,46"ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"ItemTemplate="{StaticResource Standard250x250ItemTemplate}"SelectionMode="None"IsSwipeEnabled="false"IsItemClickEnabled="True"ItemClick="ItemView_ItemClick"><GridView.ItemsPanel><ItemsPanelTemplate> <WrapGrid Orientation="Vertical"/></ItemsPanelTemplate></GridView.ItemsPanel></GridView>
同样的，隐藏某一项后，后面的元素并不会填充被隐藏元素的空间，而只是隐藏了那一项，剩下的位置不动。。。
那你试试把WrapGrid换成 VirtualizingStackPanel，问题解决了。
你或许在问，如果这样改，空白的空间是解决了，但是我们的整体布局也被打乱了。。。
没错，其实这些都只是下下策，更多的是为了告诉大家，这几个控件对Visibility属性变化而引起的布局变化的支持程度，而相比较之下，或许从数据源中删除数据才是更好的解决方案，即解决了空白空间的问题，也解决了布局被打乱的问题。
转载于:https://www.cnblogs.com/lihaiyin/archive/2013/01/04/2843953.html
Windows 8 系列（九）：关于VariableSizedWrapGrid与WrapGrid 对Visibility变化而引起的布局变化的支持...相关推荐
- Hadoop系列 (九)：Sqoop详细介绍
文章目录 Hadoop系列文章 Sqoop简介 Sqoop架构 Sqoop数据导入 Sqoop数据导出 Sqoop安装部署 版本介绍 前提环境 下载 安装配置 Sqoop的使用 构建测试数据 将MyS ...
- Keil MDK STM32系列(九) 基于HAL和FatFs的FAT格式SD卡TF卡读写
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...
- 【分布式事务系列九】聊聊分布式事务
为什么80%的码农都做不了架构师?>>> #0 系列目录# 分布式事务 [分布式事务系列一]提出疑问和研究过程 [分布式事务系列二]Spring事务管理器PlatformTra ...
- 学习ASP.NET Core Razor 编程系列九——增加查询功能
原文:学习ASP.NET Core Razor 编程系列九--增加查询功能 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.N ...
- Exchange Server2013 系列九：常规配置
Exchange Server2013 系列九:常规配置(一) 杜飞 经过前面的部署之后,我们的客户端访问角色和邮箱服务器角色都已经实现了高可用,但目前还不能正常使用,需要对服务器进行常规的配置,主要 ...
- 数学之美 系列九 -- 如何确定网页和查询的相关性
数学之美 系列九 -- 如何确定网页和查询的相关性 [我们已经谈过了如何自动下载网页.如何建立索引.如何衡量网页的质量(Page Rank).我们今天谈谈如何确定一个网页和某个查询的相关性.了解了这四 ...
- Windows Mobile系列手机操作系统
与其它掌上型电子设备的操作系统不同的是,Windows Mobile系列操作系统是在微软计算机的Windows操作系统上变化而来的,因此,它们的操作界面非常相似,熟悉计算机Windows系列操作系统的 ...
- JAVA面试常考系列九
转载自 JAVA面试常考系列九 题目一 RMI架构层的结构是如何组成的? RMI体系结构由三层组成,分别是: 存根和骨架层(Stub and Skeleton Layer) 远程引用层(Remote ...
- jvm系列(九):如何优化Java GC
转载自 jvm系列(九):如何优化Java GC「译」 本文翻译自Sangmin Lee发表在Cubrid上的"Become a Java GC Expert"系列文章的第三篇&l ...
最新文章
- jquery将html转为pdf文件,通过Jquery将HTML Div转换为PDF
- 2021年春季学期-信号与系统-第二次作业参考答案-第一小题
- Java核心技术点之集合框架
- mattermost
- Android-使用嵌入式SQLite
- 【2012百度之星/初赛下】C:度度熊的礼物
- 判断 小程序_第五届美亚杯赛前必备：从案情资料到小程序解题
- OV7725的帧率和PCLK寄存器设置
- 今天才知道还有这个地址 MS 的
- 编译编译时，用不到的库，一定不要链接
- java计算机毕业设计企业员工工资管理系统源码+系统+数据库+lw文档+mybatis+运行部署
- 安利一款SOLIDWORKS插件，可一键帮你分离配置那种！
- Symbian使用TTime类获取系统时间并转换为描述符
- 41家大公司年度福利比较 大公司福利档案揭秘
- LCD 液晶显示器 ---------- LTDC 控制器
- 我给梵高当Tony：这三款AI绘图工具，就离谱
- RadiAnt DICOM Viewer 2021.1中文版
- VMware vSphere 虚拟化实施手册及故障案例 | 多图
- 数论——唯一分解定理
- mysql企业备份工具(MEB)之mysqlbackup安装及使用