Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the major advantages of designing UI in Visual Studio is the drag- and-drop placement of elements during the design of both rich client and web applications. These elements are all available in what is known as the ToolBox. I am inside Visual Studio, and I've opened a solution, appropriately called ToolBox. Inside this solution, I have three separate projects: an ASP.NET project, a Windows Form project, and a WPF project. The reason I picked these three project types is all three of them support a drag and drop designer.
I am going to start by looking at the Windows Form App. I'm going to open this up, and I am going to find this file called Form1.cs. I'm going to double-click on it. That will load what's called the designer into this central area of my screen. Now I can go to the Toolbox, which currently on my machine is down here on this tab. If you don't see it, you may need to go to the View menu as a View toolbox. It also may be docked to the edge. In that case, you need to go over here and click the Auto Hide button to make it visible.
I'm going to open the Toolbox, and now I can do a drag-and-drop operation. For instance, I can take this button and drag it from the Toolbox onto my designer surface. The Windows Form designer has this little rectangle that shows where I am going to drop it. Now when I let go, it will add the button. Now behind the scenes, Visual Studio is writing some code. It's not very obvious where it's writing this code, however. It's over here in the Form1.Designer.cs.
Other designer surfaces are better at showing you where this code lives. I'll show you that in a minute. First, let me show you what happens when you want to work with multiple controls. I am going to go add another control. This time I am going to choose the TextBox control. I will drag that over. You can also double-click on the Toolbox to add it. You see that I get this blue line. The Windows Form designer is using this blue line to show me that I have aligned the left edges of these controls. So when I let go over the mouse now, it will snap to that location.
Once I have an item added, I can click on it. I get sizing handles--which means I can change its size-- I can move it to a new location by dragging it with my mouse, and of course, I can delete it. Let me show you the WPF designer now. I'll go to the Wpf project, find this file called MainWindow.xaml, and double-click. Immediately, you can see that the designers are different from each other.
This designer has a white design area, and at the bottom of the split screen is a set of XAML, which is Markup Language. Now watch what happens when I drag a button from this Toolbox over to the designer surface. I get a plus symbol. I get a blue outline. When I let go, the button shows up, but also in the markup section you can see that it says
So it's a lot easier to see the relationship between the text here and the button than you get in the Windows Form designer. Something similar happens in HTML and ASP.NET editing. If I go over to my AspNet application and open up a file called Default.aspx by double-clicking, you see that I have a HTML document here. If I want to see the drag and drop designer, I need to click on the Design tab on the bottom of the screen.
Now I can go to my Toolbox, find a control, like this button, and drag it over to
the designer surface.
Now if you look at the source code, you'll see this line,
I'll click here in this tab. Now, what I want to spend the next five minutes or so looking at is what you can do with Toolbox. For instance, I can rename the elements and move them to new positions. That's what I want to show you now. The first thing I want to show you is that there are sections of this Toolbox. I currently have the Windows Form designer selected, so the Toolbox is context-sensitive. It's just showing me only sections of the Toolbox that have to do with the Windows Form designer.
If I switch to the WPF designer, you will see that the section is changed. Now it has one for common WPF controls and another for all WPF controls. If I switch back to the Form1.cs, you will see again that the Toolbox changes because it's monitoring what I am editing in the center of the screen. I can go to my Toolbox, right-click, and uncheck this List View, and what you will see is I now have smaller icons. It no longer has the Text view anymore, so I have to hover over the icon to see what control is, but I save a lot of screen real estate by doing this.
To go back to seeing the Text view, I right-click and choose List view. You can create your own sections of the Toolbox. You can go down to this General section down here, and I can add other third-party controls. If you happened to have bought a third-party package of user controls, you can go and pick the Choose Items menu and then go out and find those controls. They might be listed here, or you might have to go and click the Browse button.
But what you will do here is you will find the control you want--say this one right here--and then click OK, and after a few seconds that control will now be added to whatever section of the Toolbox you currently have highlighted. In my case, that would be the General section. I don't want to do that for this demo, so I am going to go ahead and click Cancel. While you're working in the Toolbox, you can rearrange the controls. I can pick this control up and drag it to a new section.
I can rename the control, by right- clicking on it and choosing Rename. If I make a mess of the Toolbox, I can always click Reset Toolbox, which I am going to do right now. On my machine, this usually takes 20 seconds or so to reset. Some of the controls that you'll find in the Toolbox are not visible at runtime. Let me show you one of those. It's called the Timer Control. I am going to go to All Windows Forms, scroll down to the T section and then take this timer, and I am going to drag it and drop it on my designer surface.
Now keep an eye on the bottom half of the screen. When I let go over the mouse button, you'll see that Visual Studio adds a special section called the component tray, and because the timer is not visible at run time, it puts a timer on the component tray. There is a companion window that's often used when working with the Toolbox and the designer. I am talking about the Properties window, which is over here on the right side of the screen. It's usually underneath the Solution Explorer. It's such an interesting tool that I made an entire movie about it, and it's the next one in this chapter.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101682 Viewers
61 Video lessons · 88435 Viewers
71 Video lessons · 72274 Viewers
56 Video lessons · 104000 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.