다양한 높이의 셀이있는 LongListSelector?

Question

두 열의 이미지를 표시하려면 LongListSelector을 사용하고 싶습니다. 잡기는 이미지의 높이가 다양하고 정적으로 알려진 너비입니다.

레이아웃의 예는 다음과 같습니다

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

내가 (http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093에서) PhotoHubSample라는 이미지의 그리드를 표시하는 프로젝트를 발견, 그러나 이것은 일관된 폭과 높이를 사용합니다 - 믿고 저를 선도하는 내가 원하는 것을 할 수는 없다.

다른 Windows Phone 8 예제는 볼 수 없지만 iPhone의 Pinterest 응용 프로그램은 이러한 종류의 목록을 렌더링합니다. XAML에서이를 수행 할 수있는 방법이 있습니까? ? 나는 대안이있는 경우 LongListSelector을 사용하여 100 % 설정하지 않았습니다.

Answer 1

나는 VariableSizedWrapGrid과 WrapPanel을 시도했지만, 알려진 높이와 너비 (또는 그 비율) 모두를 요구했다. 내 이미지 너비 (전화의 화면 너비의 절반)를 알고 있기 때문에 올바른 배율을 유지하기 위해 이미지의 크기를 조정할 것입니다. 이것은 높이가 가변적이라는 것을 의미했습니다.

이것을 달성하기 위해 'LeftImage'와 'RightImage'의 두 이미지 소스와 계산 된 'YOffset'이있는 ViewModel을 만들었습니다. 내 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> 

는 I 번째 이미지는 수직 오프셋 필요한 Thickness 오브젝트 생성 IValueConverter을 사용하고이 Grid의 경계를 넘칠 수 있도록 Canvas이 포장.

ViewModel 항목을 생성하려면 이미지 목록을 가져 와서 왼쪽과 오른쪽 사이에 간단한 빈 분류 알고리즘을 수행합니다. 항상 왼쪽에 이미지가 있는지 확인합니다. 나는 오프셋의 실행 횟수를 유지하고 ViewModel 컬렉션의 각 항목에 적절하게 설정합니다.

순수 XAML이 아니기 때문에 약간 해키가 나옵니다. 적절한 컨트롤로 바꿀 수는 있지만, 필요한 스크롤 목록에는 문제가 없습니다. 또한 LongListSelector의 모든 이점을 얻으 려니 결국 무한 스크롤을 구현할 것이므로 ViewModel에서 추적해야하는 것은 지속적인 오프셋입니다.

400px 및 600px 이미지의 모습은 아래 (실제 스크린 샷)입니다. 제안에 대한

Answer 2

Kinnara wp 툴킷에서 사용할 수있는 다양한 크기의 랩 격자 컨트롤이 있습니다. 아마도 도움이 될까요? 당신은 그것을 얻을 수있다 at github here...