Join Walt Ritscher for an in-depth discussion in this video Creating a dramatic Windows application with Windows Presentation Foundation (WPF), part of Visual Studio 2012 Essential Training.
- View Offline
Windows Presentation Foundation, more commonly called WPF, provides a rich model for building modern U X. It contains incredible data buying tools, a superb animation tool set, and is the best Microsoft technology for building desktop applications. I thought I would start by showing you a couple of examples before moving into Visual Studio. I'm in my exercise file folder and I'll open this WPF example folder then I'll double on this scatter plot vis.exe, and I'll maximize this window.
This is a 3 dimension cube of data that I can manipulate with my mouse. There's about 625 cubes inside this application that are being animated. Some of the cubes are transparent and some of them are not. You can zoom in with your mouse wheel and see some of the transparent cubes, in between the yellow cubes. Another prime example of what you can do in WPF, is Visual Studio itself. It is written in WPF. So look at this UI, every single window, every single item in this application is something you can create in your own application.
Tree views in the solution explorer, property grids. The tool box the menus and tool bars and even the code editor windows. You can make all of those yourself. In this demonstration I'm going to write simple UI in this create WPF application. I'm going to open this mainwindow.zaml and show you a few things on creating a layout. In this application, I have three buttons inside a stack panel. A stack panel's purpose in life is to put each of its children controls, one after the other, in a stack. In this case it is a vertical stack.
I can also change this to a horizontal stack by changing An orientation property. Now the buttons are stacked one next to each other. Control z to undo. (SOUND). Goes back to the original. I can add another item to this stack panel. Let's add a grid to the stack panel, and make it a little bit taller. And then I can drag items into the grid. Let's take a check box and drag that in there. The items inside the grid, they're located by their margin settings.
You see that has a 36 pixel margin on this side. As I drag this item to a new position, it's changing the margin. The grid excels at doing multiple columns and multiple rows. The way you add columns and rows is by moving to the edge of the grid and clicking. Now I have two rows I will move to the top and split into one column. Now as I move this check box from one column to the other, you will see that its writing out these values here. Grid.Row equal to 1, Grid.Column equal to 1, I will move it back into the first column.
Let's see if it that changes it removes the Grid.Column value and over down here next, so you can see the difference. Now it's set to grid row 2 and grid column 1. I can't emphasize enough how sophisticated a UI that you can create with the WPF. You saw that cube example you see Visual Studio, I don't have time to build a very vanity application, so let me just show you how to move to these other Windows. I have the right a little bit of code to do that. Here inside this fancy buttons. I'm going to declare an instance of my window, and then I'll call win.show. What I want to show you in this first example is how to change a button's appearance.
This is done using something called a template, and it can dramatically change the way a UI element looks. I'll run the application by pressing F five. I'll click on this fancy button and here are the 2 fancy buttons. You're probably thinking to yourself these aren't looking very fancy. Just wait. I'll click on the first one it shows a message box. I'll click on the second. It also shows a message box. Now let me change this by adding a template. I'll go over this fancy button.zammel file.
Turn off this disassembling window, I'm not sure why that showed up, and then I want you to see at the top of this window, is a section called Window Resources, and inside there's something called a Control template. Control Templates allow me to specify a brand new set of Zamel that can get applied To the control. So here, I've created a template called glassButton. That's the key that identifies it. And as you can see, there are a number of lines of xaml in here. And eventually, we'll get down here to the bottom. Down here, I can see the actual buttons.
And then I click on this button. And open my Property window by pressing F4. Now I'm going to look for Template over here. Oh, I need to stop running my application first. I'll click on Stop Debugging. And I'll look for the word Template. Now I'm going to click here. And choose local resource. This is my class button. You see what happened to this button.
It's picking up the template and changing the appearance. Let me do the same thing for this other button. And then I'll run the application. I can still click on these buttons. They still function. They have all the functionality of the buttons, but they also have this new template which includes some gradients, and it has some animation, so when I hover on my mouse over these buttons, you can see that the UI changes to look like there's a yellow light running inside of the button. Next I'd like to look at a blog viewer.
This is an application that I wrote that's loading my blog. This is completely written in XML. I'll click on No, there's a script error in my blog, and this is completely written without doing any code. I'm using what's called XML binding. I've got some (UNKNOWN) ... That sets up an xml data source. The data source points to the internet. I'm pulling the xml data over through an RSS feed, and populating this list box. Some of the items on the top of the page. Items on the bottom of the page.
And then, this is a frame that I'm filling with the information from my feed. Let me click on another item here, changing monitors. It will load a new page. Again, I'll click No to the script error. And you can see a new article. Let me show you how that was done. Close this, switch over to this blog viewer, switch to my code-behind, and show that there's No code in here. Let me open the code behind for the blog viewer not the fancy buttons. This is the one I wanted you to see.
There's no code in here. Everything is inside the XML. Here's my data source, XML data provider. I mark that as a resource, I gave it a key, and I pointed it out to my feed. And then in the rest of the document I just use these elements and then I use what's called data binding to retrieve the information from the fed, pull the data out of the feed and put it in this text property on the text block. Here's the list box, and I'm using an item source equal binding. This is how I'm filling this list box.
Data binding is very powerful in WPF. In my last demonstration, I'll show you an animation. Here's the animation window. This uses a number of custom paths with some drop shadows on there and lips with the gradient fills, a picture of a fish. And then I went into blend and I added some animations to these paths so they move up and down. Also moving the fish up and down. And the sun will set. Press F5 to run the application, and there you go.
Wpf was my first true love, at least when it comes to XML-based UI. Over the years I've felt the same happiness when working with Silverlight and Windows phone. Check out the other videos in this chapter to see how XML has morphed to work with the Windows store apps.
- Creating a Visual Studio project
- Understanding the project types
- Working with the Toolbox and Properties windows
- Building a user interface with the editors
- Exploring tools that enhance your coding sessions
- Navigating and formatting your code
- Working with Expression Blend for complex UI
- Debugging code