如何在 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（请参阅下一点）。项目面板模板将是默认的 StackPanel。
5. 创建一个具有 ListItemViewModel 数据上下文的 ListItemView。此视图由 ItemViews 的水平 StackPanel 组成（请参阅下一点）。
6. 创建一个由 ItemViewModel 支持的 ItemView。

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

就像我上面说的，你肯定想改变你的视图/视图模型的名称，我的只是为了演示目的:)

Answer 2

解决方案的基本原理是在ListBox 的ItemTemplate 中使用另一个ItemsControl。这个ItemsControl 应该有一个水平方向的StackPanel 作为它的ItemsPanel。

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

public class TestStringList : List<string>
{
    public TestStringList()
    {
        AddRange(new[] {"Anthony", "Kar", "Martin", "Jon", "Erik", "Darin",
            "Balus", "Mike", "Hans", "Alex", "Anomie", "David" });

    }
}

现在我们想在 ListBox 中显示这个列表，但保留所有首字母相同的名称在同一行。我将使用IValueConverter 的实现来处理我们需要的分组。如果您使用的是 MVVM，那么您的 ViewModel 就可以使用它。

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();
    }
}

这个转换器的输出基本上是IEnumerable<IEnumerable<string>>，这就是我们想要的。外部 ListBox 将枚举外部集合，内部 ItemsControl 将枚举内部字符串集，这些字符串将是一组具有相同首字母的名称。

这里是 xaml:-

<UserControl x:Class="SilverlightApplication1.SimpleGrouping"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SilverlightApplication1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <local:TestStringList x:Key="TestData" />
        <local:Grouper x:Key="grouper" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <ListBox ItemsSource="{Binding Converter={StaticResource grouper}, Source={StaticResource TestData}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" Margin="5" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>