xaml - マルチエントリラッピング Xaml グリッド

Question

UWP アプリでは、画面の利用可能なすべての水平方向のスペースを使用する XAML グリッドスタイルコントロールの動的レイアウトが必要です。たとえば、電話のような小さな画面を使用している場合、リストをこのように画面を下にスクロールするだけです。

ただし、より広い画面を使用している場合は、次のスクリーンショットのようにレイアウトを調整したいと考えています。

これを達成するために使用できる Visual Studio 2015 UWP コントロールに関する提案はありますか?? おそらく VariableSizedWrapGrid と Grid コントロールの組み合わせを考えていますが、それを理解できないようです。任意の提案をいただければ幸いです。

編集:すべてのアイテムが同じサイズになるわけではありません。一部のデバイス名は長くなり、2 行に折り返されます。さまざまなアイテムサイズを処理するコントロールが必要で、画面サイズに基づいて 1 列、2 列、3 列などのレイアウトが必要です。

score 0 · Accepted Answer

表示されているスクリーンショットから、すべてのアイテムが同じサイズであるため、VariableSizedWrapGrid. コントロールを使用するだけで、GriView説明したようにアイテムが自動的にラップされます。

1 2 3

4 5 6

7

<GridView ItemsSource="{Binding YourItems}"
          ItemTemplate="{StaticResource YourItemTemplate}">

単一のアイテムのレイアウトは YourItemTemplate で指定され、DataTemplateすべて設定されています。

更新:質問が可変サイズの項目に変更されたため、より複雑になりました。

ListView は、アイテムのさまざまな高さの自動スケーリングを提供します。ただし、1 つの列に限定されます。
VariableSizedWrapGrid には、使用される # 行/列の「割り当て」が必要です。最大限の柔軟性を得るために、セルの高さを 1 ピクセルにし (パフォーマンスヒットに注意してください!!)、必要な高さを割り当てることができます。したがって、いくつかの計算を追加する必要があり、テキストがレンダリングされるのに何行かかるかは 100% わかりません (ただし、文字数に基づいて適切に推測することはできます)。

以前、完全に柔軟なレイアウトのために 2 番目のアプローチを使用したことがありますが、必ずしも 100% 完璧ではありませんでした (ほとんどのフォントでは、M は I よりも多くのスペースを必要とするため)。サイズを計算するときにそれも考慮したくない場合を除きます。

テキストボックスを表示画面の外にレンダリングする (座標 -500/-500 など) など、他にもたくさんのハックがあります。レンダリングされたサイズを確認し、それを VariableSizedWrapGrid に使用します。

私の結論は次のとおりです。

2 または 3 のいずれかを選択します。これは、実装が簡単であり、同じサイズのタイルの方が可変サイズのタイルよりも概観 (整列されたテキスト) が優れているためです。

xaml - マルチエントリ ラッピング Xaml グリッド