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 Chapter 8: Building Desktop Applications with WPF 227 You’ll find all of the available controls on the Toolbox, divided into panels where the top panel is Common WPF controls, which makes it easy to find the controls you use the most. The All WPF Controls tab includes the complete list of WPF controls. You’ve seen how the Designer can be used in the preceding section, which discussed layout controls. You can open the Designer by double-clicking a *.xaml file in Solution Explorer. To add a control to the Designer, select the control in the Toolbox and drag the control onto the Designer. Figure 8-8 shows a Button that has been dragged and dropped onto the Designer. Table 8-1 Primary Windows for Working with Controls Window Menu Keystroke Toolbox View | Toolbox CTRL-W, X Solution Explorer View | Solution Explorer CTRL-W, L Designer Double-click *.xaml file in Solution Explorer SHIFT-F7 Properties Window View | Properties window CTRL-W, P Figure 8-8 Adding a control to the VS Designer 228 Microsoft Visual Studio 2010: A Beginner’s Guide In Figure 8-8, you can see the Toolbox with the Button control selected. The Designer shows a Button control that has been dragged and dropped. In practice, you’ll be adding this control into some type of layout control so that you can position it appropriately on the screen. Below the Designer, the Button control appears in the XAML for this window. If you are uncomfortable looking at XAML, you can review Appendix B as a refresher. The attributes of the Button control in the XAML match the properties in the Properties window. TIP It’s important to learn how to quickly build UIs using the Visual Designer because it enhances productivity. However, it’s also important to be able to read the XAML associated with a window because as you move beyond the beginner content of this book, you’ll find scenarios where the Designer alone might not allow you to control every nuance of your visual presentation. A good way to move forward is to experiment on your own by adding each of the controls from the Toolbox to the Designer and then examine the generated XAML. Setting Properties The Properties window shows all of the ways that you can configure a control. For button controls, you’ll want to change the Content property to make the text on the button make sense. In this example, we’ll imagine that the purpose of the button is to allow a user to create a new order for a customer. Therefore, set the Content property to New Order. Handling Events In addition to properties, you can handle control events via the Events tab at the top of the Properties window. Figure 8-9 shows the contents of the Events tab. Controls have literally dozens of events that allow you to manage their behavior in the application. Some events, like Click, are commonly used, while other events, such as Drag Over, only support unique scenarios like drag and drop that you might not ever care about. To handle an event, you can double-click any of the events in the Properties window and VS will wire up that event to a handler method with a default name. Since the Click event is so common, I’ll show how it works. You can implement a handler for the Click event by double-clicking the Click event in the Properties window Events tab. When you double-click, VS opens a file named MainWindow.xaml.cs, assuming the window you’re working with is named MainWindow.xaml. MainWindow .xaml.cs is called a code-behind file and is where you can add event handlers. VS also creates a skeleton method in MainWindow.xaml.cs that handles the Button Click event, shown in Listing 8-1. Chapter 8: Building Desktop Applications with WPF 229 TIP Controls have default events. The significance of default events is that if you double-click the control in the Designer, VS will generate an event handler for the default event. To be more specific, consider the Button control whose default event is the Click event. If you double-click the Button control in the Designer, VS will generate an event handler for the Click event. Listing 8-1 A WPF code-behind file C#: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; Figure 8-9 The Properties window Events tab 230 Microsoft Visual Studio 2010: A Beginner’s Guide using System.Windows.Navigation; using System.Windows.Shapes; namespace ControlsCS { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { } } } VB: Class MainWindow Private Sub Button1_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click End Sub End Class The Click event handler, just created, is the highlighted method, button1_Click (Button1_Click in VB), that you see in Listing 8-1. We covered delegates and events in Chapter 4, which you can review for a better understanding of how this method handles the Click event. Notice how the VB code shows another way to handle events in VB, by explicitly specifying Handles Button1.Click. Essentially, when a user clicks on the button named button1, this handler will be called. This illustrates the concept of event-driven programming, where you write handlers, such as button1_Click, that run code according Chapter 8: Building Desktop Applications with WPF 231 to user actions. In addition to creating the event handler in the code-behind, VS adds the method name to the Click event on the Events tab in the Properties window, shown in Figure 8-9. In addition to creating the handler method and assigning the method name in the Properties window, VS adds the method as an attribute to the Button control in the XAML, shown here. The XAML is independent of programming language and works the same regardless of whether you are coding in C# or VB: <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="76,43,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> Notice the convention being used on the method name, controlName_Event. The controlName part comes from the name of the control, which is button1, and the event is the event being handled. The problem with this is that button1 isn’t meaningful and when you return to this code later, you’ll be confused by having methods named button1_Click, button2_Click, and so on. To fix the naming problem, you should name your controls properly before doing anything else with them. To back out of this, go back to the Events tab of the Properties window. Remember to select the Button in the Designer. The top left of the Properties window contains the ID of the control, which you should change from button1 to a meaningful name. For example if the purpose of the button was to create a new order for a customer, you could name the button NewOrderButton. Then delete the event handler assigned to the Click event of the Button. Figure 8-10 shows these changes in the Properties window. Now the ID and event handler are more readable. After the event handler is deleted and the control has a new ID, double-click the Click event again. VS will create a new event handler for you, shown here: C#: private void button1_Click(object sender, RoutedEventArgs e) { } private void NewOrderButton_Click(object sender, RoutedEventArgs e) { } 232 Microsoft Visual Studio 2010: A Beginner’s Guide VB: Class MainWindow Private Sub Button1_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) End Sub Private Sub NewOrderButton_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles NewOrderButton.Click End Sub End Class Figure 8-10 Readable button ID and event handler name Chapter 8: Building Desktop Applications with WPF 233 The previous code shows both the old button1_Click (Button1_Click in VB) event handler and the new NewOrderButton_Click event handler. You might wonder why the button1_Click event handler wasn’t deleted when you deleted it from the Click event in the Properties window, but there’s a good reason for this. What if you had already written code in the event handler? VS leans toward the safe side and does not delete your code. Using the previous steps, you have both event handlers sitting side-by-side, which means that you can easily copy your code from button1_Click into NewOrderButton_Click and then delete the button1_Click event handler. So far, we haven’t written any code for the event handler, which you’ll learn about in the next section. Coding Event Handlers One of the tasks you might want to do when a user clicks a button is to open a new window. The first thing you’ll need to do is add a new window. To make this work, you would open Solution Explorer, right-click the project you’re working with, select Add | New Item, choose Window (WPF), name the window NewOrder.xaml, and click Add. This will create a new window open in the Designer. TIP The project’s Add | New Item context menu includes a Window entry, which can save a couple of clicks when creating a new window. After the Designer loads, you can quickly open the code-behind by pressing F7. In the code-behind, you’ll see the following code: C#: public partial class NewOrder : Window { public NewOrder() { InitializeComponent(); } } VB: Public Class NewOrder End Class 234 Microsoft Visual Studio 2010: A Beginner’s Guide Notice that the class in this code is named NewOrder, illustrating that a window is just another class. As you know, you can instantiate classes and call their methods, which is the technique you’ll use to open this window from the NewOrder_Click event handler in the code-behind of the MainWindow window. In practice, you’ll populate the NewOrder window with whatever controls you need to implement a new order. You would populate the window by dragging and dropping controls, just like the Button in this example. However, we’ll skip that task for now because the current focus is on adding code to the NewOrderButton_Click event handler so that you can learn how to code an event handler and open another window. Go back to the NewOrderButton_Click event handler in MainWindow.xaml.cs and add the following code: C#: private void NewOrderButton_Click(object sender, RoutedEventArgs e) { NewOrder newOrd = new NewOrder(); newOrd.Show(); } VB: Private Sub NewOrderButton_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles NewOrderButton.Click Dim newOrd As New NewOrder newOrd.Show() End Sub Since NewOrder is a class, you can instantiate it as shown in the preceding code example. To open the window, call the Show method. Now you have a WPF program that handles events and opens new windows. Press F5 to run the program. Click New Order and observe that the New Order window appears. The New Order window isn’t very useful because it lacks controls and data management. The next section shows you how to populate window controls with data. Working with Data in WPF This section builds upon what you learned in Chapter 7 by showing how to bind data to WPF controls. Binding is the process of populating and retrieving data to and from controls. You’ll learn how to show data in your user interface. The examples in the . code: C#: public partial class NewOrder : Window { public NewOrder() { InitializeComponent(); } } VB: Public Class NewOrder End Class 234 Microsoft Visual Studio 2010: A Beginner’s. Properties window CTRL-W, P Figure 8-8 Adding a control to the VS Designer 228 Microsoft Visual Studio 2010: A Beginner’s Guide In Figure 8-8, you can see the Toolbox with the Button control selected System.Windows.Media.Imaging; Figure 8-9 The Properties window Events tab 230 Microsoft Visual Studio 2010: A Beginner’s Guide using System.Windows.Navigation; using System.Windows.Shapes;