Introducing Windows Presentation Foundation and XAML : Building WPF Applications Using Visual Studio 2010 (part 1)

1. The WPF Project Templates

The New Project dialog box of Visual Studio 2010 defines a set of WPF project workspaces, all of which are contained under the Window node of the Visual C# root. Here, you can choose from a WPF Application, WPF User Control Library, WPF Custom Control Library, and WPF Browser Application (i.e., XBAP). To begin, create a new WPF Application named MyXamlPad (Figure 1).

Figure 1. The WPF project templates of Visual Studio 2010

Beyond setting references to each of the WPF assemblies (PresentationCore.dll, PresentationFramework.dll, and WindowsBase.dll), you will also be provided with initial Window and Application derived classes, making use of code files and a related XAML file. Consider Figure 2, which shows the Solution Explorer for this new WPF project.

Figure 2. The initial files of a WPF Application project

2. Exploring the WPF Designer Tools

Visual Studio 2010 provides a Toolbox (which you can open via the View menu) that contains numerous WPF controls (Figure 3).

Figure 3. The Toolbox contains the WPF controls that can be placed on the designer surface

Using a standard mouse drag and drop, you can place any of these controls onto the Window's designer surface. As you do, the underlying XAML will be authored on your behalf. However, you can also manually type in your markup using the integrated XAML editor. As you can see in Figure 4, you do get IntelliSense support, which can help simplify the authoring of the markup.

Figure 4. The WPF Window designer

NOTE

You can reposition the display panes of the visual designer using the buttons embedded within the splitter window, such as the Swap Panes button (indicated by the up/down arrows), the Horizontal and Vertical split buttons, and so on. Take a moment to find a configuration you are comfortable with.

Once you have placed controls onto your designer (which you will do in a moment), you can then make use of the Properties window to set property values for the selected control, as well as rig up event handlers for the selected control. By way of a simple test, drag a button control anywhere on your visual designer. Once you do, you will see that Visual Studio authored XAML similar to the following:

Code View: Scroll / Show All

<Button Content="Button" Height="23" HorizontalAlignment="Left"
        Margin="12,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

					  

Now, use the Properties window to change the Background color of the Button using the integrated brush editor (Figure 5).

Figure 5. The Properties window can be used to configure the UI of a WPF control

Once you have finished tinkering with the brush editor, check out the generated markup. It might look something like this:

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0"
        Name="button1" VerticalAlignment="Top" Width="75">
  <Button.Background>
    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="#FF7488CE" Offset="0" />
      <GradientStop Color="#FFC11E1E" Offset="0.837" />
    </LinearGradientBrush>
  </Button.Background>
</Button>

					  

If you wish to handle events for a given control, you can also make use of the Properties window, but this time you need to click on the Events tab. Ensure that the button is selected on your designer, click on the Events tab, and locate the Click event. Once you do, double click directly on the Click event entry. This will cause Visual Studio 2010 to automatically build an event handler that takes the form:

NameOfControl_NameOfEvent

Since you did not rename your button, the Properties window shows it generated an event handler named button1_Click (see Figure 6).

Figure 6. Handling events using the visual designer

As well, Visual Studio 2010 generated the corresponding C# code in your window's code file. Here, you can add any sort of code that must execute when the button is clicked:

public partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponent();
  }

  private void button1_Click(object sender, RoutedEventArgs e)
  {

  }
}

You can also handle events directly in the XAML editor. By way of an example, place your mouse within the <Button> element and type in the MouseEnter event, followed by the equals sign. Once you do, you will see Visual Studio displays any compatible handlers in your code file, as well as the <New Event Handler> option. If you double click <New Event Handler>, the IDE will generate a fitting handler in your C# code file.

Now that you have seen the basic tools used within Visual Studio 2010 to create WPF applications, let's leverage this IDE to build an example program that illustrates the process of parsing XAML at runtime.

Before you start, completely delete the markup describing the Button you just created and also delete the C# event handler code.