【C#】2つのコンボボックスを使って、コンボボックスソースを切り替えたい

 画面に2つのコンボボックスがあったとして、

　・1つ目のコンボボックスでアイテムを選択する

　・2つ目のコンボボックスのアイテムに、1つ目で選択したデータに関連するアイテムのみを設定

みたいなシチュエーションがあったとします。そんな場合はどうするかメモ。

【画面イメージ（適当）】

カテゴリーのコンボボックスでカテゴリーを選択すると、品名のコンボボックスに選択されたカテゴリーに属する品名のみを表示したい感じです。

それぞれのコンボボックスにはList<KeyValuePair<string, string>>型を使用するとします。

【カテゴリーの種類（これまた適当）】

	/// <summary>
	/// カテゴリーの辞書を作成します。
	/// </summary>
	/// <returns></returns>
	private Dictionary<string, string> CreateCategoryDictionay()
	{
	return new Dictionary<string, string>
	{
	{string.Empty, string.Empty },
	{ "10", "野菜" },
	{ "20", "果物"},
	{ "30", "にく" },
	{ "40", "さかな" },
	{ "50", "おかし" }
	};
	}

view raw Category hosted with ❤ by GitHub

・先頭に空白行を追加しています。

【品名の種類（適当）】

	/// <summary>
	/// 各カテゴリーに属するすべてのアイテム辞書を作成します。
	/// </summary>
	/// <returns></returns>
	private Dictionary<string,string> CreateAllItemDictionary()
	{
	return new Dictionary<string, string>
	{
	{ "10001", "きゅうり" },
	{ "10002", "にんじん" },
	{ "10003", "たまねぎ" },
	{ "10004", "だいこん" },
	{ "10005", "かぼちゃ" },
	{ "10006", "なす" },
	{ "10007", "にんにく" },
	{ "10008", "ピーマン" },
	{ "10009", "パプリカ" },
	{ "10010", "アボカド" },
	{ "20001", "りんご" },
	{ "20002", "パイナップル" },
	{ "20003", "バナナ" },
	{ "20004", "なし" },
	{ "20005", "ぶどう" },
	{ "20006", "ドラゴンフルーツ" },
	{ "20007", "もも" },
	{ "20008", "すいか" },
	{ "20009", "めろん" },
	{ "20010", "いちご" },
	{ "30001", "ももにく" },
	{ "30002", "むねにく" },
	{ "30003", "たん" },
	{ "30004", "はつ" },
	{ "30005", "レバー" },
	{ "30006", "サーロイン" },
	{ "30007", "ロース" },
	{ "30008", "テール" },
	{ "30009", "リブロース" },
	{ "30010", "サーロイン" },
	{ "40001", "しゃけ" },
	{ "40002", "ほっけ" },
	{ "40003", "ししゃも" },
	{ "40004", "たら" },
	{ "40005", "たちうお" },
	{ "40006", "マグロ" },
	{ "40007", "すずき" },
	{ "40008", "とびうお" },
	{ "40009", "シーラ" },
	{ "40010", "かつお" },
	{ "50001", "チョコレート" },
	{ "50002", "ビスケット" },
	{ "50003", "ショートケーキ" },
	{ "50004", "モンブラン" },
	{ "50005", "ポテトチップス" },
	{ "50006", "あめ" },
	{ "50007", "クッキー" },
	{ "50008", "バームクーヘン" },
	{ "50009", "シュークリーム" },
	{ "50010", "ぐみ" },
	};
	}

view raw Items hosted with ❤ by GitHub

・品名のキー内先頭2桁の数字は、カテゴリーのキーに紐づいているとします。

①カテゴリーコンボボックスにソースを設定します。

	private Dictionary<string, string> CategoryDictionary;
	private Dictionary<string, string> AllItemDictionary;
	/// <summary>
	///
	/// </summary>
	public Form2()
	{
	InitializeComponent();
	}
	/// <summary>
	///
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private void Form2_Load(object sender, EventArgs e)
	{
	CategoryDictionary = CreateCategoryDictionay();
	AllItemDictionary = CreateAllItemDictionary();
	CategoryCombobox.DataSource = CategoryDictionary.ToList();
	CategoryCombobox.DisplayMember = "value";
	CategoryCombobox.ValueMember = "key";
	}

view raw Set Category source hosted with ❤ by GitHub

・ついでに、品名に使用するディクショナリも作っています。

②カテゴリーコンボボックスのアイテムが選択されたら、品名コンボボックスのソースを設定する

	/// <summary>
	/// カテゴリーコンボボックスで選択されたカテゴリーのアイテムのみを、コンボボックスのソースとして設定します。
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private void CategoryCombobox_SelectionChangeCommitted(object sender, EventArgs e)
	{
	var selectedValue = ((ComboBox)sender).SelectedValue.ToString();
	if (!string.IsNullOrEmpty(selectedValue))
	{
	var itemDictionary = AllItemDictionary.Where(elem => elem.Key.StartsWith(selectedValue)).ToList();
	var firstItem = new KeyValuePair<string, string>(string.Empty, string.Empty);
	itemDictionary.Insert(0, firstItem);
	ItemCombobox.DataSource = itemDictionary;
	ItemCombobox.DisplayMember = "value";
	ItemCombobox.ValueMember = "key";
	}
	}

view raw Create item source hosted with ❤ by GitHub

・こちらも先頭に空白行を追加しています。

・カテゴリーコンボボックスで空白が選択されたときの処理は書いていません。

【結果の画面イメージ】

こんな感じで、カテゴリーに紐づく品名のみを選択項目として設定できます。

※VisualStudio2022(preview)、.Net6(preview)で動作確認をしています。