在上一篇讲述SnapsToDevicePixels 属性的文章中,我们使用了一个ListBox 的例子列出了很多电影。里面每一个条目都有包括缩略图在内的若干个数据项组成。
下面我们看一下如何在WPF中建立这样一个项目。首先,我们需要一个Move类来存储每个电影的信息。我们将用数据绑定绑定一个这个类的实例,我们也想在数据发送改变的时候绑定能够更新,所以我们继承INotifyPropertyChanged 接口。
public class Movie : INotifyPropertyChanged
{
private string title;
public string Title
{
get { return title; }
set
{
if (value != title)
{
title = value;
OnPropertyChanged("Title");
}
}
}
public int year;
public int Year
{
get { return year; }
set
{
if (value != year)
{
year = value;
OnPropertyChanged("Year");
}
}
}
private Uri image;
public Uri Image
{
get { return image; }
set
{
if (value != image)
{
image = value;
OnPropertyChanged("Image");
}
}
}
private string actorLead;
public string ActorLead
{
get { return actorLead; }
set
{
if (value != actorLead)
{
actorLead = value;
OnPropertyChanged("ActorLead");
}
}
}
private string actressLead;
public string ActressLead
{
get { return actressLead; }
set
{
if (value != actressLead)
{
actressLead = value;
OnPropertyChanged("ActressLead");
}
}
}
private string director;
public string Director
{
get { return director; }
set
{
if (value != director)
{
director = value;
OnPropertyChanged("Director");
}
}
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private void OnPropertyChanged(string prop)
{
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
public Movie(string title, int year, Uri image, string actorLead, string actressLead, string director)
{
Title = title;
Year = year;
Image = image;
ActorLead = actorLead;
ActressLead = actressLead;
Director = director;
}
}
下一步我们创建Movie 类的实例,并将它们加入我们要用来绑定的列表中。创建一个包含有电影列表的属性:
public ObservableCollection<Movie> MovieList { get; protected set; }
之后我们在主窗口中添加代码设置数据上下文,将数据和界面显示绑定。
在构造函数中添加代码如下:
public MainWindow()
{
this.InitializeComponent();
// Set data context of main window to itself, allowing to bind
// elements in the GUI to properties in the code-behind.
this.DataContext = this;
// Populate movie list
MovieList = new ObservableCollection<Movie>();
MovieList.Add(new Movie("King Kong", 1933, new Uri(@"..\Images\KingKong-1933.png", UriKind.Relative), "Bruce Cabot", "Fay Wray", "Merian C. Cooper"));
MovieList.Add(new Movie("The Gay Divorcee", 1934, new Uri(@"..\Images\GayDiv-1934.png", UriKind.Relative), "Fred Astaire", "Ginger Rogers", "Mark Sandrich"));
MovieList.Add(new Movie("Captain Blood", 1935, new Uri(@"..\Images\CptBlood-1935.png", UriKind.Relative), "Errol Flynn", "Olivia de Havilland", "Michael Curtiz"));
MovieList.Add(new Movie("Modern Times", 1936, new Uri(@"..\Images\ModTimes-1936.png", UriKind.Relative), "Charlie Chaplin", "Paulette Goddard", "Charlie Chaplin"));
MovieList.Add(new Movie("Topper", 1937, new Uri(@"..\Images\Topper-1937.png", UriKind.Relative), "Cary Grant", "Constance Bennett", "Norman Z. McLeod"));
//OnPropertyChanged("MovieList");
}
最后在XAML中定义一个ListBox 用来显示所有电影信息。设置这个ListBox 的ItemTemplate 属性为我们定义好的DataTemplate 。然后使用数据绑定将模板和Movie 类的数据绑定。
<ListBox name="listBox" ItemsSource="{Binding MovieList}" SnapsToDevicePixels="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}"/>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Title}" FontWeight="Bold"/>
<Label Content="{Binding Year}"/>
</StackPanel>
<Border BorderBrush="Black" BorderThickness="0.5"/>
<StackPanel Orientation="Vertical">
<Label Content="Actors:"/>
<Label Content="{Binding ActorLead}" Margin="10,0"/>
<Label Content="{Binding ActressLead}" Margin="10,0"/>
</StackPanel>
<Border BorderBrush="Black" BorderThickness="0.5"/>
<StackPanel Orientation="Vertical">
<Label Content="Director:"/>
<Label Content="{Binding Director}" Margin="10,0"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
上面XAML代码中的ItemsSource="{Binding MovieList}"可以在cs代码中用listBox.ItemsSource=MovieList;代替。
原文地址:https://wpf.2000things.com/2011/09/27/395-rich-listbox-content-using-data-binding-part-i/