如何在Silverlight中获得这种类型的布局?
-
29-10-2019 - |
题
我有一个列表框,它绑定到一个简单对象列表。如我们所知,默认情况下,列表框将其项目托管为Stackpanel,因此它以这种方式布置项目 通用标签
但是我有一些条件可以检查该项目是水平显示还是垂直显示,因此可以按照这种方式布置项目
例如:- 通用标签
这怎么可能?
((如果您想知道为什么我会需要这样的东西,则示例场景为“ facebook样式更新”,其中,如果用户连续上传3-4张照片,它们并不总是出现在下一行中,但它可能会出现在下一行中)水平显示,而如果他发布事件,则显示在下一行。)
先谢谢您了:)
解决方案
该解决方案的基本原则是在ItemsControl
的ItemTemplate
中使用另一个ListBox
。此基因标记代码应具有水平方向的基因标记作为其基因标记。
这是一个基本示例。让我们从一些非常简单的测试数据开始:- 通用标签
现在,我们希望将此列表显示在ListBox中,但将所有具有相同第一个首字母缩写的名称保留在同一行上。我将使用ItemsControl
的实现来处理我们所需的分组。如果您使用的是MVVM,则可以使用ViewModel。
通用标签
这个转换器的输出基本上是我们想要的StackPanel
。外部列表框将枚举外部集合,而内部ItemsPanel
将枚举内部字符串集合,这将是一组具有相同首字母的名称。
这是xaml:- 通用标签
其他提示
如果使用 MVVM模式我会做这样的事情:
- 为列表框所在的视图创建一个ViewModel。此VM包含一个
ListItemViewModel
实例的集合(请参阅下一点) - 创建一个名为ListItemViewModel的ViewModel(根据您的域,给它一个更合适的名称)。此视图模型包含ItemViewModel实例的集合(请参阅下一点)。
- 创建一个名为ItemViewModel的ViewModel。这些中的每一个都支持列表中的单个项目。根据您的域为它命名一个更合适的名称。
- 创建一个包含列表框的视图。将您的列表框绑定到VM中的ListItemViewModels集合。此列表框的项目模板将是ListItemView(请参阅下一点)。项目面板模板将是默认的StackPanel。
- 创建一个具有ListItemViewModel数据上下文的ListItemView。该视图由ItemViews的水平StackPanel组成(请参阅下一点)。
- 创建一个由ItemViewModel支持的ItemView。
您的视图看起来像这样,每个视图都有一个对应的ViewModel。
就像我在上面说过的那样,您肯定要更改视图/视图模型的名称,我的仅用于演示目的:)
不隶属于 StackOverflow