LongListSelector具有不同高度的单元格？

Question

我希望使用LongListSelector来显示两列图像，捕获的是图像具有各种高度和静态已知宽度。

布局的一个例子是：

+--------+ +--------+
|  img1  | |  img2  |
|        | |        |
+--------+ |        |
+--------+ |        |
|  img3  | +--------+
|        | +--------+
|        | |  img4  |
|        | |        |
+--------+ |        |
           +--------+

我找到了一个显示图像网格的项目，名为PhotoHubSample（来自http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093），但是它使用了一致的宽度和高度 - 让我相信它不可能做我想要的。

我看不到任何其他Windows Phone 8示例，但是如果你想看一个真实世界的例子 - iPhone上的Pinterest应用程序呈现这种列表......有没有办法在XAML中做到这一点？如果有替代方案，我不会100％使用LongListSelector。

Answer 1

我尝试了VariableSizedWrapGrid和WrapPanel，但两者都需要已知的高度和宽度（或其比例）。因为我知道我的图像宽度（手机屏幕宽度的一半），我会调整图像的高度，以确保正确缩放。这意味着高度是可变的。

为了达到这个目的，我创建了一个ViewModel，它有两个图像源：'LeftImage'和'RightImage'以及一个计算的'YOffset'。现在LongListSelector中的每个项目都有以下XAML;

    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <Grid Margin="0,0,0,17">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="14" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding LeftImageUri}" Margin="0,0,0,0" HorizontalAlignment="Left" Stretch="None"/>
                <Canvas Grid.Column="2">
                    <Image Source="{Binding RightImageUri}" Stretch="None" Margin="{Binding YOffset, Converter={StaticResource ThicknessTopConverter}}"/>
                </Canvas>
            </Grid>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>

我使用IValueConverter创建第二张图片的垂直偏移所需的Thickness对象，并将其包裹在Canvas中，以便它可以溢出Grid的边界{1}}。

要生成我的ViewModel项目，我会获取图像列表并在左侧和右侧之间执行简单的bin排序算法，确保我始终在左侧有一个图像来匹配。我保留了偏移量的运行计数，并对ViewModel集合中的每个项目进行了适当的设置。

它有点hacky，因为它不是纯XAML，我确信我可以把它变成一个合适的控件，但这适用于我需要的一个滚动列表。我也获得了LongListSelector的所有好处，我将最终实现无限滚动，所以我需要在ViewModel中跟踪的是正在进行的偏移。

下面是400px和600px图像的视图（实际屏幕截图）;

Answer 2

Kinnara wp工具包中有一个可变大小的包裹网格控件......也许它有帮助吗？你可以得到它at github here...