Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Showing data from your business models is a common practice. I'd argue that it is the prime mission for both business applications. If you are an experienced programmer, you've probably worked on an application, or you retrieved data from a source, showed the data to the user in various user controls, allowed the user to change the data and then saved the data back to the original source. This is such a common scenario that our industry is constantly building and refining binding frameworks to simplify these common tasks. Microsoft is helping us in this area too. Visual Studio contains a number of data binding tools.
Some of them work in the drag-and-drop manner. Let me show you. I am inside a solution called UsingDataBindingtools that contains a Silverlight application and a WinForms application. I am going to start by using the WinFormsApp for data binding. Now I have already added a database and a typed data set. See the "Creating typed datasets" movie to learn more about how to create these types of sources. There is a special window called the Data Sources window that permits drag-and-drop.
To see the Data Sources window, you need to go to Data and then Show Data Sources. This window is usually docked to the left side of the screen, and on my computer it's occupying this lower left-hand corner. As you can see, it's automatically picked up on all the tables that are inside that data set. I am going to open this form called AddShipperGrid. And here is where the drag and drop-data binding comes in. I am going to take this Shippers table, and I am going to drag it over and drop it on the designer surface.
And a lot a magic just happened. First of all, it created a data grid and added the correct columns. It added all of this stuff down here in the bottom. It added a dataset, and a TableAdapter for the Shippers and some other items. It added this thing called the BindingNavigator, which is this toolbar across the top for navigating forward and backward through my rows, and adding rows and deleting rows and saving them out to the data Source. And it's automatically wired up all the code to show the data. So we run the application, and it shows the Add Shippers Grid. You'll see that it's automatically populated, and I can use these forward and backward buttons to move to new rows, and so on.
You can also add more complex grids. Here is a AddParentChild form. I am going to switch over and show you this one. I am going to add some existing controls. I am going to add a list box, and I am going to add something called the DataGridView. Here it is. So these already exist on the window. I can now take this Categories table and drag it over and drop it on this list box, and the data binding engine will add some sources on the bottom, and it also correctly configures my list box to have DataSource and Display name and so on.
I am going to take the Products table and drag it and drop it on the grid. Now in my DataSource, if I open up the northwinddataset.xsd, you'll see that there is a relationship between the Categories table and the Products table. So I am going to exploit that in my code and make sure that when I click an item in the list box it will show the related product in the other control. To do that, I am going to click on this list box. I am going to add an Event procedure by clicking on this lightening bolt, and I am going to add SelectedIndexChanged Event procedure.
Double-click on this section, and then I am going to say, productsBindingSource-- which is one of those autogenerated items-- .Filter =. And I need a semi-colon here, and then I am going to say, this is a CategoryID=. So what this is going to do is it's going to create a string that says CategoryID, and then it's going to use whatever the product name is here. The CategoryID number is going to put that in here, and it's going to apply that to the filter.
I'll run the application. Click on this button Add Parent Child view. Now again, here you see the Beverages at the top. These are the beverages that we sell. Here is the condiments that we sell, and so on. There is the dairy products that we sell. In my next demo, I am going to show you that you don't have to use data grids. I am going to use this form called AddShippersControl. I am going to go back to that Shippers table in the Data Sources, and instead of dragging it over and getting a table, I am going to tell it to use Detail view.
So I select this dropdown. You can see that the symbol changes over here. Now when I drag this over, I still get bound controls, only this time I get a text box that is bound to the source and a text box is bound to the Company Name, rather than getting a data grid. For my last example here, I am going to show that when I am doing this drag and drop--for instance, there is two dates here for this Categories-- when I drag these over, it's going to use a special control called the DateTimePicker.
I can tell that data sources that I would rather use as an alternative control when I drag it over to the surface. So I am going to choose this dropdown, and I am going to come down here and say, I don't want the DateTimePicker anymore. I want a TextBox. So now I will switch this over to Details view, and I will get one DateTimePicker and one TextBox. There is the DateTimePicker. There is the TextBox. That just shows you that you can customize the controls. So up to this point, we've been doing data binding using a database and this northwinddataset.
Another source of data is .NET objects. So I am going to switch over to my Silverlight application. I will make this my Startup here, this ASP.NET application, and I am going to switch to my SilverlightApp, and I am going to go to this MainPage. And I want to drag and drop this class that are right here called CalenderDays. If you look inside this class, you'll see there is other class called CalenderDay, and then I wrote a class that returns a list of items.
It derives from the list of CalenderDay. So what I am going to do is I am going to add a new data source to this SilverlightApp. So I will go to Data > Add New Data Source, tell it that the source of the data is going to be come from an object, tell it I want to use both these objects-- CalenderDay and CalendderDays--and then click Finish. Now I am going to go to my designer surface. Here is my Data Source. I am going to grab that CalenderDays, and drag it over and drop it on my Silverlight surface.
Now it has a slightly different way of setting up the connection. I need to go to my code behind window and write a little bit of code. So let me press F7 to do that. Here is all the code that was automatically written for me. It's really hard to read, so I have created a slightly easier version of that to read down here. I am going to copy this, go to my Loaded Event, paste it in, and then Ctrl+K, Ctrl+U to uncomment this. What this is going to do is it's going to go out to my MainPage.xaml, find this DataContext that was generated when I did the drag-and-drop-- that's called the Calendar View Source-- it's going to get a handle on that, and then it's going to instantiate an instance of CalendarDays and apply that to the source.
Now if I did everything correctly, I should get a data grid populated with the days of the week. Press F5. I will press Yes. Success! Are all seven days of the week there? Yes, they are. Well, that's about all I have for drag and drop. It's simple to use, it's customizable, and for simple interfaces, it's just the right tool.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104735 Viewers
56 Video lessons · 116619 Viewers
71 Video lessons · 85809 Viewers
131 Video lessons · 41055 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.