Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The king of the data-bound controls is the Datagrid. This element can show multiple rows and columns, and has sophisticated layout and formatting features. It also supports a rich set of events which fire as the user manipulates the data in the grid. In addition, it enables users to add, edit, delete, select, and sort items from the underlying data source. For this demo, I'm going to use Visual Studio and a project called DiggingIntoDataGrid. Let's start by looking at my business classes.
I have a Scientist class, which has a few properties: FirstName, LastName, Gender, and a few science-related items. I also have the Scientists class, which derives from ObservableCollection. It is populated with lists of scientist data. I'm going to add these to a grid by going to my BasicGrid demo and showing you the XAML. Here I have a DataGrid. I dragged this from my toolbox onto my designer surface, and then I set the AutoGenerateColumns='True'. Then in my Code Behind--press F7 to see that-- I'm instantiating my Scientists and assigning them to the ItemSource of my grid.
With that one line of code, I can run the application and I instantly get data. Each property in my underlying data source becomes a column in my grid. There's a lot of functionality in this grid already. I can edit the items by clicking here and typing. I can sort them by clicking on the header of the column and even come over here and add new check marks to this checkbox. It does need some work yet. This image is only being shown as a string. I probably need a custom column there or a custom data template.
Speaking of custom columns, that's my next demo. Here, I'm not using the auto-generated columnsl I'm creating each column on my own. So far, I have a single column and that's missing the header. Let's go fix that. Close down the browser, open this CustomColumns.xaml file. I've managed to unpin my tab. The way you put the tab back is to hold down Ctrl key and double-click on the header. On this data grid, I've set the AutoGenerateColumns='False'. I've also set this property RowDetailsVisibilitymode to VisibleWhenSelected.
This will become important in a few minutes. Then in this section, in the DataGrid.Column section, I'm instantiating a new column, and I'm binding it to the LastName property of my data source. Now to add a second column. Copy this data and I'll change this to say FirstName. Now, before I show you the example, let's keep going and looking at more XAML. Down here is something called the RowDetailsTemplate, which matches what we said is up here, RowDetailsVisibilitymode.
So, when you click on a row, this DataTemplate will be shown to the user. Within this data template, I'm creating a Stackpanel, a number of TextBlocks, and an image, and I'm binding them to the underlying source. Let's see what this looks like. I have my two custom columns. I click on one of the rows and I see the Details area. The next thing I might want to do is start changing the headers, the colors, the fonts, and other formatting details.
We'll do that over here in the Formatting Grid area. I'll open FormattingGrid.xaml and again, I'll look at the XAML. It's the same as before; it's a data grid with auto-generated columns. If I'm going to try to format it and make it look beautiful in my designer, I need to see it up here in the designer surface. If you're doing data binding in the Code Behind, you will not see any data here at design time. To solve that, I'm going to add a data source in my XAML and bind to that instead of doing it in my Code Behind.
So, the first thing I want to do is go to my Code Behind, press F7, and comment out this line of code here that's setting the data source. Next, I'll return back to my XAML, and I need to instantiate my Scientists somewhere in my XAML. The place that you do that in Silverlight is inside that Resource section. Resources can be at the DataGrid level or at the Grid level or even at the UserControl level. Here's how you add one. That simple.
Now, I can instantiate types within this boundary. In order to instantiate my type, I need to add my namespace to the XML file. I do that by coming up here and typing in xmlns:local, and then I choose the namespace I want, DiggingIntoDataGrid. Now, I can come down here and use local and I can see all the types that are defined in that namespace. I want to instantiate Scientists. Any item that goes in the Resources section has to have an identifying key.
I have called mine myScience, and now I'm ready to use my source. We'll come down to my DataGrid and set its ItemSource property. And in here, I'm going to use a markup extension, but I'm not going to use a binding markup extension. I'm going to use a resource lookup extension called StaticResource. And as soon as I place that myScience in my StaticResource, you can see the data show up in the design surface.
This is nice because now I can start styling and formatting the data. Let me show you how I might do that. I'm going to go over to the Property grid in Visual Studio and select Columns. Then I'll click on the three dots, this button that has the three dots on it, and then I'll go over here and add a couple of columns. I will start by adding a TextColumn and then I'll add a CheckBoxColumn. Once I've added these two, I'm going to bind them to the underlying data source. Because Visual Studio now knows where the data is coming from in the designer, when I click on DataGridTextColumn and go to the Binding section over here and click in this button area on this side, I'm shown a list of the available sources. FirstName, in my case, is the one I want to choose, and then for the DataGridCheckBoxColumn, I want to blind to the Boolean value WonNobelPrize. Okay.
It's still not right. The header doesn't look right to me. So I'll choose Columns, DataGridTextColumn, and then I'll go to the Header section and type in the string that I want to appear. First, space, Name, Enter, then OK. There's my First Name. For my last demonstration, I'll show you how to group data within a grid. I'm going to open this GroupingData control and show you my user interface.
I have a ComboBox with two items in it: the first one is ScienceArea and the second item is Gender. The user is going to come up and select one of these two items. The ComboBox will fire the SelectionChanged event, and then I'll call my code. Press F7 to look at that code. In the body of this if statement I'm first clearing out any grouping I might already have. That is done by setting the GroupDescriptions property on my data grid. I'm setting it and calling the Clear method. Then I'm getting the value out of the ComboBox, and then finally I'm going back to the GroupDescriptions and I'm adding a new group, data, and I'm using this class here PropertyGroupDescription.
Essentially, this is the name of the field that I want to sort on. Now, when I run the application, go to Grouping, you see that they're currently grouped by ScienceArea. There're two physicists and then two chemists and then a biologist. If I come up here and I choose Gender, I see that something's not right here. I've got male and two females and I see that Linus Pauling has something wrong with his data. This should say M and instead, it says N.
There's another control that excels at editing data. It is called the Data Form, and I'll show it to you in the next movie in this chapter.
Get unlimited access to all courses for just $25/month.Become a member