本文へスキップ
BecomeCoder

C# WPFコース · 第1章 WPF ― デスクトップアプリ開発 · レッスン8

ListBox(一覧・選択)

ブラウザで完結

導入

ListBoxは、項目を一覧で常に表示し、その中から選ばせるコントロールです。ComboBox(開閉式・択一)と違い、選択肢が見えていて、複数選択もできます。

XAMLサンプル(読み物)

<!-- SelectionMode: Single(1つ) / Multiple / Extended(Shift・Ctrlで範囲/追加) -->
<ListBox x:Name="tasks" Height="100" SelectionMode="Single">
    <ListBoxItem Content="買い物" />
    <ListBoxItem Content="掃除" />
    <ListBoxItem Content="洗濯" />
</ListBox>
var selected = tasks.SelectedItem as ListBoxItem;
Console.WriteLine(selected?.Content);

主なプロパティ

  • SelectedItem … 選択中の項目(単一選択時)
  • SelectedItems … 選択中の項目群(複数選択時)
  • SelectionModeSingle/Multiple/Extended
  • ItemsSource … データから項目を生成

主なイベント

  • SelectionChanged … 選択が変わったとき

ComboBox との違い

  • ComboBox:省スペース・開閉式・択一
  • ListBox:一覧が常時見える・複数選択できる

MVVM(実務ではこう書く)

一覧データは**ObservableCollectionをViewModelに持ち、ItemsSourceにバインド**します。ObservableCollectionなら項目の追加・削除が自動で画面に反映されます。

<ListBox ItemsSource="{Binding Tasks}"
         SelectedItem="{Binding SelectedTask, Mode=TwoWay}" />
using System.Collections.ObjectModel;

public ObservableCollection<string> Tasks { get; } = new() { "買い物", "掃除", "洗濯" };
public string? SelectedTask
{
    get => _sel;
    set { _sel = value; OnPropertyChanged(); }
}

試す(ローカル)

  • ItemsSourceをViewModelのObservableCollectionにバインドし、ViewModelからTasks.Add(...)すると一覧が自動で増えることを確認。

まとめ

  • ListBoxは一覧表示+選択(複数選択も可)
  • SelectionModeで単一/複数を切り替え
  • 実務ではObservableCollectionItemsSourceにバインド(追加・削除が自動反映)

次回: 表形式で扱うDataGridです。

実際に動かしてみよう

下のエディタに XAML を書くと、右側のプレビューにその場で WPF 風のUIが描画されます。テキスト入力・チェック・選択はそのまま動き、`{Binding}` で結んだ TextBox と TextBlock は打った文字がリアルタイムで反映されます。本文の XAML を打ち込んだり、属性(Width・Margin・FontSize・色など)を書き換えたりして、レイアウトの変化を確かめながら進めましょう(C# のコードビハインドや Command、ItemsSource などC#側のデータに依存する処理は実行されません。それらは Visual Studio で試します)。

XAML (WPF) プレビュー

書いた XAML をその場で WPF 風の画面に描画する学習用プレビューを読み込みます(本物のWPFではなく、レイアウトとコントロールの見た目・{Binding}の双方向バインディングを再現したものです。C#のコードビハインド/Command は実行されません)。
スクロールして表示された時点でも自動で読み込まれます。