0

を使用しLongListSelectorて 2 列の画像を表示しようとしていますが、問題は、画像の高さがさまざまで、既知の幅が静的であることです。

レイアウトの例は次のとおりです。

+--------+ +--------+
|  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

VariableSizedWrapGridandを試してみましたWrapPanelが、どちらも既知の高さと幅 (またはその比率) が必要でした。画像の幅 (電話の画面幅の半分) を知っていたので、画像の高さをサイズ変更して、正しいスケーリングを確保します。これは、高さが可変であることを意味しました。

これを実現するために、「LeftImage」と「RightImage」の 2 つの画像ソースと、計算された「YOffset」を持つ ViewModel を作成しました。これで、my の各アイテムに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>

を使用して 2 番目のイメージの垂直方向のオフセットに必要なオブジェクトIValueConverterを作成し、これを でラップして、 の境界を越えてこぼれるようにしました。ThicknessCanvasGrid

ViewModel アイテムを生成するために、画像のリストを取得し、左辺と右辺の間で単純なビン ソート アルゴリズムを実行し、一致する画像が常に左側にあることを確認します。オフセットの実行中のカウントを保持し、ViewModel コレクションの各アイテムに適切に設定します。

純粋な XAML ではないため、少しハックです。適切なコントロールに変換できると確信していますが、必要な 1 つのスクロール リストではうまく機能します。のすべての利点も得られLongListSelectorます。最終的には無限スクロールを実装する予定なので、ViewModel で追跡する必要があるのは進行中のオフセットだけです。

400px と 600px の画像でどのように見えるかを以下に示します (実際のスクリーンショット)。

2列レイアウトのWP8

于 2013-10-25T17:03:12.980 に答える