本文へスキップ
BecomeCoder

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

ComboBox(ドロップダウン)

ブラウザで完結

導入

ComboBoxは、クリックすると選択肢が開くドロップダウンです。RadioButtonと同じ「択一」ですが、選択肢が多いときも省スペースで済みます。

XAMLサンプル(読み物)

<!-- SelectedIndex="0" で最初の項目を初期選択 -->
<ComboBox x:Name="prefBox" Width="150" SelectedIndex="0">
    <ComboBoxItem Content="東京" />
    <ComboBoxItem Content="大阪" />
    <ComboBoxItem Content="福岡" />
</ComboBox>
// 選択中の項目を取得
var item = prefBox.SelectedItem as ComboBoxItem;
string? selected = item?.Content?.ToString();   // 例: "大阪"

主なプロパティ

  • SelectedItem … 選択中の項目(オブジェクト
  • SelectedIndex … 選択中の位置(0始まり、未選択は-1)
  • IsEditabletrueで自由入力も許可
  • ItemsSource … データ(Listなど)から項目を自動生成する入口

主なイベント

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

補足: 項目をXAMLに直書きするのは学習用です。実務では次のMVVM版が基本です。

MVVM(実務ではこう書く)

項目をXAMLに直書きせず、ViewModelのコレクションをItemsSourceにバインドし、選択値もSelectedItemでバインドします。

<ComboBox ItemsSource="{Binding Prefectures}"
          SelectedItem="{Binding SelectedPrefecture, Mode=TwoWay}" />
public List<string> Prefectures { get; } = new() { "東京", "大阪", "福岡" };
public string? SelectedPrefecture
{
    get => _selected;
    set { _selected = value; OnPropertyChanged(); }
}

選択が変わるとSelectedPrefectureが自動更新され、コードビハインドのSelectionChangedが不要になります。

試す(ローカル)

  • 項目直書きからItemsSourceバインドに変え、選択がViewModelのSelectedPrefectureに反映されることを確認。

まとめ

  • ComboBoxは省スペースの択一(ドロップダウン)
  • 選択はSelectedItem/SelectedIndex
  • 実務では項目をItemsSource、選択をSelectedItemでViewModelにバインド

次回: 一覧を表示して選ぶListBoxです。

実際に動かしてみよう

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

XAML (WPF) プレビュー

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