Windows Presentation Foundation is the oldest UI framework using XAML as its UI definition language. This tutorial explores the various areas where XAML lives in a WPF project.
- [Instructor] In this chapter, I thought I'd look at some of the UI frameworks that Microsoft produces that use XAML. I thought I would start by looking at one of my favorites for building desktop applications which is called Windows Presentation Foundation. I've been using WPF applications for most of the demos in this course. When you create a brand new WPF project, it'll add several files that have XAML in them. One of them is this one here: App.xaml. This file is an application-level XAML file. Things that go in here apply to the entire application.
On line five, there's a property called StartupUri. This is how you designate the startup window for this application. Currently it's gonna start with this MainWindow.xaml. The other thing that you see in here is something called the Application.Resources, and this is where you specify things like application-wide brushes, or styles for user controls. You can see in this case I've got a RadialGradientBrush, and a LinearGradientBrush, and two SolidColorBrushes declared in here. And then I can utilize those in some of my other windows.
Since it's a desktop application, you also have Window classes, so something like MainWindow and AboutWindow are example of Windows classes. You can also use Pages and user controls. For this example I only have two Window classes. So let's start by looking at some of the XAML inside this MainWindow. This is a typical UI you see in a lot of desktop applications. Menus across the top, status bar across the bottom, some sort of editor or data window in the center of the screen.
You can see this is defined by using something called a Grid, something called a Menu, and then child MenuItems. You'll see that this item here has a Header, Open, that's the text that shows up on user screen. And then it's got a Click event handler that'll go over and run some code inside the code behind. There's also an Image and a couple of gray Lines defined in here, and then a TextBlock across the bottom of the screen. And you probably don't see the gray Lines, but you will when you run the application.
Like this: This is a photo-editing application. The gray lines are being drawn on the screen, and when I move my mouse, it's re-positioning those two lines. Also on the bottom of the screen you'll see the x and y coordinate of where the mouse pointer is. Mostly do things like go over here and choose some color effects. You can also swap out the image by clicking Open, this'll run some code. It opens up this file open dialogue. Drill down and find a picture.
It gets swapped out in the UI, and now when I apply the effect, it's applying it to the new picture. In the window application or desktop application, you often move back and forth between multiple windows. So in my case, I've got this Other menu, and the About menu which is in there. When I click on this, it will launch the About window. And this shows you some of the fancier things that you can do with the window in WPF. In this case there's a transparent background that's behind this window, and it's semi-transparent so you can sort of see through it, but is also gray so it dims out the background.
We've also got a principal like this x button. I did a custom draw of the x button here. When I mouse over it, it fades in a color there. There's an animation happening there. When I click on this button, it'll close that window. Switch over to the XAML for the About window. Move over to the designer. Make it a little bit larger so that you can see it, and then hold down the Spacebar and drag it up. You can see that real trick here is I had a big window and then I drew some UI in the center, and then I turned off the normal window chrome, then I have the semi-transparent background that you see what appears to be a window pops up.
There's a lot of XAML in here. There's 400 lines of XAML, I won't belabor the point, and go through all the detail, you can look at it yourself. You can also look at the code behind and see what I'm doing over here to do things like close that window. Or how to do the custom effects. Next up I'll take a look at Universal Windows applications which also use XAML.
- What is XAML?
- What frameworks use XAML?
- Working with XAML and Visual Studio
- Exploring XAML namespaces
- Instantiating objects
- Subscribing to events
- Using XAML in Windows Presentation Foundations, Universal Windows, and more