[WinUI 3][ComboBox] バインディングによるアイテムの追加と削除

この記事では ComboBox にアイテムをバインドして表示する方法について説明をします。この方法により動的にアイテムを表示できるようになります。

公式サイト情報はコチラを参照してください。

環境

ObservableCollection クラスを理解する

UI を XAML で 構築するフレームワーク（WinUI, WPF, UWPなど）では、ObservableCollection クラスを使用してアイテムをバインディングするのが一般的です。

公式サイトはコチラを参照。

ObservableCollection には CollectionChanged とPropertyChanged の2つのイベントが実装されており、コレクションの値が変更されるとバインド先に通知してくれる機能を持っています。

ObservableCollection の利用手順は以下の通りです。

1. データ格納用のクラスを作成する
2. 1.で作成したクラスを格納するコレクションを ObservableCollection で作成する
3. 2.で作成したコレクションに、アイテムの追加や削除を行う。
4. バインドしたいコントロールの ItemSource プロパティに 、2. で作成したコレクションをバインドする

ComboBox にデータをバインドして表示する

それでは、先ほどの手順に従ってデータをバインドしてみます。

シンプルに、氏名（Name）プロパティのみを持つ社員クラス（Employee）を作成してバインドする例を示します。

1.データ格納用のクラスを作成する

はじめに、データ格納用の Employee クラスを作成します。以下に示すとおりで、一般的なクラスです。

public class Employee
{
    public string Name { get; set; }
}

2.クラスを格納する ObservableCollection を作成する

続いて、Employee クラスを格納する ObservableCollection を作成します。ObservableCollection を使用するには、以下のように using を追加します。

using System.Collections.ObjectModel;

次に、Employee クラスを格納する ObservableCollection を以下のように作成します。

ObservableCollection employees = new ObservableCollection();

3.ObservableCollection にアイテムの追加をする

次に、作成した ObservableCollection に、バインディングするアイテムを追加します。

以下は、先ほど作成した ObservableCollection の employees に3件のアイテムを追加する例です。

このコードにより、”User1″, “User2”, “User3” というアイテムが追加されます。

for (int i = 1; i <= 3; i++)
{
    Employee employee = new Employee();
    employee.Name = $"User{i.ToString()}";
    employees.Add(employee);
}

ItemSource  プロパティに コレクションをバインディングする

最後に、コントロールの ItemSource プロパティに、先ほど作成した employees コレクションをバインディングします。また、コレクションが持つどのプロパティを表示するのかを、DisplayMemberPathに指定します。

<ComboBox x:Name="myComboBox" 
            ItemsSource="{x:Bind employees}" DisplayMemberPath="Name" />

以上でバインディングによるアイテムの追加ができます。

実行例は以下の通りです。

ComboBox にデータをバインディングする例

コードの全貌

ここまでのコードの全貌は以下の通りです。
XAML のコード

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">

        <ComboBox x:Name="myComboBox"
                  ItemsSource="{x:Bind employees}"
                  DisplayMemberPath="Name" />

    </StackPanel>
</Window>

C# のコード

using Microsoft.UI.Xaml;
using System.Collections.ObjectModel;

namespace WinUISample
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        ObservableCollection<Employee> employees = new ObservableCollection<Employee>();

        public MainWindow()
        {
            this.InitializeComponent();

            for (int i = 1; i <= 3; i++) 
            { 
                Employee employee = new Employee(); 
                employee.Name = $"User{i.ToString()}"; 
                employees.Add(employee); 
            }
        }

    }

    public class Employee 
    { 
        public string Name { get; set; } 
    }
}

WinUi Tips

本サイトでまとめている WinUI Tips の一覧はこちらから確認できます。

Please follow and like us: