#395 – 通过数据绑定丰富ListBox 的内容（Rich ListBox Content using Data Binding）

在上一篇讲述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/