Using Expression to Design the XAML
Microsoft Expression is a far more sophisticated tool for designing XAML UIs than the basic Cider tool that currently comes with the VS.NET WinFX toolset. In this section, you'll expand on what you saw earlier to build a XAML UI that you will then tie into code using Visual Studio.NET in the same manner as you saw earlier. Note that this section should also show you how designers and coders can work separately yet together using tools that cater to each group's skill sets and needs.
|Figure 4. Creating an Expression Project: The figure shows the Expression interface when creating a new project.|
Start Microsoft Expression, create a new Project, and then select the Windows Executable Project type (see Figure 4
This creates a Visual Studio-compatible project containing the XAML files and code-behind C# files. You can edit the code in Expression if you like, but the editor doesn't have the full integrated debugging and other facilities that coders are used to. But the neat feature is that Expression allows designers and coders to share a common file format for managing projects.
You can now use the tools in Expression Interactive designer to design a more sophisticated GUI. In this example, I've designed a similar GUI to what you saw earliera simple Hello World application with a label, a textbox and a button. However, I've used the rotation and parallelogram effects that Expression offers to make it a little more funky (see Figure 5).
|Figure 5. Designing a User Interface using Expression: This is the same Hello World application, but using Expression's parallelogram and rotation effects.|
Expression saves a .csproj
file along with all the XAML and .CS files that are necessary to run it, so after creating the UI, you can now open and use the same project in Visual Studio 2005.
When you open the project in Visual Studio 2005 you'll see that the project setup is pretty much the same as the one you saw earlier when you created a new WinFX Windows Application. One minor difference is that Expression organizes your XAML as "scenes" instead of "Windows," so the underlying XAML is a little different, and the XAML is rendered in a scene container when you run it (see Figure 6
|Figure 6. Expression-based GUI: The figure shows how the Expression-based GUI looks when running in Visual Studio 2005.|
You can now add code behind the Button control in the same way as for a Windows application; however, you might have to massage the XAML a little as the integration is not fully there yet. In some cases you may get an error associated with the <Trigger>
tags that Expression adds. Simply delete these and your application should run happily.
shows the application running (using the Scene Viewer), and as before when users click the button they see the Hello, World message.
In this article you got an introduction to the Windows Presentation Foundation, formerly Avalon, and began to investigate the flexibility that a vector-based rendering engine gives to your Windows UI applications. You built a simple application in a couple of different ways, first using the early access version of 'Cider', which is the XAML editor that will be built into future versions of Visual Studio 2005, and then using the Microsoft Expression Interactive designer. Because the file set for projects in Expression and Visual Studio 2005 are compatible, you should understand how a graphics designer could use Expression to prototype an application before giving it to a developer. The developer can then take the output project of Expression and add programmatic logic to complete the application.
The next article in this series will go into a little more depth, using Visual Studio 2005 and Cider to build 2D Windows forms applications that use this new technology. Future articles will also explore the 3D aspects of the API as well as how to leverage the new Aero functionality of Windows Vista. It should be a fun ride!