Silverlightでこのタイプのレイアウトを取得するにはどうすればよいですか?
-
29-10-2019 - |
質問
リストボックスがあり、単純なオブジェクトのリストにバインドされています。リストボックスにはデフォルトでアイテムがStackpanelとしてホストされているため、この方法でアイテムがレイアウトされます。 ジェネラコディセタグプレ
ただし、アイテムを水平に表示するか垂直に表示するかを確認するための条件がいくつかあるため、アイテムをこのように配置できます。
例:- ジェネラコディセタグプレ
これを行うにはどうすればよいですか?
(なぜそのようなものが必要になるのか疑問に思っている場合、シナリオの例は「Facebookスタイルの更新」です。ユーザーが3〜4枚の写真を継続的にアップロードすると、必ずしも次の行に表示されるとは限りませんが、水平に表示されますが、イベントを投稿すると次の行に表示されます。)
よろしくお願いします:)
解決
ソリューションの基本は、ItemsControl
のItemTemplate
で別のListBox
を使用することです。このItemsControl
には、StackPanel
として水平方向のItemsPanel
が必要です。
これが基本的な例です。いくつかの非常に単純なテストデータから始めましょう:- ジェネラコディセタグプレ
ここで、このリストをListBoxに表示しますが、最初のイニシャルが同じであるすべての名前を同じ行に保持します。必要なグループ化を処理するために、IValueConverter
の実装を使用します。MVVMを使用している場合は、ViewModelにこれを引き継がせます。
ジェネラコディセタグプレ
このコンバーターの出力は、基本的に私たちが望むジェネラコディセタグコードです。外側のListBoxは外側のセットを列挙し、内側のIEnumerable<IEnumerable<string>>
は同じイニシャルを持つ名前のセットになる文字列の内側のセットを列挙します。
これがxamlです:- ジェネラコディセタグプレ
他のヒント
MVVMを使用している場合パターン私は次のようなことをします:
- リストボックスが含まれているビューのViewModelを作成します。このVMには、
ListItemViewModel
インスタンスのコレクションが含まれています(次のポイントを参照) - ListItemViewModelというViewModelを作成します(ドメインに基づいて、より適切な名前を付けます)。このビューモデルには、ItemViewModelインスタンスのコレクションが含まれています(次のポイントを参照)。
- ItemViewModelというViewModelを作成します。これらはそれぞれ、リスト内の1つのアイテムを裏付けています。ドメインに基づいて、これにより適切な名前を付けてください。
- リストボックスを含むビューを作成します。リストボックスをVM内のListItemViewModelsのコレクションにバインドします。このリストボックスのアイテムテンプレートはListItemViewになります(次のポイントを参照)。アイテムパネルテンプレートがデフォルトのStackPanelになります。
- ListItemViewModelデータコンテキストを持つListItemViewを作成します。このビューは、ItemViewの水平StackPanelで構成されています(次のポイントを参照)。
- ItemViewModelに基づくItemViewを作成します。
ビューは次のようになり、それぞれに対応するViewModelがあります。
上で述べたように、ビュー/ビューモデルの名前は間違いなく変更する必要があります。私のものはデモンストレーションのみを目的としています:)