RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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

You've probably heard about Avalon (now Windows Presentation Foundation, or WPF), and maybe seen screenshots or a demo, but now you can try it out yourself. Get started building next-generation Windows applications now.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date