217 Chapter 8 Building Desktop Applications with WPF 218 Microsoft Visual Studio 2010: A Beginner’s Guide Key Skills & Concepts ● Perform Screen Layout ● Use Controls ● Work with Data in the UI W indows Presentation Foundation (WPF) is a .NET technology for building desktop applications. The result of building a WPF application is an *.exe file that you can run directly on your computer or deploy and run on any other computer that has .NET installed. With WPF, you can add a graphical user interface (GUI), pronounced “Gooey,” that makes it easier for users to work with your program. This chapter will show you how to lay out a screen in WPF and explain the controls, such as Button and TextBox, that you can place on the screen. You’ll also learn how to capture events off controls, allowing you to add code that runs based on user input. Since most applications work with data, this chapter builds on what you learned in Chapter 7 and shows how to bind data to controls in the GUI. This chapter will show you how to build a WPF GUI with the VS Designer, but sometimes you must work at a lower level and manipulate the XAML, pronounced “Zammel,” that defines the GUI. XAML is an XML format that WPF and Silverlight use to define a GUI. There are two appendixes in this book that will help you get up to speed in XAML: Appendix A, “Introduction to XML,” and Appendix B, “Introduction to XAML.” If you aren’t familiar with XML, start with Appendix A. However, if you have a good grasp of basic XML syntax, go straight to Appendix B. I’ll try to explain WPF in a way that any XAML you see can be understood in its context, but you might want to review the appendixes to avoid any confusion. Once you’re familiar with XAML, you can return here and start with the next section, which explains how to start a WPF project. Starting a WPF Project In Chapter 5, you learned how to create and build projects. The example explained how to create a Console application. However, what you learned there is generally applicable to most other application types. This section builds upon what you already know about projects and explains what is unique to a WPF application. To get started, open the New Project window; select WPF Application; and fill in the project name, location, and Chapter 8: Building Desktop Applications with WPF 219 solution name. I’m naming the examples in the chapter as MyShop to continue the idea of customers who buy products that started in Chapter 7 when discussing data. Figure 8-1 shows the new WPF application in VS, including a Toolbox, a Designer, and a Solution Explorer. The Toolbox contains controls, which are user interface (UI) elements, such as Button and Textbox, that you can drag and drop onto the Designer. NOTE There is another .NET technology, Windows Forms, for creating desktop applications. This book doesn’t discuss Windows Forms because it’s an older technology. The way forward for desktop application development is WPF, and the intention of this book is to help guide you in a direction most beneficial to you. The Designer allows you to lay out the UI of the application; it is divided into Design on the top and XAML on the bottom. The Design surface allows you to visually work with controls and layouts of those controls. The XAML editor allows you to work with the XML representation of the controls on the design surface. The Design and XAML are interrelated because a change in one causes a change in the other. For example, if you add a Button to the Design, you’ll see the XML representation of that Button in the XAML. Figure 8-1 A new WPF application project 220 Microsoft Visual Studio 2010: A Beginner’s Guide Similarly, if you add a TextBox element to the XAML, you’ll see the visual representation of that TextBox in Design. You have various controls for manipulating the windows. Both Design and XAML have zoom controls. The zoom tool on Design is a slider in the upper-left corner, and zoom for XAML is a drop-down control in the lower-left corner. You can also zoom by clicking either Design or XAML and moving the mouse wheel. At the upper right of the XAML editor (bottom right of the Design surface), you can switch between horizontal and vertical splits of the window or click the chevron to collapse the XML. The splitter icon below the chevron allows you to split the XAML editor into two if you drag it down. The up-down arrow between the Design and XAML tabs allows you to switch sides so that each panel shows where the other was. Locating the carat in the middle of the separator between Design and XAML allows you to resize each window. Understanding Layout A layout defines how you can position and size controls on a screen. WPF windows and controls have a Content (can occasionally be called something else) property that accepts a single control. In some cases, such as a Button control, the content can be text. However, many situations call for the ability to lay out multiple controls. This section concentrates on performing layout in windows, and a Window has a Content property that accepts only one control; that one control should be a layout control, which is the subject of this section. WPF includes several layout controls, including Grid, StackPanel, DockPanel, WrapPanel, and Canvas. By default, VS will generate a window with a Grid as the layout control. However, you are free to replace the Grid with any other layout control that suits your needs. This section will show you how to use each of these controls. Grid Layout Whenever starting a new WPF project, VS adds a Grid. A Grid is a layout control that allows you to create a set of rows and columns that hold other controls. Y ou can add rows and columns to a Grid through the Visual Designer by clicking in the middle of a window in design view. Figure 8-2 shows a column being added to a Grid. The thin vertical line in the middle of the window is a new border between two columns. After clicking the window, you’ll see two thick borders on the left and top of the window. While you hover over the top border, VS draws a vertical line that moves left and right as you run your mouse along the top border. You can do the same with the left border, adding rows to the Grid. This is a very quick way to add rows and columns to a Grid. Chapter 8: Building Desktop Applications with WPF 221 The arrow in the Grid border allows you to reposition the column or row border. You can remove the column or row border by selecting the arrow in the Grid border and dragging the arrow off the window. CAUTION Don’t press the DELETE key when you have a border selected. You’ll accidentally delete your Grid, which you might have spent some time on. If you want to remove a column or row, grab the arrow for the border you want to remove and drag the border off the window. Once you’ve created rows and columns, you can add further customizations that define how much space the column or row can take. There are three sizing customizations: fixed, weighted, and auto. To set each of these options, hover over the column or row border and VS will display a sizing panel, as shown over the left column design border in Figure 8-3. The diamond icon on the left means fixed, where the size will stay the same. The asterisk icon in the middle is a weighted proportion, where the size stays the same in relation to the other columns. The rightmost icon is auto, meaning that the size will vary according to Figure 8-2 Adding columns and rows to a Grid 222 Microsoft Visual Studio 2010: A Beginner’s Guide whatever space remains after the other columns’ sizes are set. After you’ve added content to your Grid, you can use these sizing options to experiment with the layout that you want. One thing to notice in Figure 8-3 is the number in the Grid border for each row and column. These numbers tell you the size in pixels for each row and column they appear upon. Figure 8-3 also shows the Properties window on the right, where you can select and customize the Column and Row collections. True to the purpose of the Grid, Figure 8-3 shows controls that have been added to the Grid, placed in each cell of the Grid. Another popular layout control is StackPanel, discussed next. StackPanel Layout The StackPanel is ideal for when you want to lay out controls each on top of the other, like a stack. You can use a StackPanel by dragging the StackPanel control from the Toolbox onto the design surface. If you want to use the StackPanel as your primary layout, you can Figure 8-3 Column and row sizing options Chapter 8: Building Desktop Applications with WPF 223 select the grid, which is added by default to a new project, and delete the Grid. Figure 8-4 shows a StackPanel that contains multiple button controls. In Figure 8-4, it doesn’t matter where you try to lay the buttons—the StackPanel will always lay them out one after the other. In addition to vertical layout, the StackPanel can lay out controls horizontally. Just change the Orientation property, shown in the Properties window in Figure 8-4, to Horizontal. Next, you’ll learn how to dock controls to the sides of a container. DockPanel Layout You’ve seen how VS allows you to dock windows within the borders of the application. This helps you organize your screen so that you can use many tools at one time. You can lay out your controls the same way with the DockPanel control. Get started by dragging and dropping a DockPanel control from the T oolbox to the Window in the design surface. You might want to delete the default Grid first. Also, the DockPanel initializes with a Height and a Width, which you’ll probably want to remove by selecting the DockPanel, opening the Properties window, and clearing the Height and Figure 8-4 Using a StackPanel layout 224 Microsoft Visual Studio 2010: A Beginner’s Guide Width properties. Removing the Height and Width properties allows the DockPanel to expand and cover the entire window. Figure 8-5 shows a DockPanel with Label controls in each docking position. Every time you drag and drop a control onto the design surface of a DockPanel, the control will take the center position by default. To specify where the control should dock, open the Properties window and set the DockLayout.Dock property. When you add a new control, the new control will become the center control and the other control will dock to the side of the DockPanel you specified in the Dock property. The next layout control is WrapPanel. WrapPanel Layout Whenever controls should naturally follow each other in sequence and continue wrapping on new lines, you can use a WrapPanel. Examples of when this is useful could be when adding controls that contain text and it’s useful to view the controls in sequence. Figure 8-6 shows several CheckBox controls in a WrapPanel. Figure 8-5 DockPanel layout Chapter 8: Building Desktop Applications with WPF 225 Figure 8-6 demonstrates how you can lay out a group of controls to fill an available space. In the case of the CheckBox controls, the Orientation of the WrapPanel is set to Vertical (the default is Horizontal). When the number of CheckBox controls fills the vertical column, remaining CheckBoxes wrap to the next column. Because the sizes of the CheckBox controls are the same, you have a uniform layout, which is easier than trying to do the same thing with a Grid or other layout control. The final layout control we’ll discuss is the Canvas, which is next. Canvas Layout There are times when you might want to perform explicit layout of controls. If you were building a diagramming application or a drawing program, or if you just wanted to explicitly specify the location of controls, the Canvas layout will work fine. Figure 8-7 shows some controls on a Canvas layout. The Rectangle and Ellipse controls were dragged and dropped from the Toolbox onto the Canvas control. Notice the Canvas.Left, Canvas.Top, Width, and Height properties in the Properties window, demonstrating the absolute positioning of the selected Ellipse control. Figure 8-6 The WrapPanel Layout control 226 Microsoft Visual Studio 2010: A Beginner’s Guide Now that you know how to use the layout controls, the next section takes a closer look at WPF controls in general, giving you tips on how to use them in your application. Using WPF Controls WPF includes many controls for helping you build user interfaces. This section groups the controls into categories, including text, selection, containers, information, shapes, and decorators. Data controls are excluded on purpose because the section following controls is “Working with Data in WPF.” Before diving into each control, let’s do an overview of the VS environment associated with control work. Managing Windows for Controls When working with controls, you’ll be working with four different windows: Toolbox, Solution Explorer, Designer, and Properties. You learned how to access each of these windows in earlier chapters; but as a convenience, Table 8-1 gives you a quick summary on how to open these windows. Figure 8-7 The Canvas Layout control . new WPF application project 220 Microsoft Visual Studio 2010: A Beginner’s Guide Similarly, if you add a TextBox element to the XAML, you’ll see the visual representation of that TextBox in. Properties window, and clearing the Height and Figure 8-4 Using a StackPanel layout 224 Microsoft Visual Studio 2010: A Beginner’s Guide Width properties. Removing the Height and Width properties. size will vary according to Figure 8-2 Adding columns and rows to a Grid 222 Microsoft Visual Studio 2010: A Beginner’s Guide whatever space remains after the other columns’ sizes are set. After