New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Building the UI with the editors

From: Visual Studio 2010 Essential Training

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.

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.

Show transcript

This video is part of

Image for Visual Studio 2010 Essential Training
Visual Studio 2010 Essential Training

86 video lessons · 29800 viewers

Walt Ritscher
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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
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.