WPFのListBoxコントロールをご解説。要素の追加や削除の方法

.NET開発者のためのブログメディア

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に直接リスト項目を記述する方法です。リストの項目が固定で変わらない時に使用します。

<ListBox Name="ListBox1">
  <ListBoxItem Content="項目１" />
  <ListBoxItem Content="項目２" />
</ListBox>

</ListBox>

実行結果
ListBoxItemを設定

ItemsSourceを使って要素を追加/削除する

データベース等から取得したオブジェクトを、そのままListBoxに表示する時に便利な方法です。ItemsSourceプロパティにオブジェクトのコレクションを設定します。
次のサンプルコードは、IDと氏名(Name)を持つUserクラスをListBoxのItemsSourceに設定する例です。

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;
  }
}

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;

}

実行結果
ItemsSourceで要素を追加

ObservableCollectionを使用することで、ItemsSourceプロパティに設定したコレクションから要素を削除すると、連動してListBoxからも削除されます。

users.RemoveAt(1);

1	users.RemoveAt(1);

実行結果
要素を削除

Items.Addメソッドで要素を追加/削除する

キー値がない動的なデータをListBoxに追加する時に使用する方法です。

ListBox1.Items.Add("項目１");
ListBox1.Items.Add("項目２");

1 2	ListBox1.Items.Add("項目１"); ListBox1.Items.Add("項目２");

実行結果
Items.Addで要素を追加

要素の削除は、次のようにRemoveAtメソッドに削除したい要素のインデックスを指定します。

ListBox1.Items.RemoveAt(1);

1	ListBox1.Items.RemoveAt(1);

ItemTemplateを使ってListBoxをカスタマイズ

ListBoxのItemTemplateを使用すると、リスト要素の背景色を設定したり、一部だけ文字サイズを変えたりなど、デザインを自由にカスタマイズできます。
今回はItemTemplateを使って、色コードのリストを表示できるように、ListBoxをカスタマイズしてみます。

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

<ListBox.ItemTemplate>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

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;
  }
}