Browse DevX
Sign up for e-mail newsletters from DevX


An Overview of Windows Presentation Foundation : Page 3

Among the numerous new technologies in Vista is the Windows Presentation Foundation (WPF, formerly codenamed Avalon). This article takes you on a whirlwind tour of WPF and shows how you can start preparing for Vista by developing applications today using the available SDK.




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

Building WPF Applications with VS 2005
Even though Windows Vista is not slated for release until the end of 2006, you can start developing WPF applications today using Visual Studio 2005.

Project Types
Figure 7: The three Avalon application templates.
Once you have installed all the prerequisites for WPF, you can develop WPF applications using Visual Studio 2005. To develop WPF applications, from the File menu choose New and then choose "Project...." Under the Avalon project type, you should see the three Visual Studio installed templates—Avalon Application, Avalon Web Browser Application, and Avalon Control Library (see Figure 7).

The Avalon Application template is similar to the standalone Windows application that you are familiar with today.

WPF aims to take advantage of the underutilized power of the video card and use it to enhance the user experience in Windows applications.
The Avalon Web Browser application is hosted within a Web browser. This type of Avalon application is well-suited for scenarios where you would want to refrain from deploying additional components to the client. As such, it runs within the context of a partial-trust sandbox. An Avalon Web Browser application runs entirely within the browser and uses pages instead of windows for navigation.

You can use the Avalon Control Library to create user controls that can be used by other Avalon applications.

Figure 8. Writing XAML: The figure shows some XAML in the Visual Studio editor.
Programmatically Generating the WPF UI
In the current version of Visual Studio 2005 (Release Candidate at the time of writing), there is no visual designer for WPF applications. That is to say, you cannot drag and drop controls from the Toolbox onto the design surface of a WPF application. You have to manually code using XAML (see Figure 8). However, it is expected that in the near future Microsoft will provide a visual designer for WPF applications.

Earlier on, you saw how to use XAML to create the UI of a WPF application. It is important to know that XAML is not the only way to create WPF applications. In fact, at compile time, all the XAML elements are compiled into a partial class (a new language feature in .NET 2.0, for both C# and Visual Basic 2005) and combined
Figure 9: Application Output: The compiled application running in a browser.
with the partial classes containing the application logic. Thus, instead of declaratively creating the UI of a WPF application using XAML, you can also programmatically create it using code.

I'll now show you how to write a WPF UI using code. Create a new Avalon Windows application and in the code-behind file of the default Window1.xaml (Window1.xaml.vb), add the event handler shown in Listing 2.

When you compile and execute the application, your output will look like Figure 9.

2D Graphics
As mentioned in the beginning of this article, graphics is one of the strengths of WPF. The code example in Listing 3 shows how you can draw 2-D graphics using one of the many graphics elements available in WPF.

In the above code, three rectangles are drawn using the Rectangle element. Each rectangle is filled with a color and bound to a Slider control. When each slider moves, the height of the corresponding rectangle changes and the value of the slider is displayed next to it (see Figure 10).

Figure 10: 2-D drawings.
Besides filling a rectangle with a solid color, you can also fill it with shades using a brush. For example, this code fills the first rectangle with the colors Lavender and Blue using the VerticalGradient fill method.

<Rectangle Width="50" Height="{Binding ElementName=slider1, Path=Value}" Fill="VerticalGradient Lavender Blue" Canvas.Left="10" Canvas.Bottom="325" /> <Rectangle Width="50" Height="{Binding ElementName=slider2, Path=Value}" Fill="HorizontalGradient Lavender yellow" Canvas.Left="60" Canvas.Bottom="325" /> <Rectangle

Figure 11: Applying gradient fills to the rectangles.
Width="50" Height="{Binding ElementName=slider3, Path=Value}" Canvas.Left="110" Canvas.Bottom="325" > <Rectangle.Fill> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="red"/> <GradientStop Offset="1" Color="green"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
In the preceding code, the second rectangle is filled with the colors Lavender and Yellow using the HorizontalGradient fill method. The third rectangle allows you to specify the various offsets to be used for the gradient fill. Figure 11 shows the effect of the various gradients fills.

Figure 12: Microsoft Expression Interactive Designer.
3-D Graphics
3-D graphics is the main highlight of WPF. While it is possible to create 3-D graphics by hand using XAML, it is too mundane a task to do. Instead, Microsoft is readying a new set of tools that will greatly simplify the task of creating XAML content.

Microsoft Expression Interactive Designer (codenamed Sparkle), a member of the Microsoft Expression family of professional design tools, allows application developers to create exciting user interface designs using a full spectrum of media types, including vectors, pixel images, 3-D content, video and audio, high quality text, and animation (see Figure 12).

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