質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

2回答

2304閲覧

WPFのItemsControl内の子要素のサイズ調整

nanase

総合スコア123

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2018/04/03 13:16

ItemsControlのItemTemplate内に複数の要素があったときに子要素の幅を自動調整し、HTMLのTableタグのような動きにしたいと思っています。
言葉で説明するのが難しいので、コードを示します。

XML

1<ItemsControl ItemsSource="{Binding ItemList}"> 2 <ItemsControl.ItemTemplate> 3 <DataTemplate> 4 <StackPanel> 5 <Grid> 6 <Grid.ColumnDefinitions> 7 <ColumnDefinition/> 8 <ColumnDefinition/> 9 </Grid.ColumnDefinitions> 10 <TextBlock Grid.Column="0" Text="{Binding Name}"/> 11 <TextBlock Grid.Column="1" Text="{Binding Age}" /> 12 </Grid> 13 </StackPanel> 14 </DataTemplate> 15 </ItemsControl.ItemTemplate> 16</ItemsControl>

上記コードで表示したい内容は表示されるのですが、問題点としては、Nameプロパティの文字数が各行で異なる場合に、各行でAgeプロパティの表示される横位置が揃わないことです。
上記のコードのColumnDefinitionにWidthを直接指定すれば揃うことは揃うのですが、そうするとNameやAgeの文字列長によってサイズ調整が行われず、TextBlockの長さが足りなかったり、余ったりしてしまいます。
HTMLのTableタグでは最も大きいサイズセルを持つ行に他の行が追従してサイズが変化していました。

どうすればTextBlockにバインドしたプロパティの内容によってTextBlockのサイズを調整し、且つ行単位で見たときに横位置を揃えることができるのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

DatsGrid を使うのが一番ですが、SharedSizeGroup という方法もあります。
https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/controls/how-to-share-sizing-properties-between-grids

投稿2018/04/03 15:52

gaya-K

総合スコア449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanase

2018/04/04 12:56

検証する時間が取れず遅くなってしまいました SharedSizeGroupでうまくいきました!ありがとうございます。 以下に検証に使用したコードを書いておきます。 ```XML <ItemsControl ItemsSource="{Binding ItemList}" Margin="0,10,0,0" Grid.IsSharedSizeScope="True"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="ffff"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Name}"/> <TextBlock Grid.Column="1" Text="{Binding Age}"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> ```
guest

0

なぜ DataGrid を使わないのですか?

XML

1<DataGrid ItemsSource="{Binding ItemList}"/>

投稿2018/04/03 13:40

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanase

2018/04/03 22:50

DataGridはセル内のスタイルや構造などをItemsControlのように定義出来ないと思っていたのですが、認識不足だったのでしょうか。 WinFormsのDataGridViewをイメージしていて、DataTableの内容を編集するためのものと思い込んでいるのかもしれません。 DataGridについて調べてみようと思います。
Zuishin

2018/04/03 22:58

Column の CellTemplate を使います。今回の例に於いては別の列になるので必要ありません。
nanase

2018/04/04 13:03

ありがとうございます。検証してみた結果、うまくいきました。 まだItemsControlのような見た目にはなっていませんが、 下記コードでセル内のスタイルの変更を行うことができました。 <DataGrid ItemsSource="{Binding ItemList}" Height="300"> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <CheckBox Content="{Binding Name}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Age}"/> <Separator/> <TextBlock Text="{Binding Age}"/> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> ここからDataGrid特有のスタイルを消していくことで理想の見た目を実現することができそうです。 gaya-Kさんに教えていただいたSharedSizeGroupと併せて、機能要件に合致するものを検討したいと思います。 お付き合いいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問