Top Questions from Adobe Flash Designers New to Expression Blend, WPF, and Silverlight

Don Burnett, Expression MVP

Expression Newsletter, subscribe now to get yours.

I chat with a lot of design folks on a regular basis, so here is the current set of questions that I get asked about Expression Blend by Adobe Flash designers.

In the real world, designers are not going to have a developer to partner with or there are a bunch of designers to one developer who has to cater to all of their needs. In the meantime, the designer is expected to create and show a WPF/Blend/Silverlight prototype to the client. What can a designer do?

Some folks in the Blend Community have been working to develop a snippet code library add-in to Blend, to allow you to access better prototype functionality. However there are some shortcuts that work extremely well if you are prototyping. Keep an eye out on http://www.CodePlex.com for these add-in tools, as things are being added over time. I rarely have to write over two to three lines of C# code in Visual Studio when doing a click-through event prototype.

Also quoting the immortal Chris Bernard at Design Thinking Digest: 

"Expression Blend was designed first and foremost to be a tool that can be used in the production workflow of WPF and (eventually) Silverlight applications. It wasn't designed to be a competitor to tools that are engineered and dedicated to rapid software prototyping. Because of the fundamental separation of user interface and application logic that is inherent in WPF, Expression Blend was always designed with the intent that it would be used in conjunction with other tools to create that application logic with Blend focused on creating a declarative toolset to create the interfaces, layout, interactivity and animation and provide the binding controls to the application logic."

Another route: If you don’t mind using another editor alongside Expression Blend you might check out KAXAML at www.kaxaml.com. It’s very lightweight and can handle some situations with constructs that seem to slow down Blend. It also supports code snippets and intellisense for XAML.

Currently, Blend 2 SP1 does NOT let you create a click-thru prototype without writing C# code. ActionScript is manageable for designers but Microsoft has to accept the fact that C# is a little too much for designers to learn in a week or two.

I think this is a cop-out, I know many designers who have learned just enough C# to make this doable in less than two weeks. ActionScript and JavaScript have a lot in common and C# isn't off the mark very much. I have never had to write more than one or two lines of C# code in Visual Studio for an event to be useable as a click through prototype.

There has to be a way for the design/creative types without developer help to control the timeline, to pause it at a specific time or event, wait for a mouse event on a control, continue the timeline and pause again.

Hmm, this is the thing you are not really seeing here is, there is no main timeline in Blend--there is a huge difference in paradigms here. The Flash paradigm is based on the idea that you can control everything through one main timeline because the end product is really just an "ANIMATION” or “MOVIE".

Blend is based on Windows' own routed events model, and just about everything can have its own timeline and storyboard or multiples and its paradigm is creating a user interface with custom controls. If you learn to use this effectively you will see you are not tied down and you can support many different events some happening at the same time and you are not tied down with this like you are in Flash. This makes reusability of timelines and storyboards much more effective and most good Blend designers have developed a good reusable library of these things.

The beauty of the routed event model is that it allows you to take advantage of the fact that window elements participate in a hierarchy or parent-child relationships. Since the system already knows the relationships, it can ‘route’ the event message up and down tree of elements, and all elements have an opportunity to handle the message. To clarify from the top-level container element (usually Window or Page ) down to the element that generated the event.

A designer has to be able to present a click-through prototype of the design.

Dax Pandhi, the first Expression MVP, has authored a great article on prototyping called Saving Time: UX Prototyping in Expression Blend.

The whole concept of separating the layout constructs from the code is good and all but it doesn’t always reflect what’s going on in the real world. This is something Microsoft does not understand.

Oh, but they do and they studied the problem of mixed code in-depth, and you really should take some more time with this before evaluate it further. You aren't really understanding the beauty of all of this.

A mechanism like the syntax/event builder you designed for hammer or a node-based system where designers can grad nodes, connect them to another nodes, set some properties, etc. to create the prototype, and in the background, Blend is writing the C# code which could be handed to a developer later on for code tweaking.

One: Blend doesn't write C# code for you only XAML, it opens Visual Studio and adds an event that you can modify or call conditionally by code. Have you checked into using Windows Workflow in conjunction with Visual Studio for this type of thing?

I have been doing Windows and Mac development since 1994 and Web development since it first existed, and many teams that I have worked with over the years have always yearned for this because designers and developers can work apart but not lose each other’s work more effectively.

Blend needs something like ShaderFX.

ShaderFX creates HLSL shaders that can be used with WPF and WPF3D and Blend. This isn't applicable to anything but WPF applications, as Silverlight currently doesn't support 3D. However what's stopping you from using the HLSL shaders created in ShaderFX with Blend?  It currently, seems like a lot of people already are. Any HLSL shader tool can be used Nvidia and ATI both have great free ones that help you interactively create shaders that will work.

http://blog.pixelingene.com/?cat=40

http://channel9.msdn.com/shows/Continuum/WPFFX/

http://channel9.msdn.com/shows/Continuum/WPFFXDemo/

http://channel9.msdn.com/shows/Continuum/PixelShaderParts/

Can I do this with Expression Blend?

Blend should have customizable shortcut keys and shortcut keys for every command and function.

As an application Blend really doesn't need to do this, there are plenty of Windows programs that are free and shareware that let you define shortcut keys and add keyboard macros that let you redefine these specifically for the application you are running (including Blend).

Switch active workspace F6 should re-center the canvas.

Nice Idea for a new preferences item. For now, I am wondering if you don't use the FIT TO SCREEN at bottom of the window? While I'd like an option that keeps it centered, it's only a few keystrokes to navigate down and do this manually.

Selecting a storyboard sets auto-record to ON. Ugh! I make so many mistakes because of this. It should remember the last setting or settable setting in options.

I just remember to look at the top of the screen and if the storyboard has the red recording light on I click it off to turn off Recording.

3D in Blend is difficult. Material assignment could be much, much better.

You should be considering that Blend isn't a 3D designer, Electric Rain's Zam 3D which looks and works a lot like their Swift 3D for Flash does that extremely well.

In Animate Layout, holding the space bar to pan also toggles the auto-record to on.

Again keep a watch on the RED LIGHT at the top of the screen.

Building a solution sometimes fails because Blend creates some XAML code for empty objects.

Hmm, Do you load into Visual Studio that came with it? Do you ever clean and rebuild?

If you have Adobe Photoshop & other apps running, Blend really slows down.

Try Paint.NET if you need to run a bitmap editor at the same time, Blend seems to swallow system resources (but you have to understand how much work it's doing and what it's keeping in memory at the time. Paint.NET is very lightweight. I find most people run it alone or with the vector editing of Expression Blend, which is better for scaling graphics in XAML anyway.

I would like to see Blend speed up myself in certain areas. I have had the “so slow you can't type” experience. Most of the time that happens when I setup an XML datasource using Blend with anything more than a schema attached. I have found setting up the XML datasource in code is better and Blend can still use it. The objects get instantiated for developers in a better way too as in memory objects.  There are work-around solutions to all of these issues.

Zoom way in and panning gets slow. Blend should do an object override mode so it turns everything into boxes when moving to make panning as real-time as it can be.

This may be an issue with WPF panning and hardware acceleration on your system. It does seem more useable when everything gets hardware acceleration versus using XP or when using some Virtual Machine to run Blend. I don't recommend running Blend in a Virtual Machine. You miss things relating to animation and rendering as well.

Images have to be 96 dpi to be used properly in Blend so it’s 1:1. This should really be pointed out in the documentation. If the image is not 96dpi then it ends being stretched in Blend and makes the image blurry which is not good.

96 dpi is the new standard default dpi for Windows in general. This might be a good to note thing, but this issue has been pointed out in many training DVDs and in Blend documentation. See this note:  http://msdn.microsoft.com/en-us/library/cc295296.aspx quoting MSDN on that page: 
"When setting size-related properties in WPF applications (such as those created by using Expression Blend), pixels refer to device-independent pixels or device-independent units that are equivalent to the size of a pixel on a monitor when it is set to a screen resolution of 96 dpi. Each unit is approximately 1/96 inch, regardless of monitor size or screen resolution."

There are many ways to apply a brush resource - from a drop down menu, from the brush resources tab drag & drop from the resources panel, etc. It's confusing.

To learn more about resources, and scope of where these are applied, see this great article by John Bowen in his blog for further insight.

http://blogs.interknowlogy.com/johnbowen/archive/2008/05/30/24216.aspx

Smart guides and snapping are great but it doesn’t apply to objects inside a group.

You should look at the granularity of where you are (what later of what object and if you are in a custom control or not).  You should also double check to verify what has object/layer focus, and know what you have selected. I find using the breadcrumb control in Blend very useful to navigate and looking at this stuff. Also you should look at what's yellow highlighted on the "objects and timeline" layers panel very useful at navigating all of this.

The bottom object in the list is the top-most object.

It isn't top down. You need to go to the documentation and read about the layering and routed events model, sometimes this is actually a blessing when reviewing XAML as text.

Blend needs an isolate mode.

Have you tried drilling down on a layer or object represented in the objects and timeline panel when the object is selected it turns yellow, I have done this and made a copy of what I have selected.  It’s just understanding how select works and keeping an eye on what’s selected.

The bitmap effect is so hidden how useful is it really?

I think it's a properties thing and remember some bitmap effects WPF (legacy stuff) are rendered through software (not hardware) making them not as useable and Remember Silverlight does software rendering, so in those situations it's still best to pre-render and swap out states using Expression Design.

This article appeared in the November Expression Newsletter, subscribe now to get yours.