0

我正在寻找使用LongListSelector来显示两列图像,问题是图像具有不同的高度和静态的已知宽度。

布局的一个例子是:

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

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

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

4

2 回答 2

1

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

为了实现这一点,我创建了一个 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>

我使用 anIValueConverter创建Thickness第二张图像的垂直偏移所需的对象,并将其包裹在 a 中Canvas,以便它可以溢出Grid.

为了生成我的 ViewModel 项目,我获取图像列表并在左侧和右侧之间进行简单的 bin 排序算法,确保左侧总是有一个图像可以匹配。我保留了偏移量的运行计数,并在 ViewModel 集合中的每个项目上进行了适当的设置。

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

A view of what it looks like with 400px and 600px images is below (actual screenshot);

WP8 with Two Column Layout

于 2013-10-25T17:03:12.980 回答
0

Kinnara wp 工具包中有一个可变大小的环绕网格控件......也许它可以提供帮助?你可以在 github 上得到它...

于 2013-09-23T11:06:53.473 回答