我如何在 Silverlight 中获得这种类型的布局？

Question

我有一个列表框，它绑定到一个简单对象的列表。正如我们所知，默认情况下列表框将其项目托管为 Stackpanel，因此它以这种方式布置项目

item1
item2
item3
item4
item5
item6

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

例如：-

item1
item2
item3 item4 item 5
item6

怎么可能做到这一点？

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

提前致谢:)

Answer 1

如果使用 MVVM 模式 我会做这样的事情：

1. 为列表框所在的视图创建一个 ViewModel。此 VM 包含 ListItemViewModel 实例的集合（请参阅下一点）
2. 创建一个名为 ListItemViewModel 的 ViewModel（给它一个更合适的名称，根据您的域）。该视图模型包含 ItemViewModel 实例的集合（请参阅下一点）。
3. 创建一个名为 ItemViewModel 的 ViewModel。其中每一个都支持列表中的单个项目。根据您的域为其指定一个更合适的名称。
4. 创建一个包含列表框的视图。将列表框绑定到 VM 中的 ListItemViewModel 集合。此列表框的项目模板将是 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" });

    }
}

现在我们想要在列表框中显示此列表，但将具有相同首字母缩写的所有名称保留在同一行。我将使用 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> 这就是我们想要的。外部 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>