[WinUI 3][ListBox] アイテムの選択方法を設定する

この記事では ListBox に表示されたアイテムの選択方式を変更する方法について説明をします。

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

環境

アイテムの選択方法を設定する

ListBox に表示されたアイテムは、通常１つしか選択できませんが、SelectionMode プロパティの値を変更することで、複数のアイテムを選択することもで来ます。

SelectionMode プロパティには、以下に示す SelectionMode 列挙体の値を指定することができます。

以下に、アイテムの選択方法を変更する例を示します。

この例では、SelectionMode に Multiple を指定して、複数のアイテムを選択できるようにしています。
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"
                 SelectionMode="Multiple"
                 ItemsSource="{x:Bind employees}"
                 DisplayMemberPath="Name" />

    </StackPanel>
</Window>

C# の例

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
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();

            // アイテムを複数選択できるようにする
            myListBox.SelectionMode = SelectionMode.Multiple;

            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: