Getting Acquainted with the Microsoft Expression Family

In a previous article, I introduced you to Windows Presentation Foundation (formerly code-named 'Avalon'), XAML (the new language for designing user interfaces and the link between designers and developers) and 'Cider' (the graphic designer for the next version of Visual Studio, codenamed 'Orcas'). In this article, you will explore a new set of tools from Microsoft, designed to help you express your creativity and achieve greater productivity. It also provides superior user experiences for the Windows platform and the Web. These tools are called Expression Graphic Designer, Expression Interactive Designer, and Expression Web Designer.

Each of these tools is designed for different areas of development, but the great news is that they help you achieve a great workflow. You can share objects across different stages of development and different tools (including Visual Studio) by exporting to and importing XAML code. You can copy and paste objects directly from the Expression designers to Microsoft PowerPoint or Microsoft Word, for example. Moreover, the Interactive Designer shares the exact same project structure and files with Visual Studio so you don't have to convert from one project to another, and you even can have the same project opened in both Interactive Designer and Visual Studio and have the changes made in one place be reflected in the other.

As a quick overview, the three members of the Expression family are:

  • Expression Graphic Designer is a professional illustration, painting, and graphic designer for creating on-screen, Web, and application user interfaces. Designers use this tool to create rich user interfaces, being sure that the final product will looked just like they designed it, and not the way developers could code what they imagined.
  • Expression Interactive Designer is a professional tool for creating rich user interfaces for desktop and Web applications. It seamlessly integrates with the Graphic Designed and Visual Studio, providing helpful features such as testing and deployment.
  • Expression Web Designer is a professional tool for creating sophisticated standards-based Web sites, using advanced CSS tools and writing fully compliant XHTML code.

All the three tools are available for a free trial as a Community Technology Preview release. Just follow the links above to download and install them.

Before going any further, especially if you are not familiar with WPF and XAML, I recommend that you read the previous article, and install all the components specified in the beginning.

In this article, I will give you a short introduction to the three designers. The next article will have the task of building an actual application.

Microsoft Expression Graphic Designer

The Graphic Designer is an advanced professional tool that breaks down the traditional separation between vectors and bitmaps, being a hybrid half-vector, half-bitmap painting and graphic designer. It provides advance vector and raster tools, and lets you export design elements to different formats and tools. Given then complexity of this tool, it's impossible to present it in an article, and even more in a paragraph of an article. Thus I only give you a short introduction and show you several pictures. For the rest, I'll let you try it for yourself, and I recommend downloading and watching the training clips available on the Microsoft home page.

As I already said, the Graphic Designer is a hybrid tool, half vector based, half bitmap based. It provides two kinds of layers; as you may guess, a vector layer and a bitmap layer, actually called a pixel layer, offering features such as merging layers or transforming from one type to the other.

If you are into designing, I'm sure you have a graphic tablet, and the good news is that the Graphic Designer is pressure sensitive when you use such a drawing tool.

One of the most powerful features is the non-destructive transformations of bitmaps inside a vector layer. With classical painting and designing software, you can apply all sorts of effects (such as light correction, shadows, sharpness, blurring, and so forth), but once the effect is applied, the bitmap is permanently altered. Of course you can undo it, but if you applied a gamma correction, followed by a sharpness and then an emboss effect, and you want to undo the gamma correction, you're stuck because you have to undo all the following transformation. That's not the case with the Graphic Designer because of the dynamic, non-destructive effects, which allow you to turn off and on any effect applied on a bitmap inside a vector layer, or modify the parameters of that effect.

In the picture above, you can see the Attribute/Effects window displaying a list of three filters—Emboss, Charcoal, and Gaussian Blur—of which only the last one is turned on. From this window, you can add new filters, remove one or all of them, or change the attributes of a filter.

In the Graphic Designer, brushes are editable vectors. By default, it provides a large and variant set of built-in brushes, but you can define your own brushes and strokes.

Another powerful feature is the variations that allow you to randomize the strokes and brushes, varying the hue, saturation, stroke, or fill.

Just to see an example, create a new document with a vector layer (File > New) and open the Variations window show above (Windows > Variations, or simply F9). Initially, the variations are turned off, but by pressing the Enable/Disable All Settings button, the above window will show. Now you can edit:

  • Hue Variability for Stroke and Fill
  • Saturation Variability for Stroke and Fill
  • Lightness Variability for Stroke and Fill
  • Width Variability
  • Variable Width Randomness
  • Random Skeletal Strokes
  • Transparency for Strokes and Fill

Go to the Toolbox (shown in the picture below), select the Twirl Star, or simply tress J (notice that the buttons with a tiny arrow in the bottom-right corner have multiple options and in the image below the button shows a rectangle) and then play around with the Painting Styles, like I did in the image below.

   

Then, you can start to draw and you will see the little magic the Graphic Designer is doing for you.

Of course, you can get different results, depending on the values you set. But, imagine changing those particular values for each and every one of the stars you drew. The variations come in hand when you have to design a lot of similar things with different kinds of variations.

One of my favorite features, at least in what concerns bitmaps, is the Photo Montage. It enables you to combine various shots of the same target in a single bitmap (inside a vector layer). I'll show you a few examples that I put together from pictures that I've taken myself.

In the first example, I used three pictures of the statues of Moses by Michelangelo (displayed in the San Pietro in Vincoli Basilica in Rome) and merged them into a single image:

The actual pictures have a resolution of 1600 x 1200, but of course that's too much to show you here, so I scaled the document so all the three of them fit on the screen. The result is amazing. If you use the Advance Blending option for the Photo Montage, you'll get a very accurate picture (though sometimes parts of it could be a little distorted). By the way, the little arrows from the corners of the object help you resize it (by keeping the Shift key pressed when you do it, the original ratio is maintained) and the little hooks on the middle of each margin allow you to rotate the object.

But that's a static image. The Graphic Designer can to much more and I'll show you with a new example of three shots of the Amboise Castel in France (that's the place where Leonardo da Vinci spent the last years of his life).

As you can see here, there are three incomplete images of the castle and two of them are full of people on the move, people who change their positions. But, it turns out that the Graphic Designer can handle that very well and create a great image of the castle with those people in it:

You can see a little distortion in the middle of the lawn, but all the rest is good and the people in the middle did not affect the final result.

And, the final example will show three images of the same painting called The Napoleon Coronation by David Jeacques Louis displayed at the Louvre in Paris. In the first image, you can see four bitmaps, but I only used the top three to create the montage (the fourth one is only for an overview of the actual painting).

Although it shows some white spaces in the final result, the newly created bitmap is so close to the original painting that you can hardly spot any distortions (there is a little bending to the right of the left part of the bitmap).

You can export your documents to a variety of image formats (such as TIFF, PNG, JPEG, GIF, BMP, and Photoshop PSD), PDF, encapsulated PostScript format, and XAML. That is very important for the workflow because it allows you to use objects created with the Graphic Designer in the Interactive Designer and the Web Designer. The XAML export provides a series of settings, including saving the document as a canvas or resource dictionary (which allows you to access each object individually), rasterizing options, image strokes vectorization, and the like, and provides a preview, enabling you to see both the graphic representation of objects and the XAML code on the fly.

All in all, the Expression Graphic Designer is a very powerful tool that can produce amazing things in skilled hands. If you wonder what it has to do with you as a developer, remember that all good things come to those who wait. You will see this tool at work in a future article when you will do a face lifting to the calculator application from the previous article.

Getting Acquainted with the Microsoft Expression Family

Microsoft Expression Interactive Designer

The Interactive Designer is an environment for creating Windows applications based on WinFX, the new API for Windows Vista—the upcoming operating system from Microsoft. The new API is also available for Windows XP through the WinFX Tuntime Components. Windows Vista uses features such as 3D visualization, transparency, animation, advance user interface controls, all on top of a vector-based system. The Interactive Designer allows you to use all of these new exciting features to build richer user interfaces.

Because the Interactive Designed is built on top of WPF, it fully leverages the power of WPF, and because WPF uses a vector-based system, the Interactive Designed is a vector-based application. That means you can zoom in and out of the workspace or the art board, and everything scales accordingly.

[eid_workspacezoom.jpg]   [eid_artboardzoom.jpg]

The first picture displays the zoom tool for the workspace, and you can see that as you zoom in and out, all the panes and controls inside the Interactive Designed scale too. The second picture displays the zoom tool for the scene you are building. This is a first glimpse of want you can do with WinFX because all Vista applications behave the same.

On the right side of the window, you can see a list of panes that provide access to the controls, properties, files, and so forth of your project. The most used panes are:

  • Tools: Provides basic drawing and handling features (select, zoom, grab)
  • Projects: Displays the list of files that are part of the project; it is the exact same list of files you see in Visual Studio if you open the project there
  • Library: Provides the container for the controls you can use in a scene
  • Appearance: Allows you to change the visual appearance of the selected element
  • Properties: Displays the list of properties of the selected element
  • Layout: Manages the layout settings
  • Data: Manages project's data sources (XML or CLR object)
  • Events: Allows you to add and remove handlers for the control's events
Note: One thing that you should know is that all these panes and controls that represent the user interface of the Interface Designer actually were created with the Interface Designer.

As I was saying earlier, the Interactive Designed and Visual Studio share the same project structure (regardless of whether the code-behind is written in C# or VB .NET, the two language supported so far). That means you can save your project in the Interactive Designer and then open it with Visual Studio without any conversion being needed. Moreover, if it is simultaneously opened in both, whenever you change something on one side and save the project, you are notified in the other program. You can see this in the following picture with a demo project in C#.

[eid_project.jpg]

The documents you create in the Interactive Designer are called scenes, and are written in XAML. For each XAML file, there is a code-behind file, written either in C# (in which case, the extension is xaml.cs) or in VB .NET (in which case, the extension is xaml.vb). Just as with 'Cider', you can visualize the scene (or windows) in Designer, see, and edit the XAML code and the code-behind file; with the Interactive Designer, you have the same features—except that this is a much more powerful tool than the designer for Visual Studio, codenamed 'Orcas'.

But, you don't actually need Visual Studio to implement the business logic and test your application. You can do that inside the Interactive Designer. It's not as powerful as Visual Studio, but it offers IntelliSense and you can use it to write simple things, and of course, you can operate changes on code written in Visual Studio.

[eid_intellisense.jpg]

XAML is the link between the Graphic Designer and the Interactive Designer. You can export objects from the Graphic Designer in XAML and then import and use them (and change them if needed) in the Interactive Designer. This way, you can create the graphic elements for your application from the powerful Graphic Designer and then build the user interface with these elements in the Interactive Designer.

A few quick tips on the Interactive Designer

I'll just give you a short introduction on a couple of main aspects of the interactive designer, but let me remind you that in this article you won't be building an application.

The art board is the area where your scene is displayed. Under it, there is the timeline area that contains a tree of the objects that are part of the scene, arranged by their Z Order (well, that can be changed).

[eid_timeline.jpg]

Each scene has a document root, which is actually a container control. Such a control provides automatic layout for all the controls placed inside it (and of course, you can add as many containers as you want to your scene). When you select a container control, the art board displays two blue bars on top and at its left.

[eid_scene_1.jpg]

When you hover the mouse over these bars (with the Selection tool active in the Tools pane), a red line is displayed. Click the blue bar to add dividers to the grid container control, thus creating columns and rows (as many as you want). You can use the Library pane to add controls to the scene, and you can do that in several ways:

  • Double-clicking the control in Library automatically adds the control on the scene as a child of the selected element in the tree from the Timeline window.
  • Select the control and then use the mouse to define the area in which it will be created in the scene.

When you select a control, a blue thin rectangle is displayed around it; when you double-click it in the Timeline's tree, an additional thick yellow line is shown.

[eid_scene_3.jpg]

When the control is selected, it shows four looks (seen in black) that can be either locked or unlocked (this simply changes by clicking them with the mouse). When a lock is closed, that side of the control is connected to the nearest grid line; this means that when the window is resized, that edge of the control follows the grid separator. When the lock is opened, changing the position of the grid separator will not affect that side of the control.

[eid_scene_2.jpg]

If you just added a button like I did, you may want to add a handler for the click event so that it displays a message when you click it. For that, you first have to open the Events pane (View > Events) and select the button control. Then, press Add and select the Click event. Type a name for the method, such as OnButton1Click, and press Enter. The handler is added to the code-behind file, and you can show a message:

private void OnButton1Click(object sender,
                            System.Windows.RoutedEventArgs e)
{
   MessageBox.Show("Hello Expression Interactive Designer!");
}

To test how it works, just press F5 (Project > Test Project) and you will see the scene shown inside the application's window. When you press the button, the message is displayed.

You can take a look at the XAML code the designer has created for this scene, which is pretty simple because the scene itself is very simple.

<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="DemoProject.Scene1"
   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>
   <Button HorizontalAlignment="Left" VerticalAlignment="Top"
           Margin="15.5620746558121,19.4525933197652,0,0"
           Width="208.791168298813" Height="101.153485262779"
           x:Name="Button" RenderTransformOrigin="0.5,0.5"
           Content="Button" Click="OnButton1Click" />
</Grid>

Getting Acquainted with the Microsoft Expression Family

Microsoft Expression Web Designer

Web designing is not one of my areas of interest, so I cannot tell you too much about this tool. What I can tell you is that you can use the Web Designer to create CSS-based, XHTML-compliant sites. You can choose the schema you want for your document and it creates the appropriate code and highlights non-conformant custom-code. The compatibility checker shows you instant compatibility problems, so they can be fixed during the design phase, and the accessibility checker verifies the conformance with the accessibility standards.

The Interactive Designer offers sophisticated CSS-based layouts that can be directly changed in the designer by modifying margins and padding. The CSS rendering engine show the pages with a high accuracy in respect for the final representation in the browser. It comes with a series of templates that can be used to create Web pages or parts of them.

The Designer creates CSS styles, thus avoiding repetitive creation throughout the site. It provides IntelliSense in code view, and the CSS reporting tells you what styles are used where so you can better manage the styles usage.

It also allows you to create and deploy ASP.NET 2.0 Web pages. It provides access to ASP.NET 2.0 controls and their properties that are available within Visual Studio 2005, but rendered with the designed surface of the Web Designer. ASP.NET pages can be viewed locally, without using an actual Web server.

Conclusions

Microsoft Expression Graphic Designer, Expression Interactive Designer, and Expression Web Designer are powerful tools that can help you build richer user experiences. Due do their complexity, it's impossible to fully show all their features in a single article; that's why I decided only to outline some of them. You will see the Graphic Designer, and especially Interactive Designer, at work in the future article, when you will do a face-lift on the simple calculator you built in the previous article. However, I strongly recommend you to follow the video tutorials available on the Expression's Web page.



About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • VMware vCloud® Government Service provided by Carpathia® is an enterprise-class hybrid cloud service that delivers the tried and tested VMware capabilities widely used by government organizations today, with the added security and compliance assurance of FedRAMP authorization. The hybrid cloud is becoming more and more prevalent – in fact, nearly three-fourths of large enterprises expect to have hybrid deployments by 2015, according to a recent Gartner analyst report. Learn about the benefits of …

Most Popular Programming Stories

More for Developers

RSS Feeds