Give Your .NET Apps the Face They Deserve with WPF : Page 2

Your First WPF Application

Figure 1. New Project Dialog in Visual Studio 2005: After installing all the WPF software, you'll find a new set of project types starting with "WinFX."

If everything installed correctly, you'll find it easy to get going with your first WPF application. Start up Visual Studio 2005, and select File—> New Project. You'll see the new project dialog box, as shown in Figure 1.

As you can see in Figure 1, there's a new suite of project types called Windows (WinFX), including WinFX Windows Application, Service Library, Browser Application and Control Library. These allow you to build XAML client applications, Indigo services, XAML browser (Web form) applications, and control libraries, respectively.

In this article, I'll walk you through the process of building a WinFX Windows application. Select that project template from the New Project dialog.

When you first create this application you get what looks like a standard Visual Studio designer environment, but is in fact the new XAML designer for Visual Studio codenamed "Cider" (see Figure 2).

Figure 2. XAML Designer for Visual Studio: The figure shows an Avalon application in design mode using 'Cider.'

If you look closely at Figure 2, you'll see a new tab at the bottom of the designer pane, called 'Xaml'. Clicking that tab lets you view the XAML for the current design. The XAML for the simple dialog shown, which contains a label, a textbox, and a button looks like this:

   <Window x:Class="AvalonHelloWorld.Window1"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
     presentation" xmlns:x=
     "http://schemas.microsoft.com/winfx/2006/xaml"
     Title="AvalonHelloWorld" Height="300" Width="300"
     Opacity="0.5">
      <Grid>
       <Button Width="NaN" Height="37" 
          VerticalAlignment="Bottom"  
          HorizontalAlignment="Stretch" Grid.Column="0" 
          Grid.ColumnSpan="1" Grid.Row="0" 
          Grid.RowSpan="1" 
          Margin="114,0,8,8" 
          Name="button1">Button</Button>
       <Label Width="NaN" Height="30.276666666666667" 
          VerticalAlignment="Top" 
          HorizontalAlignment="Stretch" 
          Grid.Column="0" Grid.ColumnSpan="1" 
          Grid.Row="0" 
          Grid.RowSpan="1" 
          Margin="16,25.7233333333333,89.37,0" 
          Name="label1" FontSize="20">
            Enter Text Here:</Label>
       <TextBox Width="NaN" Height="42.276666666666671" 
          VerticalAlignment="Bottom" 
          HorizontalAlignment="Stretch" 
          Grid.Column="0" Grid.ColumnSpan="1" 
          Grid.Row="0" 
          Grid.RowSpan="1" Margin="16,0,34.37,157" 
          Name="textBox1"></TextBox>
      </Grid>
   </Window>

As you change the layout of the dialog in the Cider visual editor, the tool updates the XAML for you automatically.

Designer-based addition of events to controls is not yet supported in the Cider designer, but with a little manual XML editing you can add events easily. For example, to add a click event handler to the button you would edit its tag in the XAML. Change it to the following, adding a new "Click" attribute to the declaration shown earlier:

   <Button Click="ButtonClick" Width="NaN" Height="37" 
     VerticalAlignment="Bottom"   
     HorizontalAlignment="Stretch" 
     Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" 
     Grid.RowSpan="1" Margin="114,0,8,8" 
     Name="button1">Button</Button>

As you can see, the revised code simply adds a new 'Click' attribute to the button declaration, and then specifies the name of the event handler for the button click. If you select the 'Source' tab, you can now create the handler for this event.

Figure 3. Running the Application: After adding a button Click event, the MessageBox appears as expected when you click the button.

Avalon ties XAML to back end code using a mechanism called "Routed Events." These are exactly what they sound like—events routed between the separate XAML UI and the managed-code runtime.

As such, you need to declare the event handler to use a RoutedEventArgs argument like this:

   void ButtonClick(object sender, RoutedEventArgs e)
   {
     System.Windows.MessageBox.Show("Hello World to:" + 
        textBox1.Text);
   }

Now, if you run the application you'll see the WPF vector-based engine in action, as shown in Figure 3.

So, you've now finished your first venture into the world of Avalon. It's probably not too exciting yet, but at least you have a nice grounding in the technology.

Previous Page

Next Page