WPF 標準コントロールデモアプリ › ComboBox

ComboBox Inputs

ComboBox は、選択中の項目を表示し、ドロップダウンの一覧を開いて別の項目を選ばせるコントロールです。編集可能にして、文字を入力させることもできます。

Text・SelectedValue・SelectedItem が表すもの

デモアプリの ComboBox はどれも、列挙型の曜日を名前で表示して値でバインドしています。Name と Value を持つ項目を、DisplayMemberPath="Name"・SelectedValuePath="Value" で表示しています。このような項目では、2 つ目の曜日を選ぶと Text も SelectedValue も Monday になりますが、SelectedItem は項目のオブジェクトそのものです。項目のクラスが ToString を上書きしていないので、その文字は名前空間を含む完全な型名になります。計測した項目では ScreenshotCapture.Scenes.ComboBoxDemoScene+EnumItem、デモアプリの項目では WPFStandardControlDemoApp.Common.MarkupExtensions.EnumBindingSourceExtension+EnumItem で、デモアプリの SelectedItem の表示もこれになります。項目のクラスが ToString を上書きしていなければ、SelectedItem を表示するより、SelectedValuePath と SelectedValue をバインドします。

編集可能な ComboBox への入力

IsEditable の既定値は False です。True にして入力すると合う項目で補完され、「tue」は Tuesday になり、SelectedValue も Tuesday になりました。どの項目にも合わない文字は入力のまま残り、「xyz」では SelectedIndex が -1、SelectedValue が null でした。編集可能な ComboBox は既知の値を補完しつつそれ以外も受け付けるので、Text だけでなく SelectedIndex も確かめます。

ShouldPreserveUserEnteredPrefix は、自動補完で入力した文字をそのまま残すかどうかで、既定値は False です。「tue」を入力すると、False では Tuesday、True では tuesday になりました。SelectedValue はどちらも Tuesday でした。

IsEditable と IsReadOnly が両方 True のとき、「tue」を入力しても文字は空のままでしたが、Down キーでは項目(Sunday)が選ばれました。

StaysOpenOnEdit は、利用者が編集欄をクリックしたときに一覧を開いたままにするかどうかで、既定値は False です。開いた編集可能な ComboBox の編集欄を実際のマウスでクリックすると、False では一覧が閉じ、True では開いたままでした。

一覧の開閉と高さ

IsDropDownOpen は既定で TwoWay にバインドされます。デモアプリは Mode を指定せずにチェックボックスにバインドしています。チェックボックスで一覧を開いたあと、Down・Down・Enter を押すと、Monday が選ばれて一覧が閉じ、チェックボックスのチェックも外れました。

MaxDropDownHeight は一覧の高さの上限です。既定値は、計測したマシンの画面の高さの 3 分の 1 の 480 で、7 つの曜日は 141.72 でした。デモアプリの 100 では、一覧は 7 つの曜日に必要な高さより低い 100 になりました。長い一覧では設定します。

一緒に動く ComboBox

IsSynchronizedWithCurrentItem は、選択を一覧のビューの現在の項目に合わせます。同じリストの 2 つの ComboBox を True にすると、ビューの現在の項目が先頭だったため、どちらもインデックス 0 で始まり、一緒に動きました。1 つ目を 3 にすると 2 つ目も 3 になりました。ビューの現在の項目が別の項目なら、その項目が選ばれます。未設定では、どちらも -1 で始まり、互いに独立でした。新しいビューでは最初の項目を選んだ状態で始まることにもなるので、一覧を連動させたいときだけ設定します。

条件 計測値
既定値: IsEditable、IsReadOnly、StaysOpenOnEdit False, False, False
ShouldPreserveUserEnteredPrefix、IsTextSearchEnabled False, True
MaxDropDownHeight(画面の高さ / 3) / IsDropDownOpen が既定で双方向か 480 (480) / True
バインドした CheckBox で開く、Down、Down、Enter: 選ばれた項目 / 開いているか / CheckBox True、Monday / False / False
Text / SelectedValue / SelectedItem.ToString() Monday / Monday / ScreenshotCapture.Scenes.ComboBoxDemoScene+EnumItem
編集可能、"tue" を入力、入力した前方一致を保つ False: Text / SelectedValue Tuesday / Tuesday
続けて "xyz" で上書き: Text / インデックス / SelectedValue xyz / -1 / null
編集可能、"tue" を入力、入力した前方一致を保つ True: Text / SelectedValue tuesday / Tuesday
編集可能 + IsReadOnly: "tue" を入力: Text / インデックス、続けて Down (空) / -1、Sunday / 0
MaxDropDownHeight 既定値: ドロップダウンの高さ 141.72
MaxDropDownHeight 100(デモの初期値): ドロップダウンの高さ 100
開いた状態で編集欄を実際にクリック、StaysOpenOnEdit=False: 開いたままか False
開いた状態で編集欄を実際にクリック、StaysOpenOnEdit=True: 開いたままか True
一覧を共有、IsSynchronizedWithCurrentItem=True: 最初、1 つ目を 3 にした後 0, 0、3, 3
一覧を共有、IsSynchronizedWithCurrentItem=null: 最初、1 つ目を 3 にした後 -1, -1、3, -1

選択、編集、ドロップダウン、同期。.NET 10 / Windows 11 で計測。

デモアプリで試す

デモアプリの ComboBox のページ。左にコントロールの一覧、右に最初の節の IsDropDownOpen

デモアプリの ComboBox のページには、IsDropDownOpen、IsEditable、IsReadOnly、MaxDropDownHeight、Text、StaysOpenOnEdit、ShouldPreserveUserEnteredPrefix、選択のプロパティ、IsSynchronizedWithCurrentItem の欄があります。Text の欄は文字を SelectedValue と並べて表示し、IsSynchronizedWithCurrentItem の欄は 3 つの ComboBox を True で始めるので、すべて Sunday で始まります。各欄の下の「Show Code」リンクで、その欄の XAML を表示できます。ItemsSource のバインドと選択の読み取り方は、下にリンクした記事で扱っています。次の XAML は、ShouldPreserveUserEnteredPrefix の欄(ComboBoxUsageControl.xaml)から、スタイルと周囲の GroupBox を省き、名前空間の宣言を加えたものです。markupextensions はデモアプリ独自のマークアップ拡張の接頭辞です。

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:sys="clr-namespace:System;assembly=mscorlib"
            xmlns:markupextensions="clr-namespace:WPFStandardControlDemoApp.Common.MarkupExtensions">
  <CheckBox x:Name="ShouldPreserveUserEnteredPrefix" Content="ShouldPreserveUserEnteredPrefix" />

  <ComboBox x:Name="ShouldPreserveUserEnteredPrefixComboBox"
            DisplayMemberPath="Name"
            IsEditable="True"
            ItemsSource="{markupextensions:EnumBindingSource EnumType=sys:DayOfWeek}"
            SelectedValuePath="Value"
            ShouldPreserveUserEnteredPrefix="{Binding IsChecked, ElementName=ShouldPreserveUserEnteredPrefix}" />

  <TextBlock Text="{Binding Text, ElementName=ShouldPreserveUserEnteredPrefixComboBox}" />
  <TextBlock Text="{Binding SelectedValue, ElementName=ShouldPreserveUserEnteredPrefixComboBox}" />
</StackPanel>

関連するコントロールと記事

ソースコードと計測の方法

このページの挙動の記述は、すべて .NET 10 / Windows 11 で実際に動かして確かめたものです。計測には、このサイトのスクリーンショット生成ツールの ComboBoxDemoScene を使い、デモアプリと同じ形の項目(各曜日の Name と Value、ToString の上書きなし)で試しました。文字は編集欄へ 1 文字ずつ送り、キーは WPF の入力管理(InputManager)を通して送り、編集欄のクリックは実際のマウスで行いました。高さは、計測したマシンでの値です。

GitHub で ComboBox のソースコードを見る →