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

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アプリは、初心者には理解が難しい面もありますが、柔軟なレイアウトシステムにより自由なデザインのアプリが作成可能になります。

>>>C#の案件を探すならFEnet .NET Navi

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

公開:'20/03/17 更新:'21/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

公開:'20/03/16 更新:'21/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

公開:'20/03/05 更新:'20/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

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

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

WPFのListBoxコントロール

3つの選択モード

ListBoxのデータ表示と要素の追加・削除

XAMLでListBoxItem要素を設定する

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

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

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

WPFのListBoxはデザインが自由自在

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務