如何在Silverlight中获得此类布局？

Question

我有一个列表框，它绑定到一个简单对象列表。我们知道列表框默认情况下它的项目主机作为Stackpanel，所以它以这种方式布局项目

item1
item2
item3
item4
item5
item6

但是我有一些条件可以检查项目是水平还是垂直显示，因此项目可以这种方式布局

例如： -

item1
item2
item3 item4 item 5
item6

怎么可能这样做？

（如果你想知道为什么我会需要这样的东西，一个示例场景将是“facebook样式更新”，如果用户连续上传3-4张照片，它们并不总是出现在下一行但它可能水平显示，而如果他发布一些事件，它会出现在下一行。）

提前致谢：）

Answer 1

如果使用MVVM pattern，我会这样做：

1. 为列表框所在的视图创建ViewModel。此VM包含ListItemViewModel个实例的集合（请参阅下一点）
2. 创建一个名为ListItemViewModel的ViewModel（根据您的域名给它一个更合适的名称）。此视图模型包含ItemViewModel实例的集合（请参阅下一点）。
3. 创建一个名为ItemViewModel的ViewModel。其中每个都支持列表中的单个项目。根据您的域名为其提供更合适的名称。
4. 创建包含列表框的视图。将列表框绑定到VM中的ListItemViewModels集合。此列表框的项模板将是ListItemView（请参阅下一点）。 items面板模板将是默认的StackPanel。
5. 创建一个ListItemView，它具有ListItemViewModel数据上下文。此视图由ItemViews的水平StackPanel组成（请参阅下一点）。
6. 创建一个由ItemViewModel支持的ItemView。

您的视图看起来像这样，每个视图都有一个相应的ViewModel。

就像我上面所说，你肯定想要更改你的观点/视图模型的名称，我的仅用于演示目的：）

Answer 2

解决方案的基本原理是在ItemsControl的{​​{1}}中使用其他ItemTemplate。此ListBox应该具有水平导向ItemsControl作为其StackPanel。

这是一个基本的例子。让我们从一些非常简单的测试数据开始： -

ItemsPanel

现在我们要在ListBox中显示此列表，但保留在同一行上具有相同第一个首字母的所有名称。我将使用public class TestStringList : List<string> { public TestStringList() { AddRange(new[] {"Anthony", "Kar", "Martin", "Jon", "Erik", "Darin", "Balus", "Mike", "Hans", "Alex", "Anomie", "David" }); } } 的实现来处理我们需要的分组。如果您正在使用MVVM，那么您可以使用ViewModel。

IValueConverter

此转换器的输出基本上是public class Grouper : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return ((IEnumerable<string>)value).OrderBy(s => s).GroupBy(s => s[0]); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } ，这正是我们想要的。外部ListBox将枚举外部集合，内部IEnumerable<IEnumerable<string>>将枚举内部字符串集合，这些字符串将是具有相同初始值的一组名称。

这是xaml： -

ItemsControl