Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I will wager you have lists of data you need to show your users. You probably have arrays packed with financial records, lists of customer information, warehouses full of data, and you need a way to show those to your users. That's why all UI frameworks have list controls. In Silverlight, these lists elements are called Items controls. Their purpose is to wrap a collection of data and show it to the user. Item controls also allow selection of the individual items. Another cool feature of these controls is their support for data templates, which allow you to dress up your business data in Silverlight UI elements.
For this demonstration, I will Visual Studio and a project called ListDataWithItemsControls. This first screen shows you the relationships for some of the Items controls, a few of the items I picked out of the SDK. Here you can see the Items Control base class. And the TreeView and the TabControl are examples of Items Controls. The two we are going to look at today are the ListBox and the ComboBox, and they derive from selector, which allow me to pick one of the items. I will start by looking in this AddinXAML.xaml. My intention here is to show you how to add items to an Items control in the XAML itself.
So here I have a ListBox and within the beginning and ending ListBox tags, I am directly adding some UI elements. Here is a TextBlock and then TextBox and then a TextBlock and a button and a CheckBox, and essentially any UI element I want to add here. For instance I could come down here and add an ellipse. And the ListBox will be happy to render that for me.
On this second ListBox I'm wrapping these items in a ListBox item. Let me go back and show you this ListBox for a second. This TextBlock is really not hosted directly in the ListBox; it's hosted inside another item called ListBox item. Why is that? Let me show you. Press F5 to run the application, and then I will choose this ListBox here. I have en ellipse that's inside a ListBox and a CheckBox and a button and some other items in here. Well one of the things I am suppose to be able to with the ListBox is select it, select that row.
By default, the ellipse doesn't know anything about being selectable. So the ListBox works with a helper item called the ListBox item to manage this. Since I didn't put this ellipse inside a ListBox item, there is a helper class that puts it in the ListBox item on my behalf. I could add it explicitly, like I am doing here. There is a ListBox item and then the TextBlock is inside of that. And now this gives me one more advantage: I can set the IsSelected to True on the ListBox item, and now when I start up this ListBox, it'll have item number One selected.
ComboBoxes work the same way. Here's a ComboBox that has a stack panel with an image and a TextBlock within that stack panel. That's showing a template. Press F5 to give a demonstration and drop open this ComboBox. It's hard to see because it's at the bottom of the screen, but it's there. For my next demonstration, I will show you how to add items programmatically. In this example, I have three list boxes and I am going to add items in the code behind. I will switch over to my Code view by pressing F7. And I will start by showing you how to add the items directly to the items collection of the ListBox.
Here I am saying, go to the Items collection, call the Add method on the items collection, and this January string, and so on, for the different months of the year. It's possible, just like I showed you in the last demo, to add non-string elements here. On line 35 I am instantiating an ellipse and adding that the ListBox item. There is also an ItemsSource. This is used for data binding. If I set the ItemSource, I can't add items using the Items.Add and vice versa. If I add items using Items.Add, I can't set the ItemSource.
Next up is looking at data binding to a list. We will open up this page, DataBindingToList. Show you that I have a ListBox. The ItemSource is being set in my XAML to a binding, which means the data is coming from somewhere. I'll look at my code behind to see where that's coming from. I am calling this RentalManager. GetHouses method. Press F12 to show you the code behind that GetHouses function. Here it is. It's returning an observable collection of RentalHouses.
The benefit of using the observable collection with SilverLight is that if I add or delete or move an item to a new location or insert an item into the observable collection, the SilverLight binding engine will move items around inside my list controls to match. Let me see what this looks like in the ListBox. Press F5, switch to this third tab, and that looks good. I've got all their RentalHouses in there, but it's not showing the string that I want. There is a couple of ways that I can fix this.
The simplest possible way is to go back to my code behind. I think I will do this in my XAML instead of my code behind. I will switch over to here. I will go to my ListBox, and I will say DisplayMemberPath=, and then from my class, I am looking at the RentalHouse property. I am looking for a marketing name. That's the name I want, the property that I want on my type. So I'll copy that, return to my XAML, paste that in, and then when I run the application, I see the name.
The second way to change the default is to use a data template. That is much more flexible. Here's an example of a data template. Same data, only now I am specifying, I want a text block, another text block, a line or a rectangle, some italicized text, and a picture. Let me show you how that's accomplished. I will return to binding with data template, and here's my ListBox, and inside the ListBox is an item template, and inside that I'm defining a data template, and now I define whatever UI I want.
For instance, here is a text block with the text coming from the binding for marketing name. And this is extremely flexible, and you can create some really awesome UI doing this. There's much more I could show you about Items controls; please take the time to explore more.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98788 Viewers
61 Video lessons · 86110 Viewers
71 Video lessons · 69964 Viewers
56 Video lessons · 102206 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.