[WinUI 3][ListBox] 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

ListBox の基本使用方法

XAML による例

ListBox は、アイテムをリスト上に並べて表示しユーザーに選択させるコントロールです。

XAML で ListBox を作成するには、<ListBox> を使用し、内部に表示するアイテムを配置します。

以下の例では、ListBox に TextBlock をアイテムとして表示する例です。

<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>
            <TextBlock Text="アイテム1" />
            <TextBlock Text="アイテム2" />
            <TextBlock Text="アイテム3" />
        </ListBox>

    </StackPanel>
</Window>
ListBox の例

ListBox の例

C# による例

次に C# で ListBox にアイテムを表示するには、Items.Add メソッドを使用します。

Add メソッドの引数には List ボックスに表示するアイテムを渡します。

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" />

    </StackPanel>
</Window>

C# の例

public MainWindow()
{
    this.InitializeComponent();

    for (int i = 1; i <= 3; i++)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.Text = $"アイテム{i.ToString()}";
        textBlock.Width = 240;

        myListBox.Items.Add(textBlock);
    }
}
ListBox の例

ListBox の例

WinUi Tips

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

Please follow and like us:

コメント

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