- Exploring the Windows Presentation Foundation (WPF)
- Where Is the Windows Presentation Foundation?
- Extensible Application Markup Language: The Core of the WPF
- Taking Windows Presentation Foundation Everywhere
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Extensible Application Markup Language: The Core of the WPF
This successful blurring of the lines between designer and developer requires the Extensible Application Markup Language (XAML for short, pronounced ZAM-uhl), an XML syntax for explicitly defining objects and placement onscreen. Listing 1 shows a sample XAML script.
Listing 1 Sample XAML script.
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
mc:Ignorable="d"
Background="#FFFFFFFF"
x:Name="DocumentRoot"
x:Class="FollowThePointer.Scene2"
Width="640" Height="480">
<Grid.Resources>
<Storyboard x:Key="OnLoaded"/>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<RichTextBox FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="62,134,0,0" Width="134" Height="47" x:Name="RichTextBox" Background="{x:Null}" RenderTransformOrigin="0.5,0.5" Foreground="sc#1, 0.921881437, 0.04365848, 0.04365848">
<FlowDocument AllowDrop="True" FontSize="11" FontFamily="Tahoma" TextAlignment="Left">
<Paragraph><Run>This is just a text block on the screen</Run></Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
When rendered on a computer running .NET 3.0 (Windows XP or Vista), the XAML will create the result shown in Figure 2.
)
Figure 2 A simple XAML text presentation.
Breaking down the building blocks of the XAML code in Listing 1 isn’t too difficult. In fact, if you have some HTML or XML code experience, you’ll see some common threads.
First, you need to define the area that your XAML code will occupy, using the Grid tag. The code sample in Listing 2 shows the Grid parameters.
Listing 2 Parameters for the Grid tag.
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
mc:Ignorable="d"
Background="#FFFFFFFF"
x:Name="DocumentRoot"
x:Class="FollowThePointer.Scene2"
Width="640" Height="480">
</Grid>
Following the Grid tag, you can add a text block using the RichTextBox as shown in Listing 3.
Listing 3 Adding a text block with RichTextBox.
<RichTextBox FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="36,57,0,0" Width="211" Height="99" x:Name="RichTextBox" Background="{x:Null}" RenderTransformOrigin="0.5,0.5" Foreground="sc#1, 0.921881437, 0.04365848, 0.04365848">
<FlowDocument AllowDrop="True" FontSize="24" FontFamily="Tahoma" TextAlignment="Left">
<Paragraph>This is just a text block on the screen</Paragraph>
</FlowDocument>
</RichTextBox>
Obviously, this isn’t a very exciting example, but it becomes more exciting when a new factor is introduced: Designer and developer can work on this file simultaneously. Anyone who has been involved in a project in which developer and designer had to work together will appreciate this statement. No guesswork is involved on the developer’s part when taking the file from the designer, because both use tools that interact with XAML. Even more exciting is the fact that Microsoft has set up the workflow process with XAML to allow designers and developers to work continuously on the XAML files. This feature allows companies to deliver rich, engaging, and interactive solutions more effectively.
Many other objects can be added to your projects—images, 3D, video, text, buttons, form elements, and so on. You’ll find that objects such as text fields can be changed and controlled through the Windows Presentation Foundation. If it’s on the presentation layer, then you control it.
Tools for WPF Design Solutions
WPF tools coming out in early 2007 mainly focus on designers. The two tools you want to look for are Microsoft Expression Graphic Designer and Microsoft Expression Interactive Designer, both from the new family of Expression tools that also include a web tool.
Microsoft Expression Graphic Designer actually was released in late 2005 to the design community. The focus of Graphic Designer was to give Microsoft something that it didn’t have previously: a serious illustration tool. The feedback among graphic designers is that Microsoft has delivered a solid illustration tool. Figure 3 demonstrates the types of illustrations you can create.
)
Figure 3 Microsoft Expression Graphic Designer allows you to export professional-quality illustrations to XAML.
While Graphic Designer still lives in the shadow of Adobe Illustrator, it’s clear that this is a solid version 1.0 contender. This time Microsoft isn’t kidding (as we all thought with past Microsoft graphics tools).
What separates Graphic Designer from other graphics tools is its tight integration with the Windows Presentation Foundation. The clearest example of this is taking an illustration such as the one shown in Figure 3, exporting the file as a XAML file, and then being able to import the identical document into any other tool that supports XAML. Figure 4 shows the illustration from Figure 3 in Microsoft Expression Interactive Designer.
)
Figure 4 A design created in Microsoft Expression Graphic Designer, shown in Microsoft Expression Interactive Designer.
A key element of the Windows Presentation Foundation is interactivity. You can use Microsoft Expression Interactive Designer, a tool designed from the ground up to build interactive XAML solutions, to add animation and objects.
Interestingly, Microsoft Expression Interactive Designer is a complete development environment that builds deployable solutions in much the same way you expect to see with Visual Studio. The difference is that the tool, built with the Windows Presentation Foundation, is flexible and engaging (two words you wouldn’t ordinarily hear applied to Microsoft products).
Future tools from third-party vendors—such as Electric Rain, with its XAM3D modeling tool—continue to hit the market. Certainly, when Windows Vista ships in 2007, I wouldn’t be surprised to see a whole slew of visual tools being released to support XAML.
Tools to Engineer WPF Solutions
While the immediate focus of Windows Presentation Foundation tools is the designer, that doesn’t mean that the developer is left out in the cold. XAML code can be edited and controlled effectively in Visual Studio 2005. There are even third-party add-ons such as Xamlon, a XAML snap-on to Visual Studio 2003 that you can use to work on XAML and produce solutions for the Windows Presentation Foundation.
The next release of Visual Studio, code named "ORCAS," will come with the developer tools necessary to build large-scale and complex solutions for Vista. As you can imagine, ORCAS can work with the same files as Interactive Designer, allowing the developer and designer to work on the same project files.