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

スポンサーリンク

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

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

環境

開発環境 Microsoft Visual Studio Enterprise 2019
Version 16.11.5
Framework Microsoft .NET Framewohttps://blog.hiros-dot.net/?p=11007rk Version 4.8.04161

ObservableCollection クラスを理解する

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

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

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

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

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

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

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

シンプルに、氏名(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に指定します。

<ListBox x:Name="myListBox" 
            ItemsSource="{x:Bind employees}" DisplayMemberPath="Name" />

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

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

バインディングによるアイテムの追加例

バインディングによるアイテムの追加例

コードの全貌

ここまでのコードの全貌は以下の通りです。
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">

        <ListBox x:Name="myListBox" 
                 ItemsSource="{x:Bind employees}" DisplayMemberPath="Name" />

    </StackPanel>
</Window>

C# のコード

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

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

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; }
    }
}

バインディングデータの削除

先ほどの XAML に Button を1つ追加し、クリックされたら選択されているアイテムが削除されているようにしてみます。

XAML

<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <ListBox x:Name="myListBox" 
                ItemsSource="{x:Bind employees}" DisplayMemberPath="Name" />
    <Button x:Name="ButtonDel" Content="削除" Click="ButtonDel_Click" />
</StackPanel>

ボタンがクリックされたときにアイテムを削除するコード例を以下に示します。

すでにコレクションアイテムが0件であれば削除処理は不要になるので、処理をせずに抜けるようにしています。

続いて、ListBox で選択されているアイテムを foreach でループしながらコレクションから削除します。

private void ButtonDel_Click(object sender, RoutedEventArgs e)
{
    // コレクションが 0 の場合、処理をせずに抜ける
    if (employees.Count < 1) return;

    // ListBox で選択されたアイテムを employees コレクションから削除する
    foreach (Employee selectedItem in myListBox.SelectedItems)
    {
        employees.Remove(selectedItem);
    }
}

実行例を以下に示します。

バインディングアイテムの削除例

バインディングアイテムの削除例

WinUi Tips

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

Please follow and like us:

コメント

タイトルとURLをコピーしました