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具有不同高度的單元格？

回答

相關問題