#400 – Using a WrapPanel as the Items Panel for a ListBox

October 4, 2011 2 Comments

The ItemsPanel property of a ListBox specifies the template that defines the panel used to contain the elements of the ListBox.  You can override the normal vertically stacked layout of a ListBox by defining your own template.

If you set the ItemsPanel template to contain a WrapPanel, the ListBox will show its child elements left to right, wrapping to the next row when each row fills up.

In the example below, we bind a ListBox to a list of movies, specify an ItemTemplate that dictates how each item appears, and then specify a template for the ItemsPanel that contains a WrapPanel.

    <Grid>
        <ListBox ItemsSource="{Binding MovieList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Image Source="{Binding Image}" Stretch="None"/>
                        <Label Content="{Binding TitleWithYear}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>

Notice that the layout changes as we resize the parent window.

Filed under Layout Tagged with , , ,

#396 – Rich ListBox Content Using Data Binding, part II

September 28, 2011 2 Comments

This post continues the example of displaying information about a series of movies in a ListBox, using data binding.

Last time, we showed the code for a Movie class, which stored data for a single movie.

The next step is to create some Movie instances and put them in a list, which we will then bind the ListBox to.  We start by adding a property containing a list of movies, which we will bind to.

        public ObservableCollection<Movie> MovieList { get; protected set; }

Next, we’ll add some code to set the data context of the main window to itself–which allows data binding GUI elements in the window to properties in the code-behind class that represents the window.

We also add code to the constructor to populate the list of movies.

        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");
        }

Filed under Data Binding Tagged with , ,

#395 – Rich ListBox Content using Data Binding, part I

September 27, 2011 Leave a comment

In talking about the SnapsToDevicePixels property, I used as an example a ListBox that contained a list of movies.  Each entry in the ListBox had a number of data items related to the movie, including a thumbnail.

Let’s look at how to create this in WPF.  To start with, we need a class that stores information about an individual movie.  We’re going to use data binding to bind to instances of this class, and we want the binding to update when elements of the class change, so we implement the INotifyPropertyChanged interface.

    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;
        }
    }

Filed under Data Binding Tagged with , , ,

Follow

Get every new post delivered to your Inbox.

Join 234 other followers