Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Windows Presentation Foundation, more commonly called WPF, provides a rich model for building modern user interfaces. It contains incredible data binding tools, a superb animation toolset, and is the best Microsoft technology for building desktop applications. As you suspect, Visual Studio contains a project template for creating WPF applications. I'm going to go to Visual Studio's File menu and choose New > Project. Then I'm going to click on the language of choice.
Today, I'll choose Visual C#, and then I will click on Windows. There are several templates inside this folder. First is the standard WPF Application, second is a specialized type of application called a WPF Browser App-- sometimes called an XBAP--that runs within your browser. Then lastly, there are two Custom Libraries down here: WPF Custom Control Library and WPF User Control Library.
For today, I'm going to choose WPF Application, and then place that in my Movie folder. I am going to click OK and wait for about two seconds. Visual Studio opens up the designer surface. It has a split screen. On the top is the area where I can drag and drop my controls. On the bottom half is the area where I can write my XAML. There is a Zoom to Fit button here, where I can shrink down the screen size to see everything.
Then of course, there is a toolbox to the side. I don't need this bottom window opened, so I am going to close this document outline, so I can see more of my toolbox. Naturally, I can take one of these controls-- Let's say this button--and drag it over to my designer surface. If you look down in the bottom half of the screen, you'll see that it wrote this Markup Language for me. I can edit the XAML directly. For instance, I can change the content of the button by typing in a string here. And I can edit it in either place.
I can resize the button, drag to a new location, place other elements on the screen--for instance a ListBox. When I drag the list box around, I get snap grid showing me I have the two edges of these two elements aligned. Now I can size this list box a little bit bigger to make it align with the other side. There are helper numbers here showing me the size of this control as I resize it. I can make this thing look much nicer by adding gradients and transparencies.
Let me show you on the background of this window. I'm going to click on the window itself or this grid--one or the other. I'm going to go to a property called Background. It's called Background and not back color because you can apply any valid WPF brush. I could paint this with solid colors, with gradient colors, with images, and many other items. I am going to click on this little dropdown here, and choose the gradient brush.
Notice there's also a solid color brush and an image brush. I am going to click on the gradient brush. Then at the bottom of the screen, you'll see that I have two gradient colors. I'm going to flip the gradient by clicking on this button here. Then I'm going to change the color value of this black portion of the window to a dark blue-- something along those lines--and maybe make it a little less saturated.
So I'll move this mouse pointer over here to the left edge. It's more gray on the side of the window. I can control how far down the screen the gradient goes by dragging this gradient stop. I think that looks nice. I can click on the button, and I can apply an opacity value, so that I could see partially through this button. There's an Opacity property down here in the O section. I am going to set that to 0.5.
Now, you can see that if I bring that to front, it's covering up the list box, but I can see a portion of the list box through the button. This is very hard to do with the other desktop application technology that Microsoft has, which is called Windows Forms. Now, this is all I am going to show you of the WPF template in this movie. The reason is I have an entire chapter devoted to this topic, and I encourage you to spend some time watching those movies.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98552 Viewers
61 Video lessons · 85838 Viewers
71 Video lessons · 69736 Viewers
56 Video lessons · 102043 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.