WPF で ListBox に リストデータ を表示する基本形をまとめます。 ここでは、カスタムデータ の リスト を ListBox の データソース として ItemsSource に与え、カスタムデータ の プロパティ を DisplayMemberPath に表示名として指定して利用する方法を載せます。
目次
ListBox に表示したい データ
BookModel の リストデータ を ListBox に表示したいと思います。 ここでは、表示したい単一データ BookModel の実態と、そのリストデータ MainViewModel.BookList がどのように実装されているかを、前提条件として掲載します。
Models/BookModel.cs
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
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
<Window x:Class="WpfApplication.View.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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 の フォロー」 お願いします!!