WPF の ListBox に対する リストデータ の バインディング と 表示名 の 制御

0 件のコメント

WPF で ListBox に リストデータ を表示する基本形をまとめます。 ここでは、カスタムデータ の リスト を ListBox の データソース として ItemsSource に与え、カスタムデータ の プロパティ を DisplayMemberPath に表示名として指定して利用する方法を載せます。

目次

ListBox に表示したい データ

BookModel の リストデータ を ListBox に表示したいと思います。 ここでは、表示したい単一データ BookModel の実態と、そのリストデータ MainViewModel.BookList がどのように実装されているかを、前提条件として掲載します。

Models/BookModel.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
namespace WpfApplication.Models
{
    public class BookModel
    {
        public string ISBN { get; set; }
 
        public string Title { get; set; }
 
        public string Author { get; set; }
 
        public int Price { get; set; }
    }
}

ViewModels/MainViewModel.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
namespace WpfApplication.ViewModels
{
    using System.Collections.Generic;
    using WpfApplication.Models;
 
    public class MainViewModel
    {
        public MainViewModel()
        {
            this.BookList = new List<BookModel>()
            {
                new BookModel(){
                    ISBN = "12345768",
                    Title = "hoge",
                    Author = "hoge",
                    Price = 1000
                },
                new BookModel(){
                    ISBN = "12345679",
                    Title = "foo",
                    Author = "bar",
                    Price = 1000
                }
            };
        }
 
        public List<BookModel> BookList { get; set; }
    }
}

ListBox に リストデータ を 表示する サンプルコード

ここでは xaml へ記述する例を記載します。 リストデータ は ItemsSource へ設定し、その表示名は DisplayMemberPath へ設定します。

IEnumerable ItemsSource { get; set; }

データ の 接続は ItemsSource プロパティ に対して行います。 ここでは WpfApplication.ViewModels.MainViewModel.BookList を接続します。 名前空間 WpfApplication.ViewModels は xmlns に、ViewModel は DataContext に、リストデータ は {Binding Path} に設定します。

string DisplayMemberPath { get; set; }

ListBox の 項目名 として表示する文字列を ItemsSource のどの プロパティ から取得するかを設定します。 ここでは BookModel の Title を利用したいので、 DisplayMemberPath="Title" を設定します。

以下に上記 ItemsSource と DisplayMemberPath を xaml で設定する サンプルコード を掲載します。

MainView.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Window x:Class="WpfApplication.View.MainView"
        xmlns:vm="clr-namespace:WpfApplication.ViewModels"
        Title="MainWindow" Height="296" Width="423">
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>
    <Grid>
        <ListBox
            Height="245"
            Width="100"
            ItemsSource="{Binding Path=BookList}"
            DisplayMemberPath="Title"
            SelectionChanged="ListBox_SelectionChanged" />
    </Grid>
</Window>

関連記事

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!