Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Building the UI with the editors


Visual Studio 2010 Essential Training

with Walt Ritscher

Video: Building the UI with the editors

To get started with my app, I'm going to use the designer in Visual Studio to create a basic shell. The word designer has special meaning inside Visual Studio. A designer is a special window that supports drag-and-drop and mouse interactions for creating the user interface. This designer is also responsible for generating code, or XML markup. I'm inside Visual Studio, and I have opened the solution called InfoReader. Inside the solution are two projects: version 1 and version 2 of InfoReader. I'm going to start obviously in version 1, and I'm going to edit this MainWindow.xaml.
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

please wait ...
Watch the Online Video Course 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
ASP.NET Silverlight Visual Studio
Walt Ritscher

Building the UI with the editors

To get started with my app, I'm going to use the designer in Visual Studio to create a basic shell. The word designer has special meaning inside Visual Studio. A designer is a special window that supports drag-and-drop and mouse interactions for creating the user interface. This designer is also responsible for generating code, or XML markup. I'm inside Visual Studio, and I have opened the solution called InfoReader. Inside the solution are two projects: version 1 and version 2 of InfoReader. I'm going to start obviously in version 1, and I'm going to edit this MainWindow.xaml.

If you want to know how to create your own solution in your own project, check out some other movies in this course. This is the basic WPF Editing window. This is the designer surface on the top half of the screen. Usually on the left edge of the screen is the Toolbox. If you don't see the Toolbox, you may need to go to the View menu and turn on the Toolbox. It also may be docked to the side over here. Once you have the Toolbox there, you can then pick up an element--like this button--and drag it over to this designer surface.

Visual Studio has this split view. Let me shrink down the view for a minute. I'm going to click on this Zoom to Fit button, so I can see more of the designer surface. And then at the bottom of the window you can see there is a text editor, and I can scroll this up a little bit and then shrink this down again. There is the designer, and here is the XAML. So, you can choose whether you want to do only XAML or you want to use the designer. If you want to hide the designer, you can click on this Collapse pane here. I'm going to keep them both open for today.

As I size the button in the designer, you'll see I get some sizing handles, and when I let go off the mouse, you might notice that some values have changed. If I edit the XAML directly, like if I type in 100 pixels for the Height, you'll see that it changes in the designer. So they're linked to each other. Naturally, I can add other types of elements. Let me take this TextBox here and drag it over, and let go, and now in my XAML it has created this element tag here, TextBox. As I'm dragging the item around in the designer, you'll see little lines show up.

Those are alignment cues. So here I can see that I'm lined up to the left edge of the button. Now if I size the button, you'll see I get an alignment on the right side when they're the same size. I'm going to make a couple of changes on the window itself. So I'm going to scroll up to the top of my XAML and look at this Window class up here. I don't want it to be this small size. I want it to be maximized. So, what I'm going to do is come over here and type in "WindowState=", and then I get a dropdown choice Maximized.

If you'd rather use a designer for this, you can use the Property window over here. So what you do is you select your window, and then you go to your Property window. On your computer, you may have the Property window set to Categorized. I like to switch on the alphabetical view instead by clicking this button, and then you can scroll down to the bottom and find this property called WindowState, and then you can choose from this dropdown. The other thing I'm going to do is I'm going to change the title and not say MainWindow. I'm going to call it inpho, in.pho. readr, like so--nice modern name.

So here's what I want to do for the design. I want to have the company name and logo across the top. So I need to delete this Button, hit the Delete key, and then I'm going to choose this TextBox and do the same thing, delete. What I want to have happen is I want to have a top section with the company name and a logo. So, I'm going to divide this into two rows. To do that, I select my grid somewhere-- in this case I selected it down here in the XAML. And then if you notice on the left edge and on the top is a blue area. If I click on this blue area, I will add columns or rows.

So, I'm going to click over here, and then once I've got the rows in there, I can use this triangle to size them, or I can come over here and click in these items to change the sizing standard of this row. I'm going to leave it at the default for right now. Inside this area, I will put a dock panel. Dock panels are used to stick controls to the edges of the screen. So I will dock the text block to the left side, and I would dock the image to the right side. And then on the bottom half of the screen, I'm going to put a TabControl down here.

I've already prewritten a lot of this, and it's down here in this InfoReader Version2. All right, so let me close this MainWindow. You may or may not see this Save dialog, and then I'm going to go down to Version2 and double-click on MainWindow.xaml. And I need to make this my Startup Project. When I choose to debug this application, I have to pick which one of these two projects to start with. So in Visual Studio to tell it which project I want to start, I right-click, and I choose Set as StartUp Project. All right, here is my newer UI.

Here's my dock panel on the top right there. Here is the text block that says in.pho.readr. Here is an image. I added an image control. And then, in order to get this picture, what I did is I right-clicked, went to Add > Existing Item, went out to my Exercise Files folder, and there's an Assets folder down here. Open the Assets folder, and then make sure you're not looking at just C# files. So click on this little dropdown here and choose All Files.

And now, I can add this BlueArrow.png file. Once I added that PNG file, then I can click on the Image Control and go to the Source Property here. This is really nice because when I click on this button with the three dots on it to choose the image, it shows me all of the embedded images that are part of my application. I picked BlueArrow.png and then clicked OK. Then on the bottom half of the screen, I added a TabControl--here it is--and then I added a few tabs. And then each tab has this little container down at the bottom.

So like if I click here on History, I can put some items here. I'm going to put a ListBox in there for later, and then later when you'll learn about data binding we're going to load some RSS from blog feed. What I want to show you now, before I end this movie, is something called styles and templates. The idea is--let me zoom in a little bit so it's easier to see. I'm going to click on this TextBlock, and I'm going to go to its Foreground Property. Foreground is changing the color of the font by applying a brush to it. Currently, it has a black solid color brush applied. I'm going to click on this dropdown, click somewhere in the green area, and then maybe drag around here till I get the green color I want, and then I'm going to click outside the dialog.

Now you see I have this green text. What I can do--let me reselect this-- what I can do now is I can go to the Foreground Property, and I can save this as a resource. So I can click on this little black diamond and say Extract Value to Resource. That creates a GreenBrushKey. I click OK, and what just happened is at the top of my XAML, it created a Resources section, and it put a SolidColorBrush in there with an identifying Key. Now I can go to other items, like say this button here or this TabControl, and I can go to its Foreground property and click in that same area.

It doesn't have quite the same symbol on it, as you can see. And I'll say I want to apply a resource, and then I'll pick the resource I just created. So the power of this, especially if you create styles instead of just these stand-alone resources, is that somebody can spend a lot of time making the look of an element--let's say all your buttons--and then they can put it in a style, and then you can come in and say, "Now, just apply that style." As you can imagine, it would take a long time to build that up. So I've already written the XAML for that, too. So, if you open up this App.xaml-- this is application wide resources-- if I open up this App.xaml file, double -click on it, you'll see that I have a Resources section in here. Inside the Resources, I have two styles.

I'm clicking these little Plus symbols on the side here. There are two styles. Now, a style contains property setters, like that Foreground setter I just showed you, and it also can contain something called a ControlTemplate. ControlTemplates allow me to completely change the way a tab or a button looks. Now right now, the style has a key. So, if I want to apply the style, I have to know the key name. If I delete this key, I've now created a style that can be applied to all TabItems. So, I'm going to do that for the TabItem, and I'm also going to do the same thing for the button.

Essentially what I've done now is I've created two styles at the global level that apply to all TabItems in the entire project and all the buttons in the entire project. Let's see what it looks like. I'm going to press F5--or you can also click the Debug > Start Debugging menu, save my changes--and now you can see that the tabs have a brand-new look on them, and so do the buttons. Here is the new button look. It even has an animation as part of the ControlTemplate. So if I hover my mouse over the button, you'll see that an animation shows up.

I got these styles off the Expression Blend web site. There's a place where you can go and download styles from Microsoft. So you see how changing the template on a control can dramatically change the way it looks and behaves? That's just one small portion of what you can do with the Visual Studio designer and WPF. It's time to move on to the next topic. Up next, writing some code.

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

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

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.

Join now Already a member? Log in

* Estimated file size

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


You have completed Visual Studio 2010 Essential Training.

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


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about 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

Sign up and receive emails about and our online training library:

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

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.