Start learning with our library of video tutorials taught by experts. Get started

Visual Studio 2010 Essential Training

Introducing drag-and-drop UI design


From:

Visual Studio 2010 Essential Training

with Walt Ritscher

Video: Introducing drag-and-drop UI design

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.
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 1s
  2. 7m 19s
    1. Understanding the Visual Studio versions
      3m 51s
    2. Setting up your developer computer
      3m 28s
  3. 58m 2s
    1. Creating a Visual Studio project
      4m 58s
    2. Working with Solution Explorer
      6m 32s
    3. Working with big projects
      3m 53s
    4. Taking a tour of the Integrated Developer Environment (IDE)
      8m 36s
    5. Introducing drag-and-drop UI design
      7m 38s
    6. Working with the Properties window
      6m 44s
    7. Looking at Server Explorer
      7m 4s
    8. Exploring the new Help engine
      6m 41s
    9. Setting options for the IDE
      5m 56s
  4. 39m 25s
    1. Creating a simple WPF application
      1m 32s
    2. Building the UI with the editors
      9m 14s
    3. Working with the application code
      3m 37s
    4. Communicating with the web site
      7m 15s
    5. Connecting your data
      8m 4s
    6. Binding to an RSS feed
      5m 4s
    7. Packaging and deploying the application
      4m 39s
  5. 39m 46s
    1. What languages are supported in Visual Studio 2010?
      1m 17s
    2. Exploring basic settings for the Code Editor
      5m 35s
    3. Writing a C# program
      6m 48s
    4. Writing a VB program
      6m 29s
    5. Working with C++
      6m 38s
    6. Working with F Sharp
      6m 9s
    7. Font and color options
      6m 50s
  6. 1h 5m
    1. Formatting your code
      6m 43s
    2. Navigating your code
      7m 44s
    3. Using the Task List
      2m 26s
    4. Commenting your code
      2m 45s
    5. Documenting your code
      8m 26s
    6. Using IntelliSense effectively
      7m 0s
    7. Working with code snippets
      6m 25s
    8. Refactoring your code
      5m 15s
    9. Understanding code generation
      2m 10s
    10. Generating code with T4
      6m 29s
    11. Using the Class View, Class Designer, and Class Diagram tools
      5m 51s
    12. Refactoring VB with CodeRush Xpress
      4m 33s
  7. 1h 11m
    1. Working with project and item templates
      8m 38s
    2. Creating a console application
      7m 5s
    3. Creating a class library
      6m 26s
    4. Creating a web site with ASP.NET
      7m 37s
    5. Creating a rich internet application with Silverlight
      6m 57s
    6. Creating a classic Windows application with Windows Forms
      10m 31s
    7. Creating a dramatic Windows application with Windows Presentation Foundation (WPF)
      4m 41s
    8. Creating a WCF service
      9m 1s
    9. Using an existing WCF service
      6m 38s
    10. Navigation UI designs with the Document Outline view
      3m 41s
  8. 33m 18s
    1. Creating a data project with SQL Project
      6m 24s
    2. Clarifying the confusion on .NET Data
      3m 31s
    3. Using ADO.NET in your application
      6m 50s
    4. Creating typed datasets
      7m 55s
    5. Using the data binding tools
      8m 38s
  9. 30m 13s
    1. Debugging code
      9m 32s
    2. Working with the Watch and other debug windows
      7m 46s
    3. Other debugging techniques
      6m 50s
    4. IntelliTrace historical debugging in Visual Studio Ultimate
      6m 5s
  10. 17m 56s
    1. Understanding Visual Studio editions and test tools
      2m 22s
    2. Verifying your code with unit tests
      8m 58s
    3. Running performance and load tests
      6m 36s
  11. 34m 5s
    1. Building your application
      4m 19s
    2. Customizing the build process with MSBuild
      6m 36s
    3. Setting assembly information
      2m 12s
    4. Deploying a basic Windows application
      2m 19s
    5. Creating an installer with Visual Studio
      7m 39s
    6. Creating a ClickOnce application
      5m 13s
    7. Setting up IIS for deploy
      2m 9s
    8. Deploying a Silverlight or ASP.NET application
      3m 38s
  12. 14m 0s
    1. Understanding source control
      2m 9s
    2. Setting up Team Foundation Server source control
      3m 5s
    3. Using Team Foundation Server source control
      8m 46s
  13. 17m 31s
    1. Understanding the .NET Office integration
      4m 16s
    2. Making a Word 2010 application
      7m 54s
    3. Making an Excel 2010 add-in
      5m 21s
  14. 31m 34s
    1. Understanding the extensibility model in Visual Studio
      2m 17s
    2. Adding external tools to the Tools menu
      4m 42s
    3. Creating macros
      7m 16s
    4. Using the Extension Manager
      5m 1s
    5. Creating an MEF add-in
      7m 9s
    6. Deploying and installing an add-in with VSIX
      5m 9s
  15. 25m 34s
    1. Working with configuration files
      5m 37s
    2. Using the Settings Editor
      7m 30s
    3. Using the Resources Editor
      6m 59s
    4. Localizing your resources
      5m 28s
  16. 1m 17s
    1. Goodbye
      1m 17s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Visual Studio 2010 Essential Training
8h 9m Intermediate Nov 16, 2010

Viewers: in countries Watching now:

In Visual Studio 2010 Essential Training, author Walt Ritscher demonstrates how to use Visual Studio 2010 Professional to develop full-featured applications targeting a variety of platforms. Starting with an overview of the integrated developer environment, the course covers working with code editors, navigating and formatting code, and deploying applications. Also included are tutorials on running performance and load tests, and debugging code. Exercise files accompany the course.

Topics include:
  • Creating a Visual Studio project
  • Building the user interface
  • Binding to an RSS feed
  • Coding with IntelliSense
  • Creating rich Internet applications with Silverlight
  • Building Windows applications with Windows Forms
  • Integrating with SQL Server
  • Working with Microsoft Office applications
  • Understanding extensibility in Visual Studio
  • Working with data, ADO.NET and datasets
  • Using source control
Subject:
Developer
Software:
ASP.NET Silverlight Visual Studio
Author:
Walt Ritscher

Introducing drag-and-drop UI design

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 what do you think what happen if I come over here, and I typed in 60 for the height? Right, the button changes size.

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, where it's instantiating, or creating an instance of that control. So you see how each designer has a different way of working and representing the underlying data. I am going to return back to my Form1.cs designer.

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.

Find answers to the most frequently asked questions about Visual Studio 2010 Essential Training.


Expand all | Collapse all
Please wait...
Q: Which edition of Visual Studio 2010 do I need to follow along in this course?
A: The course is taught with Visual Studio 2010 Professional, but can also be used with the Premium or Ultimate editions. The Express editions of Visual Studio, including Visual Basic 2010 Express, Visual C# 2010 Express, and Visual C++ Express, are not covered in this course.
Q: I'm attempting to download the exercise files for this course, and my virus protection is blocking me from unzipping the downloaded file. Are the files corrupted?
A: The alert is a false-positive message. Your antivirus software is detecting the active code included in the exercise files, which in some ways resembles viral code. There is nothing to be alarmed about and you can ignore the warning. This is common among coding courses and environments.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Visual Studio 2010 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked