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 の フォロー」 お願いします!!