Think different every day



| |

Microsoft® Expression® Blend

Reviewers Guide

July 2007

For more information, press only:

Haley Pearson

Waggener Edstrom Worldwide

(425) 638-7000

haleyp@

Rapid Response Team

Waggener Edstrom Worldwide

(503) 443-7070

rrt@

Microsoft Corp.

One Microsoft Way

Redmond, WA 98052-6399

© 2007 Microsoft Corp. All rights reserved.

The information contained in this document represents the current view of Microsoft Corp. on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.

Microsoft® Expression® Blend 1

Introduction 1

Introducing Expression Blend 1

Expression Blend Customer Profile 2

Expression Blend Key Messages 3

Overview of Feature Areas 4

Tools for Creativity 4

Codeless Interactivity 4

Efficient Collaboration 4

Top 10 Reasons to Buy Expression Blend 5

Hands-on Exercises 8

About This Section 8

Build a Photo Gallery 8

Expression Blend 2 May Preview 33

System Requirements 35

Introduction

Welcome to the reviewers guide for Microsoft® Expression® Blend. The purpose of this document is to assist your evaluation of the product.

The Microsoft Expression family of products is being introduced by Microsoft Corp. to address the needs of those in the professional design community who wish to design and create content based on the Microsoft technology stack.

Whether that content is for the desktop or the Web, the Expression products will allow designers to fully engage with developers to finally bridge the gap in the designer-developer workflow. This will bring together the best minds in design and development to create applications and Web sites with a focus on a great user experience.

User experience is a subject that Microsoft is passionate about, and Windows Vista® and the 2007 Microsoft Office system are both examples of what can be achieved in this space. The combination of the Expression tools for designers with Visual Studio® 2005 for developers will see the birth of a new era in software and Web site development with user experience at its center.

Introducing Expression Blend

Microsoft Expression Blend is a professional design tool for creating engaging desktop and Web-connected experiences for Windows®. It empowers designers to create rich designs with Expression Blend directly, or by importing existing assets from other Expression Studio products.

Expression Blend will bring excitement to the professional design community with its focus on building Extensible Application Markup Language (XAML)-based interfaces in a new and flexible way.

A fully featured professional design surface gives users visual creativity and the knowledge that the underlying code being created is clean and purposeful. Users can have confidence that what they see on the design surface is a direct reflection of the final output of the project.

Data binding, animation and interactive behaviors all constitute what Expression Blend is built for, enabling designers to offer a compelling user experience in their final product.

Expression Blend Customer Profile

Expression Blend will be used by customers worldwide for a wide range of activities within the software design process. These customers will focus on areas of design that fall within these broad categories:

• Application user interface

• Interactivity

• Data visualization

Application user interface

These users will enjoy the approach to design that Expression Blend offers. The real-time design surface allows them to create vector graphics and layout with confidence and ease. Each stroke of the brush or change of a property made at design time survives with full fidelity into the final product, eliminating wasteful and costly iterations and implementations in the workflow. Create compelling user interface designs that use a full spectrum of media types, including vector and pixel art, video, audio, text and 3-D.

Interactivity

Expression Blend offers an intuitive and efficient means of breathing life into an application by way of animation, triggers and customizable behaviors between objects. Users can easily create and edit behaviors, and link interface elements to each other or to other inputs. These animations can be managed completely in Expression Blend or extended by developers in Visual Studio.

Data visualization

Applications can be created with a range of technologies, all of which require the designer to deal with complex code entities that belong in the world of the developer. Expression Blend allows designers to drag and drop a wide variety of technology- and data-centered controls onto their design surface and then style them without having to touch the code view. Actual data is displayed at design time, thus providing a true visual on how it will appear in the user interface. The project can move back and forth between coders and designers as often as needed, with developers using the power of Visual Studio 2005 and designers using Expression Blend.

Expression Blend Key Messages

Your sandbox just got bigger

Get involved with the new wave of next-generation applications that blend the best of the Web and the desktop. Design cutting-edge user interfaces and collaborate with developers to bring these stunning new types of applications to life.

Art, meet science

Think of it as your virtual playground. Mix design elements such as video, vector art, high-quality text, animation, pixel images and 3-D content with a full toolbox of advanced controls and containers to create engaging, cinematic user interfaces.

Go beyond the browser

Give your users something better — better performance, better usability, better experiences. Now your designs can break out of the browser to leverage the full power of the desktop.

Overview of Feature Areas

Tools for Creativity

Users enjoy the flexibility and control they get as they express their creative power in this high-quality design surface. Tap into all the resources Expression Blend makes available, including vector graphics, animations, media capabilities and 3-D.

Integration environment. Take advantage of a wide range of tools, including composite vector and bitmapped artwork, video, audio, rich text, controls and containers. The WYSIWYG design surface ensures that your creation maintains fidelity.

High-quality typography. Produce high-quality typographic designs with Microsoft ClearType® support.

Animation. Multiple timelines per object allow a great amount of flexibility. The timelines are time-based, which gives you better control. Hands-off timeline capabilities enable you to link actions together.

Customized controls. Customize the look and feel of controls without writing code. Define your own reusable custom styles.

3-D support. Import 3-D models and integrate them into your user interface, and adjust surface materials. Accomplish 3-D animation in true 3-D using camera position and events.

Codeless Interactivity

The core underlying purpose of Expression Blend is to generate XAML markup, sparing the user the time and potential hassle of going “under the hood.” Focusing on the creative design without having to put effort into code or XAML markup really helps the designer avoid unnecessary effort.

Data binding. Bind your interface elements to each other or to data from Extensible Markup Language (XML) and .NET objects so that these objects update dynamically and the application comes to life even before you collaborate with code writers.

Dynamic layout controls. Design adaptive layouts using containers that automatically handle the scaling and repositioning of content — Grid and Grid Splitter, Wrap Panel, Stack Panel, and more.

Powerful user interface controls. Add robust functionality to your interface with classic, familiar controls and new special application controls — including ready-made buttons, listboxes, checkboxes, ink canvases, tree views, expanders, sliders and tab controls.

Efficient Collaboration

Harness the power of XAML and the Microsoft .NET Framework 3.0 to ensure that the designs created in Expression Blend carry through to the final Microsoft Visual Studio project. Designs can be used intact in the final product, so you keep creative control. Celebrate amazing new workflow potential as designers and developers work on the same assets.

Real-time visualization. See externally bound data in its place at design time, and then work on styling up this live data directly. Make immediate creative decisions based on real-time previews.

Asset utilization. Incorporate graphic assets from Microsoft Expression Design, as well as other leading creative professional tools, using XAML exporters.

Visual Studio compatibility. Sharing projects with Visual Studio enables tight integration between developers and designers, and truly allows the designer to have greater control over the user interface. Visual Studio also enables debugging, Web services design and enterprise application life cycle management.

XAML. Direct editing of XAML code is possible, as well as sharing this same code with Visual Studio. Expression Studio and Visual Studio speak the same “language.”

External resources. Leverage existing external resources, such as custom controls, by importing and referencing .NET code libraries. Then enjoy the simple drag-and-drop actions in Expression Blend to make use of the resources in the design surface.

Top 10 Reasons to Buy Expression Blend

1. Enjoy a professional, modern interface.

Building a modern application requires a program that places the tools you need where you need them. With its familiar yet original user interface and a bevy of familiar design tools, Expression Blend lets you concentrate on the process of design instead of digging through nested menus and getting floating palettes out of the way. Enjoy the uniquely scalable, design-oriented interface of Expression Blend, built using the Windows Presentation Foundation (WPF). The Expression Blend interface maximizes the space for your work and includes features such as a dynamically filterable Properties panel to help you find what you’re looking for instantly.

2. Build compelling user experiences.

Designers are empowered to build great-looking user interfaces and engaging multimedia experiences. The result is a high-value front end to whatever software project is undertaken. Build cinematic and compelling user interfaces for applications on the Windows desktop, the Web, Windows Media Center, a kiosk or a Tablet PC. Take advantage of the .NET framework, and enable offline and online scenarios.

3. Maintain fidelity and control.

No longer are compositions and prototypes considered throwaway assets. Extra wasteful steps such as converting a concept into custom graphics can be eliminated. Designers are working on a common base: XAML code under the hood. The original art makes its way into the final product.

4. Simplify tasks.

What may have taken many man-hours of custom coding is now in many cases as easy as drag and drop, or setting a property. Creating a Visual Brush is a great example of this concept. Simply select an object of any type and make a Visual Brush Resource from the Tools menu.

[pic]

At this point the brush can be applied to the fill of an object and will automatically reflect on that object any visual changes that are applied to the original source, even at runtime. This effect is commonly used to achieve the look and feel of reflective glass.

5. Speed the product life cycle.

Reduce the time to market by cutting back on development time. Put more interaction directly into the user interface, where the designer has control. Plus, thanks to the close-knit integration between designers and developers working on a common asset library, collaboration takes on a whole new meaning, and that translates to efficient workflow. Reap the benefits of Expression Studio and Visual Studio products sharing project formats.

6. Experience cost savings.

Saving time is saving money. Consider also the ability to effectively integrate and utilize rich media content and incorporate other assets from other Expression products or third-party products and utilities. The common XAML base allows for great flexibility and new potential in this area. Code reuse, templates and resource-building features in Expression Blend also provide an excellent avenue to reduce overhead.

7. Use data visualization.

Imagination is a great thing in life, but not always at design time when trying to determine whether a certain look and feel will be appropriate for your data — that is, when your data is not there. Breathe some life (and perhaps some fresh air) into your work space, and allow Expression Blend to render your actual data in real time while you craft your latest masterpiece around and through it.

8. Work with a comprehensive set of controls.

[pic]

While in the course of constructing the greatest user experience ever, designers may find themselves in need of a wide variety of controls and gadgets to apply to their creation. Expression Blend offers an impressive armada of controls to assist in handling rich media and highly interactive interfaces, and they are all too easy to find using categories and quick keyword searches. The Asset Library pane containing these controls (depicted above) shows a search for a button in which a useful tool-tip description also is displayed when the item is selected.

9. Customize and reuse assets.

Users can customize various aspects of their work within Expression Blend in numerous ways. From controls to brushes, vector graphics and object templates, the opportunities to customize are virtually endless. Best of all, many opportunities to reuse these assets are accommodated.

10. Incorporate a professional timeline.

Expression Blend has a world-class timeline that is based on time instead of abstract frames. Animate individual properties of objects along one or more timelines by setting property keyframes, using on-screen motion-path editing for precise trajectory control.

Bottom line: If designers plan to create WPF or Microsoft Silverlight™ applications, or edit XAML markup for just about any occasion, Expression Blend is a tool they do not want to leave out of the toolkit.

Hands-on Exercises

About This Section

A complete walk-through covering most if not all of the features mentioned in this guide has been condensed into a single tutorial project. The project is designed to expose reviewers to a wide range of Expression Blend capabilities. It will walk you through building an application from scratch. While the application could be built around one’s own assets, it is recommended that you use the files prepared for this exercise: an XML data file, photo assets for the gallery and a simple 3-D model to show the 3-D capabilities of Expression Blend.

Please acquire these files from the CD by extracting the Zip file Expression Blend ReviewsGuide Project Files.zip.

Build a Photo Gallery

You will now create a rich photo gallery application using Expression Blend. [pic]

Getting started

• Launch Expression Blend.

• Select New Project, select WPF Application and name it Photo Gallery. We won’t be writing any code, so the language selection won’t matter. Click on OK.

[pic]

• Notice on the right side of the screen there is a Project tab. All files in the project are shown here; it looks just like a Visual Studio project. Let’s add some assets for this project. Right-click the top item in the tree, the project name called PhotoGallery.

• Select New Folder, and call it images.

• Right-click your images folder and select Add Existing Item. Now locate the images folder in the content that you downloaded, select all the items, and add them into the project. This does not reference files on your hard drive; rather, it physically copies the files into your project’s images folder.

• Now right-click the PhotoGallery project again, select Add Existing Item from the files that you downloaded, and select film.png, master.xml, wall3D.xaml and wall01.png. You have a nice graphic for the user interface, XML data representing the images, and a simple 3-D model that was exported to XAML by a third-party product called ZAM3D.

• Notice that you will be working with Window1.xaml, which was created with your new project. This is where you will design your layout and place all your objects for the application in this demo.

Establish the layout

Expression Blend gives you a collection of objects to work with while composing a project. Objects can contain other objects, and the entire collection of objects is shown in a tree structure in the left pane called Objects and Timeline. This is not the same as layers, and offers great flexibility and power.

Important new concept:

Double-clicking on an item in this tree sets the object focus on that item, also known as Scope. Scope is indicated by a yellow outline in this pane, and around the object in the design work space. This means that actions from the toolbar (adding buttons, rectangles, objects, and so on) will apply to and affect the object currently in Scope indicated in yellow, despite the fact that a different object elsewhere might be selected. Basically, whatever new assets or objects are added will go inside (nested under) the item in Scope (yellow outline).

Selection of an object is accomplished by a single click, and is indicated by the gray highlight on the item and with adorners (blue bars) around the object in the work space. A single click will not change the item in focus (Scope). Changing Properties in the Properties tab on the right will affect whatever items are selected, and not have an effect on the item in Scope (indicated in yellow). The same is true when creating animations, which apply only to selected items (in gray), not the item in Scope (yellow).

Selection is used to change the way objects look and behave (properties and animations). Scope (yellow outline) is used to change the way objects relate, nest or are organized in the object tree structure.

Below on the left, we see the Window object with a LayoutRoot object that is both selected and in Scope. On the right is a project where a “Gallery” item is in Scope, but two other items are selected. Only one object can be in Scope, but any number of items can be selected.

|[pic] |[pic] |

• Select the Window object by single- or double-clicking on it in the Objects and Timeline pane.

• Click on the Properties tab.

• Change the Width and Height to 1,000x600. Note that if you want quick access to any property, you can do a keyword search as shown here:

[pic]

• Still within the Properties tab, open the Brushes tab and click on the Gradient Brush.

• Click on the left gradient stop and choose a black color.

• Click on the right gradient stop and choose a dark gray (such as #FF3F3F3F).

[pic]

• Now we will position the gradient top to bottom rather than the default left to right. Click on the Brush Transform tool (on the left side of the toolbar, under the paint bucket).

[pic]

• Grab the center of the arrow to move it, and grab the ends to rotate into a position as shown. Note that holding Shift while rotating will help it snap to an exact position such as vertical.

[pic]

Next we’ll add a grid. A grid in Expression Blend is a type of container to help manage the layout of other objects within it. The project came with a default grid already inside the Window called LayoutRoot. Make sure the LayoutRoot grid Width and Height properties are set to Auto. We want to add another grid inside this; using the two grids gives us more control over layout.

• Set Scope on the LayoutRoot by double-clicking on it. Now, whatever we add from the toolbar will go inside this grid.

• Double-click on the grid in the toolbar, and it will be added to the LayoutRoot (or you can just draw the grid into the work space anywhere). If the grid is not on the toolbar, you can set Scope on it by selecting it from the menu.

Tip: Click and hold the tools that have a white triangle in the lower-right corner, and the other tools in that family will appear in the menu.

[pic]

• Right-click the new grid and rename it Gallery. Right-click it again and select Auto Size > Fill. This forces it to use all space available inside its parent object, which in this case is the LayoutRoot grid.

[pic]

• In the Brushes tab set the Background brush to a Solid black.

We will now divide this into sections to create the gallery layout.

• With the Gallery grid selected, click on the Selection tool (the black arrow at the top just under the File menu). Notice the blue bars on the top and left. Click in here to create two rows and two columns, as shown below. Don’t worry about exact positioning; you can always adjust this if you need to.

[pic]

• Switch the Gallery grid into layout mode with the toggle button in the upper left. Click on the lock button for the top row. This causes the top row to be fixed and not resize, which is what we want for the header.

[pic]

Build the header

• Select the Rectangle tool from the toolbar and draw a rectangle in the top row of the grid. Use the Corner Radius adorners to round the corners of the rectangle.

[pic]

• Using a gradient brush (Brushes tab, Gradient Brush), simply set the left gradient stop to black and the right gradient stop to the same dark gray color you used before (#FF3F3F3F).

• Place the Scope in the Gallery by double-clicking. Select the TextBlock tool (not a TextBox), and draw a TextBlock onto the work space positioned over the left side of the rectangle.

[pic]

• In the Properties pane, change the Foreground color to white. Change the Background to No Brush.

Tip: Remember that you can search for properties by name in the search box.

• Set the height and width to Auto.

• In the Text properties tab, set the font to Arial and the size to 72. You can change the text either by right-clicking the TextBlock and selecting Edit Text, or you can also find the text value in the Common Properties section of the Properties tab. Change the text to PhotoGallery.

• Select the “Gallery” portion of this text, and change its Foreground to a slightly lighter gray, such as #FF6E6E6E. Compare your results with this illustration:

[pic]

• With the Scope on the Gallery, add an Image object. To do this, open the Asset Library (arrows, the last toolbar item) and select the Image control (the keyword search comes in handy again here, as shown below). Notice the vast collection of controls that Expression Blend offers. (You can see even more by clicking on the Show All checkbox on the right.)

[pic]

• Once a control is selected from the Asset Library, it appears on the toolbar.

[pic]

• Draw the Image box over the end of the right side of the rounded triangle.

• With the image selected, open the Common Properties in the Properties pane. You’ll notice a Source drop-down box, which automatically displays all the images in your project. You can find your film.png at the bottom. Select it and you will see it appear in the project. Alternatively you could have clicked on the button to the right of this drop-down box and browsed for the image to use.

• Resize and position the image however you see fit.

• Run the project using F5 to view the application so far.

Build the left menu and right content panes

Remember that we created a vertical divider in our Gallery grid. Select and set Scope on the Gallery. (Double-click in the Objects and Timeline tree.)

First we’ll add a Grid Splitter control. This control allows us to have dynamic resizing between two cells in a grid. We will use the bottom left cell as the menu; to its right is the main gallery area. Let’s place a Grid Splitter between these and allow our users to adjust the view here.

• Select Grid Splitter, which is found in the Asset Library, or within the common controls toolbar. Simply draw it onto the lower vertical grid line. The height doesn’t have to go all the way across the grid vertically unless you want it to; it doesn’t have to be exactly on the grid line, but close is good.

[pic]

• Adjust the width to a reasonably small setting, just enough area to grab with the mouse at runtime.

• Make its Solid Brush color dark, such as the gray from earlier (#FF3F3F3F).

• Draw a rectangle in the left cell, and don’t worry about exact positioning or size. Right-click the rectangle and select Auto Size > Fill. Now change the Margin settings to 5 for all sides (in the Layout Properties tab). The rectangle may have taken on the styling applied in the last rectangle you drew. That’s great, because we want the same gradient and colors. Otherwise, be sure a gradient is applied, with the left being black and the right being dark gray. Remove the rounded corners or set them to zero by eliminating the Corner Radius (either from the design tool or from the Properties pane Appearance tab, RadiusX and RadiusY).

• Set the Stroke Brush to No Brush to remove the border around the edge.

[pic]

We are now ready to add our last two controls, which will contain the actual photo data.

[pic]

• With the Gallery in Scope, add a ListBox from the toolbar into the left menu area, again paying no attention to its size or position.

[pic]

• Right-click the listbox and rename it Menu.

• Set the width and height to Auto, and set the HorizontalAlignment and VerticalAlignment to Stretch. This time, set the Margin to 10 for all sides.

[pic]

• Set the background and BorderBrush to No Brush to make them transparent. Set the foreground color to white. The foreground is what the items in the listbox will take on — text in this case.

• Now you can repeat these same steps and put a listbox in the cell to the right, or you can follow these steps: Select the Menu object in the Objects and Timeline pane. Copy it using CTRL-C or by right-clicking and selecting Copy. Now set the Scope on the Gallery item by double-clicking on it. Paste with CTRL-P or by right-clicking the Gallery item and selecting Paste. Right-click and rename the copied item Photos. Now move this listbox into the right cell.

Tip: It’s helpful to set Scope on the Gallery and then select (single-click) the Photos listbox and move it, so that you can see the gallery grid lines while moving.

• Set the width and height to Auto, and set the HorizontalAlignment and VerticalAlignment to Stretch. Set the Margin of the Photos listbox to 5 on all sides, just like you did with the menu.

The Objects and Timeline pane should reflect these controls in this order:

[pic]

You’ve now experienced the basic procedures of how to add controls, change properties and work with files within the project. Let’s dive into creating some functionality including data binding and templates.

Data binding and templates for the left menu

We are now ready to add data into our photo gallery menu and Photos listboxes. We will also bind these two boxes together so that whatever is selected in the left menu will change what is displayed in the right photo collection.

• Select the left Menu listbox. In the Common Properties pane you will find an ItemsSource property. Click on the small box to the right of this to open the Data Binding dialog. You can also simply right-click the menu listbox and select Bind ItemsSource to Data.

• We first must create a new data source, which is XML in this case. Click on the +XML button. Then give the data source a name such as GalleriesDS, enter the location of the XML data, which is master.xml (in the root folder), and then click on OK.

[pic]

• The XML file contains several galleries, and within each gallery is a collection of photos. Bind the menu to the gallery names. Do this by selecting gallery (Array) in the Fields window. Then, near the bottom of the dialog, click on Define DataTemplate. Leave all the settings at their default.

[pic]

Note what is happening: The Menu listbox will display each gallery item in a StackPanel, and the text to display comes from the gallery name (of course). The ItemsControl and ItemsSource will be used later as a reference for which photos belong to each gallery item.

• Click on OK to apply this data binding to the menu, and you should see three gallery item names appear: Black and White, Hawaii and Santorini.

At this point, you are experiencing the display of real data in your application at design time, and can make visual adjustments to that data with full control and no surprises later.

• Right-click the Menu listbox and select Edit Control Parts (Template) > Edit a Copy. Click on OK in the dialog that appears. This creates a template for the listbox. Changes to the appearance of the list items in this mode will act as a style for the listbox control. Once the style is finished, it can be reused on other listboxes.

[pic]

• Select Bd, which is a type of container in the listbox. Change the alignment to be right-justified.

[pic]

• Now exit the editing template mode by clicking on the Scope Up button, which returns you to the Objects and Timeline pane.

[pic]

At this point, you’ll notice if you run the application (by pressing F5) that you have some basic functionality already in place, such as dragging of the Grid Splitter, selection of menu items, and access of data.

Data binding and templates for the Photos pane

Now let’s bind the photo collection to the menu so as to display the photos of the selected gallery item in the menu. This will require two types of data binding. The application must get data from the XML, but first it must get a reference from your menu object so it knows which photos to pull. We will bind it to both the menu and the XML data.

Bind the Photos listbox to the menu first by using the DataContext property.

• Select the Photos listbox. Locate the Common Properties tab and click on the small button to the right of the DataContext property.

[pic]

• Select Data Binding. Click on the Element Property tab. Locate your Menu object by expanding the nodes, and then scroll down and select SelectedItem : (Object).

[pic]

Note: What you are doing is binding the Photos gallery listbox by using the selected item from the Menu listbox.

• Click on Finish.

• Now bind the ItemsSource to the XML, similar to what we did with the menu, with one important difference. In the Common Properties tab, click on the small button to the right of ItemsSource (or right-click the Photos listbox and select Bind ItemsSource to Data). This time, use the Explicit Data Context tab. This allows us to go ahead and bind to the XML, but explicitly only to the subset of XML data that relates to that selected item from the Menu (which is defined by the DataContext setting we made earlier). Expand the Fields tree to the image field inside the photo (Array) node. Click on Finish.

[pic]

You see image names appear in the listbox. You can even try running the application (the F5 key) and notice that the image names change when you click on a menu item. Obviously the Photo listbox must offer image objects rather than text objects. No problem; this is defined by creating a template, much like was done for the Menu listbox. These templates control the way items appear in the listbox.

• Right-click the Photos listbox and select Edit Control Parts (Template) > Edit a Copy. Click on OK in the dialog that appears. Set Scope on the Bd object. Delete the default ScrollViewer node. Add a WrapPanel container inside the Bd object.

[pic]

• The WrapPanel is a fantastic control that includes useful flow and layout functionality. With it selected, find the ItemHeight and ItemWidth properties and set them to 120 and 160 respectively. This will maintain control of the image size to a specific thumbnail size in the listbox. Finally, check the two properties IsItemsHost and Focusable. (Remember to use the search box to find properties that are not obvious.) Now the wrapper knows it will be a host to the items that populate within it. Once again, notice the usefulness of visualizing real-time data. Click on the Scope Up button to get back to the main view of your object.

The container for the photos is now set. Let’s edit the styling using templates.

• Right-click Photos and select Edit Other Templates, then select Edit Generated Items (Item Template) and Create Empty. Name the template imageTemplate.

[pic]

This does just what is portrayed. We are creating a new, empty template for each generated item in the listbox.

• Add a Grid to the template, and then add an Image into the grid.

[pic]

We want to use a grid as a container here to offer better control over how the image is to appear and be positioned within the button. Grids are an excellent container for this type of control.

Now, to complete the data binding and make the magic happen, let’s bind the image source to the image name.

• Select the Image. In the Common Properties tab, click on the small button to the right of the Source property. Select Data Binding. Just as before, we want to use the Explicit Data Context tab; we’ll bind the image source specifically to the corresponding image called in from the XML data in the Photos listboxes’ own bindings that we defined earlier. This time, though, check Use a custom XPath expression and place a period (.) in the box, then click on Finish.

[pic]

Your template layout should now look like this:

[pic]

• Let’s center the images. Select the Grid. Set its width and height to Auto. Set Margins for all sides to 10.

Create animations

• Click on the Create new timeline button.

[pic]

• Name it mouseIn and click on OK. The F6 and F7 keys will toggle between Animation and Design work space layouts. You can zoom in on the timeline using the timeline zoom feature at the bottom. Just click, hold and drag to zoom in and out. Set the play head to 0.00.100 second.

[pic]

• Select the Grid. Change all the Margins to 1.

• Play the animation, and you should see the image enlarge. That sets the mouse-in, but we need a separate animation for mouse-out to return it to its original state. Click on the Create new timeline button again. Name it mouseOut and click on OK. Now move the play head to 0.00.100 second again, and with the Grid selected, change the Margins again back to 10. (Even if it’s already at 10, you want to change one and put it back to generate a keyframe.)

• Create Trigger events to play these animations. Select the Image object. To the left of (or above) the Timeline view is the Triggers panel. [pic]

Click on +Event to add a new event trigger. Where the event description starts with When, set it to read “When image MouseEnter is raised” (selected from the drop-down menus). Click on the + button to add a new action. Select the mouseIn animation and Begin for the command.

• Click on +Event to add a new event trigger. Where the event description starts with When, set it to read “When image MouseLeave is raised” (selected from the drop-down menus). Click on the + button to add a new action. Select the mouseOut animation and Begin for the command.

[pic]

Try running your project (the F5 key) and see that the animations take effect as you hover the mouse pointer over and outside each image.

Remember to use the Scope Up button to get back out and into the main view of your object tree.

• Now animate the gallery to zoom in when the left menu item changes.

• With the Photos listbox selected, click on the Create new animation button. Name it OnSelectedGalleryChange. Move the play head out to .6 second. Click on the Record Keyframe button. Go back to 0 seconds. Change the X and Y Scale to 0.

[pic]

• Stop animation recording by switching back to the Default view.

[pic]

• Select the Menu listbox.

• Click on +Event to add a new event trigger. Where the event description starts with When, set it to read “When Menu SelectionChanged is raised” (selected from the drop-down menus). Click on the + button to add a new action. Select the OnSelectedGalleryChange animation and Begin for the command.

Run the project (the F5 key). You’ll notice that the photos appear to zoom out from a centered position when you play this animation. Cool trick: Change the Center Point of the Photos listbox to X 0.0001 and Y 0.0001. This will give the effect that the zoom comes from the uppermost corner.

[pic]

A view of our progress so far is as follows:

[pic]

Create reflective glass

This is one of the easiest steps in the whole project, considering the dramatic effect and style it offers.

• Select the Gallery grid. Change the X and Y Scale to 0.4. Move the grid up a bit to make room for a rectangle below.

• From the Tools menu, select Make Brush Resource > Make Visual Brush Resource. Name the brush GalleryBrush.

[pic]

• Set Scope on the LayoutRoot grid. (Double-click to highlight with a yellow outline.)

• Draw a rectangle under the gallery and the same width as the gallery. Set the Stroke Brush to No Brush.

• In the Brushes tab, choose the Brush Resources tab on the right, and then locate your GalleryBrush and select it.

[pic]

• On the Transform tab, Flip the Y Axis.

• Rename this rectangle Mirror.

That’s it! Your visual brush is applied and fully interactive. Visual Brushes repaint onto other objects and mimic exactly what happens on the source object it was based on.

• Now, to make it look more like glass, use an Opacity Mask with a Gradient Brush. Set the right gradient stop to 0% alpha. Optionally, set the left gradient stop to about 40% alpha to give the whole reflection some transparency.

[pic]

• Use the Brush Transform tool (under the paint bucket on the left toolbar) and set the gradient to be vertical.

• Optionally, you could give it some skew on the X axis, and then align the rectangle with the bottom of your gallery.

• Run the project (the F5 key).

[pic]

3-D Animation – Apply the Visual Brush

Delete the Mirror rectangle from the project if you created it earlier. Let’s try something more impressive.

• Move the Gallery object to the bottom-left corner of the window. Optionally, resize it to eliminate some of the empty space in the gallery.

• Open the Wall3D.xaml file that was imported earlier (from the downloaded files).

• Select the Zam3DViewport object, and copy (CTRL-C).

• Back in your Window1.xaml file, double-click to set Scope on the LayoutRoot grid.

• Paste the copied 3-D object (CTRL-V). Move the 3-D object to the right.

• Expand the ZAM3DViewport object, and locate and select ViewportSurface.

• In the Properties tab is a Materials section. Click on Material, and then click on the Brush Resources tab and select your GalleryBrush.

• Repeat the process above using the ReflectionSurface object (within the Zam3DViewport).

[pic]

• Run the project (the F5 key).

[pic]

Expression Blend 2 May Preview

[pic]

Expression Blend 2 is under way, and a large part of its focus is about creating Silverlight applications for the Web. Expression Blend will be a tool of choice for designers creating Silverlight Web applications. The May Preview is available for download today.

The first thing you will notice is that it supports the creation of two new project types, one for Silverlight 1.0 (based on JavaScript), and another for Silverlight 1.1 (based on .NET-managed code).

[pic]

By selecting one of the Silverlight application types, Expression Blend shows only the tools, controls and abilities that Silverlight supports, which is a subset of the WPF XAML features.

It is hoped that these exercises have helped introduce you to the many and varied design options within Expression Blend. This reviewers guide has only touched on some of the features, and you are encouraged to continue to explore the program.

System Requirements

The following hardware and software are required for Expression Blend:

• Windows XP Service Pack 2 or later or Windows Vista (all editions)

• PC with 1 GHz or faster processor

• 512 MB of RAM or more

• 800 MB of available hard disk space.

• Support for Microsoft DirectX® 9 graphics with:

▪ Windows Display Driver Model

▪ 128 MB of graphics memory (minimum)

▪ Pixel Shader 2.0 in hardware

▪ 32 bits per pixel

• DVD-ROM drive

• 1,024×768 or higher-resolution monitor

Actual requirements and product functionality may vary based on your system configuration and operating system.

More information about Microsoft Visual Studio 2005 Standard Edition system requirements is available at .

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download