An Overview of Windows Presentation Foundation : Page 4

Tools, Imaging, and Data Binding
As I'm writing this article, Microsoft Expression Interactive Designer is not yet available for download. However, there are third-party tools that can help you create exciting UI designs.

Figure 13: 3-D designing in ZAM 3D.

Electric Rain's ZAM 3D
Electric Rain ZAM 3D is a full-featured 3-D modeling application that enables easy creation, customization, and animation of 3-D interface elements for WPF applications. You can use ZAM 3-D to export 3-D graphics into XAML code. You can then directly integrate the XAML files created with ZAM 3-D into your application development environment to create rich and engaging user experiences.

Figure 13 shows a 3-D model rendered using ZAM 3D. To export the graphics as XAML, go to the File menu, choose Export, and save the XAML code to a text file.

When you double click on the saved XAML file, it will be loaded in IE as a WPF application (see Figure 14).

MobiForm's Aurora XAML Designer for WinFX

Figure 14: The saved XAML code loaded as a WPF application.

Aurora is another visual designer that produces XAML documents from the Microsoft Windows Presentation Foundation Object Model.

You can either use Aurora as a standalone application (see Figure 15) to design your UI, or you can use Aurora within Visual Studio 2005 (see Figure 16).

Figure 15: Using Aurora for WPF UI design.

Figure 16: Aurora's integration with Visual Studio 2005.

To use Aurora within Visual Studio 2005, right click on a form (such as Window1.xaml), select the "Open with" item, and select Aurora.

Imaging
Besides 2-D and 3-D graphics, WPF also comes with extensive support for imaging. For example, the following code shows how to clip an image using a geometry control (see Figure 17).

Figure 17: Clipping an image.

   <Canvas xmlns=
     "http://schemas.microsoft.com/winfx/avalon/2005" 
     xmlns:x=
     "http://schemas.microsoft.com/winfx/xaml/2005"
     Background="Ivory" LayoutTransform="scale 1">
     <Image Width="400" Canvas.Top="75" 
       Canvas.Left="10" >
       <Image.Source>
         <BitmapImage UriSource="C:\Sunset.jpg" />
       </Image.Source>
       <Image.Clip>
         <EllipseGeometry RadiusX="200" RadiusY="100" 
           Center="200,200" />
       </Image.Clip>
     </Image>
   </Canvas>

Data Binding
Any decent application worth its salt would make use of data. And in WPF, you can bind UI elements to a wide variety of data sources, including XML data, Web services, and of course, databases.

To demonstrate data binding in WPF, I have built a simple RSS reader. Listing 4 shows my XML Data Provider defined to point to an online resource (an RSS document). It is then bound to a ListBox control that displays a list of titles contained within the RSS document, as well as a TextBox control that displays the description of the news item.

When the items in the ListBox are selected, the TitleChanged event fires. This event will then set the DataContext property of the StackPanel control so that the description for the selected news title will be displayed in the TextBox control.

   Private Sub TitleChanged( _
      ByVal sender As Object, _
      ByVal args As _
      SelectionChangedEventArgs)
   
      Dim lstbox As ListBox = sender
      If lstbox.SelectedItem IsNot Nothing Then
         spDetails.DataContext = lstbox.SelectedItem
      End If
   End Sub

In this article, you have seen some of the features of WPF, the new graphics subsystem in Windows Vista. There is a lot more to WPF than I could possibly cover in just one article. Hopefully you now have a better idea of what WPF can offer. I will cover some other features of WPF in a future article.

Previous Page