Visual studio 2010 part 25 pps

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.. You can implement a handler f

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

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

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

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

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

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

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)

{

}

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

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

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