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

C#WPF

.NET
C#
WPF
プログラミング言語

公開日時: 2020-09-14 　更新日時: 2022-06-09

この記事でわかること

WPFのListBoxは、任意の型のデータをリスト形式で表示し、選択するためのコントロールです。
リストの要素には、文字列/イメージなどの様々な型のデータを表示できます。この記事では、ListBoxの概要と基本的な使い方、カスタマイズ方法を解説します。

システム エンジニア: ListBoxはどんな時に使用するコントロールですか？

プロジェクト リーダー: 任意のデータをリスト表示して、ユーザーに１つまたは複数選択させる時に使用するコントールです。

実行環境
・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>

実行結果

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;

}

実行結果

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("項目２");

実行結果

要素の削除は、次のように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;

}

実行結果

システム エンジニア: ItemTemplateを使えばデザインが自由自在で便利ですね。

プロジェクト リーダー: そうですね！ゲームアプリのような凝ったデザインもできるので、いろいろ試してみてください。

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

ListBoxの基本的な使い方と、デザインをカスタマイズする方法を解説しました。
Windows Formsアプリに比べ、WPFをはじめとするXAMLアプリは、初心者には理解が難しい面もありますが、柔軟なレイアウトシステムにより自由なデザインのアプリが作成可能になります。

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

WPFのListBoxコントロール

3つの選択モード

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

XAMLでListBoxItem要素を設定する

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

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

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

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

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

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

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

WPFのListBoxコントロール

3つの選択モード

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

XAMLでListBoxItem要素を設定する

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

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

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

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

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

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

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

【C#活用】WPFでMVVMパターンを実装する際の注意点

WPFのデータバインディングとは？C#によるデータの操作方法

C#とWPFで実装するListView。項目を追加する方法

WPFのDataGridの使い方。データを表示・カスタマイズする方法

WPFとVisual Studioで画面遷移を実装する方法