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