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

我正在寻找使用LongListSelector显示两列图像，其中的问题是图像具有各种高度和静态已知宽度。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。

来源

2013-09-21 SimonM

我试过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的边界。

要生成我的ViewModel项目，我需要列出图像并在左侧和右侧之间执行一个简单的bin排序算法，以确保我总是在左侧有一个图像进行匹配。我保持偏移的运行计数，并适当地设置ViewModel集合中的每个项目。

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

下面是一张400px和600px图片的视图（实际截图）;

WP8 with Two Column Layout

来源

2013-10-25 17:03:12 SimonM

您的解决方案看起来不错！ GitHub上的用户控件或测试示例proj会很棒... – Depechie

谢谢！好主意 - 我相信随着我在接下来的几个星期里发现一些错误，这个（有点混乱的）代码会有所改进。看起来我现在需要在两个地方的列表，所以也许'UserControl'会出现...感谢您的所有建议，我会在我上传样本时更新此答案。 – SimonM

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

来源

2013-09-23 11:06:53 Depechie

感谢您的建议 - 我会在接下来的几天看看，如果这能掌握我的需求。希望它仍然会有很长的名单。如果结果不是特别敏感，我将不得不退回到一个简单的列列表。 – SimonM

让我们贴出！ – Depechie

不幸的是，这对我所需要的不起作用...'ItemHeight'和'ItemWidth'需要在'VariableSizedWrapGrid'上设置，所以这对于已知比例（例如Windows 8中的开始屏幕）但是直到运行时我才知道图像的高度，而且它们在此控件中打破了布局计算的不同。（还是）感谢你的建议。任何其他想法？ – SimonM

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

回答

相关问题