.NET開発者のためのブログメディア
WPFのListBoxコントロールをご解説。要素の追加や削除の方法
WPFのListBoxは、任意の型のデータをリスト形式で表示し、選択するためのコントロールです。
リストの要素には、文字列/イメージなどの様々な型のデータを表示できます。この記事では、ListBoxの概要と基本的な使い方、カスタマイズ方法を解説します。
- SE
- ListBoxはどんな時に使用するコントロールですか？
- PL
- 任意のデータをリスト表示して、ユーザーに１つまたは複数選択させる時に使用するコントールです。
実行環境
・Windows 10
・Visual Studio 2019（.NET Framework 4.8）
目次
WPFのListBoxコントロール
WPFのListBoxコントロールは、ItemsControlから派生したクラスです。ItemsControlと同様に、任意のデータをリスト表示し、１つまたは複数選択する時に使用するコントロールです。 また、ItemTemplateを使って、リスト要素に背景色を設定したり、複数のコントロールを組み合わせてリスト表示したりできます。
3つの選択モード
ListBoxには、次のとおり3つの選択モードがあり、SelectionModeプロパティにユーザーが一度に選択できる項目の数を設定します。
| SelectionMode | 説明 |
|---|---|
| Single | 単一項目のみが選択できるモード。一度に１つしか選択できない。 |
| Multiple | クリックした項目を複数選択できるモード。 |
| Extended | CTRLキーを押しながな項目をクリックすると複数選択できる。また、Shiftキー押しながら連続した複数の要素を選択できる。 |
ListBoxのデータ表示と要素の追加・削除
ListBoxに要素を追加/削除する方法には、次の3つの方法があります。
- ・XAMLで、ListBoxItem要素を設定する
- ・ItemsSourceプロパティに配列やコレクションを設定する（データバインディング）
- ・Items.Addメソッドを使って要素を追加する
サンプルコードを確認しながら、それぞれの方法について見ていきましょう。
XAMLでListBoxItem要素を設定する
XAMLに直接リスト項目を記述する方法です。リストの項目が固定で変わらない時に使用します。
|
1 2 3 4 |
<ListBox Name="ListBox1"> <ListBoxItem Content="項目１" /> <ListBoxItem Content="項目２" /> </ListBox> |
実行結果
ItemsSourceを使って要素を追加/削除する
データベース等から取得したオブジェクトを、そのままListBoxに表示する時に便利な方法です。ItemsSourceプロパティにオブジェクトのコレクションを設定します。
次のサンプルコードは、IDと氏名(Name)を持つUserクラスをListBoxのItemsSourceに設定する例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
using System.Collections.ObjectModel; public partial class MainWindow : Window { public MainWindow() { ObservableCollection<User> users = new ObservableCollection<User>(); users.Add(new User() { Id = 1, Name = "山田 太郎" }); users.Add(new User() { Id = 1, Name = "山田 次郎" }); ListBox1.DisplayMemberPath = "Name"; ListBox1.SelectedValuePath = "Id"; ListBox1.ItemsSource = users; } } |
実行結果
ObservableCollectionを使用することで、ItemsSourceプロパティに設定したコレクションから要素を削除すると、連動してListBoxからも削除されます。
|
1 |
users.RemoveAt(1); |
実行結果
Items.Addメソッドで要素を追加/削除する
キー値がない動的なデータをListBoxに追加する時に使用する方法です。
|
1 2 |
ListBox1.Items.Add("項目１"); ListBox1.Items.Add("項目２"); |
実行結果
要素の削除は、次のようにRemoveAtメソッドに削除したい要素のインデックスを指定します。
|
1 |
ListBox1.Items.RemoveAt(1); |
ItemTemplateを使ってListBoxをカスタマイズ
ListBoxのItemTemplateを使用すると、リスト要素の背景色を設定したり、一部だけ文字サイズを変えたりなど、デザインを自由にカスタマイズできます。
今回はItemTemplateを使って、色コードのリストを表示できるように、ListBoxをカスタマイズしてみます。
|
1 2 3 4 5 6 7 8 9 10 |
<ListBox Name="ListBox1"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Border Width="20" Height="10" Background="{Binding Brush}"/> <TextBlock Text="{Binding Name}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
using System; using System.Windows; using System.Windows.Media; using System.Collections.ObjectModel; public partial class MainWindow : Window { public MainWindow() { // 変更通知してくれるObservableCollectionを使用すると、コレクションに要素を追加・削除すると、自動的にListBoxにも反映します var colorList = new ObservableCollection<ColorInfo>(); // 色データをObservableCollectionに設定 colorList.Add(new ColorInfo { Brush = Brushes.LimeGreen, Name = "#32CD32" }); colorList.Add(new ColorInfo { Brush = Brushes.MediumBlue, Name = "#0000CD" }); colorList.Add(new ColorInfo { Brush = Brushes.MistyRose, Name = "#FFE4E1" }); colorList.Add(new ColorInfo { Brush = Brushes.OrangeRed, Name = "#FF4500" }); // ListBoxのItemsSourceプロパティに、上で作成した色データリストを設定 this.ListBox1.ItemsSource = colorList; } } |
実行結果
- SE
- ItemTemplateを使えばデザインが自由自在で便利ですね。
- PL
- そうですね！ゲームアプリのような凝ったデザインもできるので、いろいろ試してみてください。
WPFのListBoxはデザインが自由自在
ListBoxの基本的な使い方と、デザインをカスタマイズする方法を解説しました。
Windows Formsアプリに比べ、WPFをはじめとするXAMLアプリは、初心者には理解が難しい面もありますが、柔軟なレイアウトシステムにより自由なデザインのアプリが作成可能になります。
