The team blog of the Expression Blend and Design
Ok, pop-quiz time. Below, you will find two screenshots I took from two different applications:
[ Screenshot 1 ]
[ Screenshot 2 ]
Can you tell what is different between those two images? If you said that the button in the second image seems a few pixels off from the image on the top (or something similar), you are wrong. The UI depicted in both of the screenshots is exactly the same. Yes, it was a trick question.
While both applications look almost the same when run, let’s look at both of these applications when opened in Blend. Here is what the application depicted in Screenshot 1 looks like:
The application depicted in Screenshot 2 looks as follows:
As you can tell, there is a major discrepancy between the first and second screenshot when viewed in Blend. More specifically, the second version of the application seems to be missing some UI and the button is not styled at all.
What Happened? The source of the discrepancies have to do with what Blend actually shows on the design surface. By and large, Blend is a XAML editor. Anything defined in XAML, we will do our best to display it on our design surface. For visuals defined in your code-behind files, you may not always be able to see them in Blend.
This is where the differences between the two apps stems from. In the first app, everything was defined in XAML. In the second app, some of the visuals were defined in XAML, but a many of the visuals were not. That is why Blend is only showing an incomplete subset of what your application actually looks like when you view it on the design surface. This is a problem.
Why is this a problem? The word “problem” may be a harsh word for this, but the outcome is less than ideal if your application is a collaborative effort between someone technical and someone less technical. If you are a developer, being able to visualize code and make changes may be straightforward. If you are more design oriented, looking at code to define the look and feel of an application is not natural. You would prefer something that looks like the application depicted in Screenshot 1 where everything is exposed in Blend’s design surface and you can make changes visually without writing code.
Some Solutions The first and obvious answer that I have is to have you resist the temptation to add controls, define layout, or perform other visual tasks using code. The reason is that, as you saw in the screenshot of the second application, Blend’s design surface won’t be able to help you out.
Of course, there are many cases where such an extreme solution will not work. It is common for many applications to fall into a gray area where visuals are partly defined in XAML and partly defined in code. Fortunately, there are some simple steps you can take to make designers more productive while still giving developers the flexibility to develop the application.
Use UserControls If you have visual content that needs to be added programmatically, make sure that content is defined as UserControls. The reason is that you can define the UserControl and make changes entirely within Blend. Programmatically, you can add this UserControl – which may have been edited inside Blend – to your application without sacrificing the designability of the UserControl itself.
Create Styles in XAML, Apply them Programmatically Sometimes, UserControls may be a bit excessive. For example, in the second screenshot, I have a button that is unstyled:
Instead of having a dedicated UserControl to wrap your styled button, you could just define the style in Blend and programmatically apply the style. Let’s say you have a style called GreenButtonStyle defined in your Resources panel:
To apply this style to your button, use the following code:
This allows you to still define the look and feel of your Button using Blend, but its application is handled entirely via code.
Conclusion Hopefully this post helped give you some ideas on how to ensure the visuals of your application have the ability to be modified by Blend. I didn’t enumerate all of the various cases, but if there is something clever that you do to enable developers and designers to work together, please comment below.
Cheers! Kirupa :-)
One of our goals for Expression Blend 3 is to provide better tools and user experience for visual designers. At a high level, we prioritized features that allow the designer to keep their focus on the artboard more often. This translated into an improved selection model, predictable layout, familiar and efficient keyboard shortcuts and a flexible and powerful gradient editing experience. This blog post is the first in a series that will highlight features and improvements targeted to the visual designer. Let’s start with the new gradient editing tools. The UI is subject to change for the final release but this overview should give you an idea of the features available in the Preview.
For Blend 3 we have separated out the Brush Transform tool into two different tools, Gradient and Brush Transform. The Gradient tool allows you to create and edit the properties of linear (LinearGradientBrush) and radial (RadialGradientBrush) gradients on the artboard. The Brush Transform tool allows you to transform any brush type by modifying the translation, rotation, scale and skew. These values are stored as a part of the RelativeTransform property on the brush. Separating out these tools gives you greater control and predictability of which properties are edited, creates cleaner XAML, and makes it easier to animate and bind gradient properties.
All you have to do to create a gradient is select the Gradient tool in the Toolbar or press the ‘G’ keyboard shortcut and click and drag to define the start and end points. This creates a gradient for the selected object and sets start and end point to the same positions that you clicked and released the mouse.
The Gradient tool adorner shows the start point, end point, individual stops and the selected stop. Now you can use the adorners to edit the start (StartPoint) and end (EndPoint) of the gradient by rotating and dragging the adorner. To add a new stop press Alt and click anywhere on the line (Note: In the final release you will not have to press Alt, just click and release). To change the position of a gradient stop (Offset) just click and drag it along the line. To remove a gradient stop click and drag it off the line. To edit the color just double click on the stop and a color picker is displayed where you can select a color for the stop.
Another really useful feature for editing gradients is the Gradient eyedropper. This is located in the color editor in the Brushes panel when you have an object with a gradient selected.
Just select the Gradient eyedropper and click and drag anywhere inside or outside of Blend to grab a gradient. For example, if I have a picture displayed in my browser with a nice gradient I can easily apply this gradient to my shape using the Gradient eyedropper by clicking and dragging:
Once the gradient has been selected, you will notice that your selected element in Blend now features the range of colors you selected earlier:
The range of colors I picked in the above example was pretty simple, so you are able to see the four gradient stops and the colors they represent. For more complicated source images, you may have stops that are located close to each other. To adjust these stops, just zoom in to create more visual space between the stops on the artboard so that it is easier to select and edit them.
Closing Tips By using the Gradient eyedropper, it can be easy to get some pretty complex gradients. Have you ever wondered how to reset the gradient back to the black to white default? Blend uses the gradient from the object that was last selected.
There are also a few additions in the Brushes panel that will help you create and edit gradients.
Finally, there is also an Advanced properties section for the Brushes panel that includes other brush properties like MappingMode, SpreadMethod and RelativeTransform:
Well, that’s the overview of the new gradient editing features in Expression Blend 3 Preview! I hope you find it easier to work with gradients.
One of the features that we added in Expression Blend 3 is the ability for you to create Silverlight projects that come associated with a Web site. In this brief post I will jump between describing why this is useful and how Blend provides access to it.
Let’s start with the easy part. You can access it directly via the New Project dialog where we created a Silverlight 3 Application + Website project template:
Once you create your new project using this template, you have successfully used this new feature! For the most part, nothing really should seem or feel different for you, for this feature is more about what we do behind the scenes. There are a few exceptions. One immediate difference that you may notice is that your solution now contains a node for your Web site along with your Silverlight application:
There are several reasons why we decided to create this Web site project by default. The main reason is that you get all of the benefits of building a traditional Silverlight application where all of the content you incorporate gets embedded into your XAP and downloaded by default when your page loads. What is new, though, is that you also get the added benefit of being able to load content on demand using your own loading and preloading mechanism. That functionality is provided for you via Blend’s support for Web sites.
If I had to visualize this, it would look as follows:
You build your XAPs like always (Silverlight Project), but you have the added bonus of being able to think outside the XAP (Web Site Project). When you hit F5 to build and preview your application, the XAP gets built, copied into the right location on your website, and the HTML page that already exists loads and gives you a preview. We do not re-generate the HTML file each time you build, so this means you can customize your HTML page without worrying about your changes getting overwritten the next time you build.
Beyond just changes to how your projects behave and build, we added some extra functionality to make it possible for you to easily reference and visualize on the artboard the content from either your Silverlight Application or your Web Site without having to write XAML manually.
If you have images that live in both your Silverlight application and Web Site, our path picker for an Image control’s Source property displays the images from both locations:
This is significantly different from what we’ve had in Expression Blend 2 SP1. While you could always open a solution authored in Visual Studio that contained both a Silverlight Application and a Web Site (my article describes that to a certain detail), hitting F5 in Blend would be unpredictable. You also didn’t have the extra support for treating all assets as being equal despite where they are being loaded from.
Let us know what you think of this feature. This features was designed to seamlessly blend into your workflow and “just work”, but if you had any ideas or suggestions on what more can be done or things you think we should change, feel free to comment below to let us know.
Cheers! Kirupa :)
Since we released our preview at MIX, there have been a fair number of questions revolving around how a WPF or Silverlight project that uses Blend-specific features will work when opened on a machine that does not have Blend installed. For example, one Blend-specific feature that we have talked about extensively is Behaviors. The Behaviors runtime components are provided to you by Blend, and today, there is no way of being able to author or build a project that uses them without having Blend installed.
To help address this concern, we have been working on creating the Expression Blend 3 SDK. The Blend 3 SDK is a free (and lightweight) installer that places common components such as Behaviors into a general location that other applications like Visual Studio can access. This gives you the ability to open and edit projects created or modified by Blend without having to have Blend installed on your computer.
Before wrapping up this post, I should emphasize that you will only need the Blend 3 SDK to open projects that contain some runtime component that is Blend specific and you do not have Blend 3 installed. That means you can open a cool Behaviors project or even write your own behaviors using just Visual Studio and not having Blend installed on your machine.
One of the nice things about both WPF and Silverlight is their ability to allow a designer to extensively alter the look and feel of a control without having to write code. A great blog to observe is Corrina Barber’s Ux Musings where she explains how to style some of the common controls that ship outside of the box with Silverlight 2 Beta 1.
For example, you can see a live demo (source) of one such style she created:
Check out her blog here: http://blogs.msdn.com/corrinab/
Everything she shows, you can accomplish via XAML in Expression Blend 2.5, and our design surface will pick up and display the updates. We don’t support styling and templating via our UI (like we do for WPF)….yet for Silverlight 2! Expect that soon.
Today I wanted to share some game prototyping graphics created in Expression Design. These are useful for would-be game developers who happen to be missing a set of quality graphics and/or people who want sample files that can help them understand basic vector drawing techniques.
For example, the following is something I created using Design:
You can download the files used for the above image here: PlanetCute.design (540k)
Expression Design was built to be familiar to folks that already know how to use a vector drawing tool. However, there are a couple of unique tricks that I use every day that make my life much easier.
Always Work in Pixels I always set up my document units to be pixels (at 96 PPI to be exact!). This dramatically reduces any confusion exporting to XAML. If you want more information on why that is done, read Joanna's blog post.
Set your Grid to 10-pixels and Nudge Increment to 1-pixel All the tiles are built on a grid that is 10 px by 10 px. When you set your nudge increment to 1 pixel a nice trick becomes possible. If you hold down Shift while pressing an arrow key, the object will move 10X the nudge increment. In this case, that happens to be 10 px, the exact size of the our grid. Now, instead of manually dragging elements with grid snapping on, I can use Shift + my arrow keys to move elements around and I’ll be guaranteed that they’ll be aligned with my grid. This is quite useful when making tile graphics for games.
You can change your grid size and nudge increment with the following steps:
Shading with Gradients that use Transparent Stops Most of the 3D shading results are done using gradients that have transparent stops. This simple feature, accessible through the Stop Alpha property on every gradient stop, dramatically increases the usefulness of the old reliable gradient. Here’s an example of how I use gradients with transparent stops to create the tile based shadowing system used by the rest of the tiles.
Download Large (more readable!) Version
This set of graphics is pretty flexible. Be creative. Can you make a platform game? Can you make a role playing game? Or a puzzle game? The possibilities are endless. If you find that the set doesn’t include the exact tiles you need for your rocking game design, it is easy enough to open up the .design file in Expression Design, change some colors, or add some shapes. Voila! New tiles and new characters.
I just added the treasure chest graphic and I'm waiting for someone to bust out the first Silverlight Pirate game. Yarr.
To see what other folks have done with these tiles, stop by my website.
Best wishes, Danc.
Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected including layout, databinding, controls and templating. On the Blend team we’re extremely excited about the features arriving in Silverlight 2.0 and are very busy building some excellent tooling for it. We don’t have too much information right now, but rest assured that we’re working on it.
Following from Danc’s earlier post about creating game graphics in Expression Design, a fun Silverlight game that we did together is Sprawl, you’ll see a very similar visual style there:
The game is all Silverlight 1.0 and took about a day of development time to make once the graphics were done. I hadn’t realized Danc was going to post his Planet Cute drawings, otherwise I would have polished up a sample Silverlight app built off of it :)
One thing that many people have been pestering me about (and rightly so!) is an update to the Snoop application used for debugging WPF applications. I just wanted to assure folks that I am working on updating it and hopefully will have a quality update in not too long.
Because Windows Presentation Foundation (WPF) is based on the .NET Framework, you can customize the functionality of existing control types. You can start with a control defined in a WPF library, derive a new control type from it, and build that into a library of your own. You can draw a control onto the design surface of Expression Interactive Designer just as easily whether it is implemented in your own library or in a WPF library. In this tutorial you will extend the Button control to create an ImageButton control which has a Source property in addition to the standard Content property. You can then specify how the new Source property is to be used by the control by modifying the control's template.
Annie Ford explains how to create glassy buttons in Design. Click here to read more about it!
Found a bug? Report it to us.
Have something to say about the beta? Join the discussion group:
As of early this morning, the Expression team has announced that Microsoft Expression Web and Blend will be included as part of the MSDN Premium subscription. This decision reflects the large amount of feedback that we have heard from you following last December's ship of Expression Web and through the beta cycle of Expression Blend. For more details, follow this link.
Here are some links to news and samples from Electric Rain.
Electric Rain RainStorm Newsletter Jan/Feb 2006 
MSN Community Portal 3D UI Concept ApplicationPortal (please visit http://www.erain.com/products/zam3d/examples to see previews of the sample applications) This sample concept portal provides a 3D user interface control that also integrates 2D images that are also databound to provide additional functionality. This sample explores how 3D controls and components may fit into next generation applications.
On the download page above you can also sign up for ZAM 3D new and product updates.
ZAM 3D / Expression Integration White Paper  – Brief overview of how to integrate ZAM 3D XAML in Expression Interactive Designer projects.NEW ZAM 3D to Expression Wokflow Page 
One of my favorite controls in WPF is the InkCanvas control. As a child, I've always enjoyed simple line drawings, but I started to draw less and less as I got older because I now had to clean up all of the paper and pencils myself! Recently, I began to get back into line drawings, and unlike using physical mediums like pencils and paper, I began playing with the InkCanvas control in WPF instead. This control is very elegant. You have a working application once you simply insert a InkCanvas control. The InkCanvas becomes your paper, and your mouse cursor becomes your pen or pencil.
Behind its elegance, there is actually a lot of great functionality that you can expose, and I created a simple application (with source) that showcases some of the common things you would want to do with an ink canvas:
( Click here to download the Blend 2 / Visual Studio 2008 Source Files )
In the above application, the code shows you how to change your pencil's stroke size, color, and how to use the eraser functionality. Behind the scenes, when you close your application, everything you draw gets saved to your AppData folder. The next time you run your application again, any doodles you made earlier are displayed again - allowing you to pick up from where you left off. There are also more features that I simply haven't had time to implement, but I may revisit this at a later time and improve what is shown above.
Anyway, I hope this helps. If you have any suggestions on examples you would like to see covered in this blog, feel free to drop a line in the comments and I or the other friendly bloggers might use it to guide the content of our future posts.
Oh, and before I forget, the really cool icons used in the above sample are from Mark James's Silk Icons collection.
Update There was a bug in the version of the code I posted initially. Thanks to fellow colleague Sam Paye for pointing it out. The version posted now is the revised version.
Cheers! Kirupa =)
I figured you could all use a break from the tips and tricks my colleagues have been posting for the past few days! At one time, the Expression team was fortunate to have incredibly talented artist (illustrator, musician) Aaron Jasinski on board as a product designer. Among his contributions were the style guides which define the visual specifications of each part of the products' UI, the design of the Welcome Screen, teaming up with feature Program Managers on UI and user experience design, looking into the future of the Expression products, and generally making his office a cool and ambient place to be. To emphasize the last point, here are the shots of his whiteboard:
( larger version )
You can see more of his work at http://www.aaronjasinski.com.
Thanks to all of you who attended the session Celso and I gave at MIX08. If you didn't get a chance to see us, you can view the session here. Besides describing how our Deep Zoom Composer was developed and styled, we spent the first half of the session working on a sample application called the FurnitureShowroom:
We've received numerous requests to provide the source files for FurnitureShowroom, so...here you go:
When you extract the above source files, there will be a folder called Database. Please move the Database folder to your C:\ drive so that the application knows where to get the data from. Make sure you also have the SQL Server 2005 support enabled. That is an installation option in Visual Studio, but you can also install the free SQL Server 2005 Express edition instead.
As many of you may have heard, Bill Gates announced during his TechEd keynote today that Silverlight 2 Beta 2 will be released later this week. To coincide with Silverlight 2 Beta 2, we will be releasing updated versions of Expression Blend 2.5 and Deep Zoom Composer as well.
There are some nifty new tricks up Expression Blend 2.5’s sleeve for this release. One of them is known as the Visual State Manager, or VSM for short, which makes styling your controls easier. To learn more about this feature, visit Christian Schormann’s blog where he provides an overview of Creating Control Skins in the Visual State Manager.
Here is a snippet from Christian’s post on why this is an interesting feature:
Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster - and we are adding more creative options at the same time. Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) - designers can use the same model and tools to easily define dynamic visuals for UserControls they create.
Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster - and we are adding more creative options at the same time.
Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) - designers can use the same model and tools to easily define dynamic visuals for UserControls they create.
Stay tuned for more updates later on this week when we provide more information on VSM, tutorial videos by Steve White, and an updated version of Blend 2.5 where you can try out the new VSM features for yourself.
Hi everyone, Continuing the overview of all the new features we introduced in Expression Blend 3, this post wraps up our trilogy by looking at more features that fall under Workflow, Code Editing, and Extensibility. Of course, if you missed the earlier posts, be sure to catch up on Part I and Part II as well.
Workflow Improvements There is a large collection of improvements we made in Expression Blend 3 that can loosely be bucketed under a category called Workflow. Most of the items here are not new features necessarily. They are improvements we made to help make creating applications in Blend more efficient, and dare I say it, fun!
Revised, Customizable UI One of the immediate changes you will see when launching Blend is our more polished, fully customizable user interface where you can rearrange, hide, save/restore workspaces, and move various panels to your heart’s content! Christian Schormann puts this feature to good use when describing how to create a minimal user interface for working with SketchFlow projects: Creating a Minimal Workspace for SketchFlow
Updated Gradient Tool The classic gradient tool that many have used has gotten quite a revamp in Blend 3. You can read more about the changes in Joanna Mason’s blog post on this topic: Creating and Editing Gradients in Expression Blend 3
Layout Improvements Expression Blend 3 introduces several improvements to layout operations. Moving objects with direct manipulation on the artboard is now more consistent and predictable, alignment adorners are shown for more containers, layout properties and bindings are preserved when reparenting or grouping objects, and layout properties are no longer written to the XAML code-behind file unnecessarily.
Additionally, you can now use the property inspector to change the width and height of an object even when these properties are set to Auto:
Expression Blend 3 will automatically compute the appropriate margins needed to make sure that the object is the size that you specify.
Selection Improvements In Blend 3, we made some significant changes to the selection model. These changes make it easier to change your selection and draw new objects on the artboard. One such improvement is marquee selection of individual points on a path:
When you use the Direct Selection tool, you can now select individual points on a path by using marquee selection. Just drag to define the area that contains the points that you want to select.
Copy and paste images from the Clipboard Image data put on the Clipboard by other applications such as Windows Internet Explorer, Adobe Photoshop, and Microsoft Paint can now be pasted directly into Expression Blend 3.
Easier Access to Template Internals If a control includes templates that are applied in specific scenarios, such as when a control has to display a collection of data, those templates now appear in the Edit Other Templates category of the Edit Template item on the Object menu;
This allows you to access the internals of your controls from a single location more easily than you were able to before.
Improved UserControl Editing Experience When you modify the XAML that defines a UserControl control, you no longer have to rebuild the project to update all the UserControl objects on the artboard. Additionally, you can enter editing mode for a UserControl control by double-clicking one of the UserControl objects on the artboard.
Searching for files in the Projects Panel With Expression Blend 3, you can now search for items in the Projects panel:
This makes it very easy for you to find items in larger projects without having to manually browse through complicated folders!
Code Editing Improvements One area we received a lot of feedback from many of you was to make our support for editing XAML files better and to add support for editing C# and VB code behind files. In Blend 3 we acted on your feedback and added both a very (in my not so modest opinion) a slick XAML editor as well a C# and VB code-editor with intellisense and other good stuff.
Here is what our XAML editor looks like:
We also added very basic support for being able to open and edit text, html, and xml files as well using our new code editor.
More Extensibility Points If you are writing custom controls or providing additional functionality for creating assets for your project, you will find our addition of more extensibility features useful. You can read more about them at Unni’s blog: Blend 3 Extensibility, Writing a Design Time Experience for a Silverlight Control, A Sample that Shows the New Blend Design Surface Extensibility, AlternateContentProperty Attribute
Cheers, Kirupa =)
Last week, to coincide with the release of Expression Blend + SketchFlow RC and Silverlight 3, we updated Deep Zoom Composer as well. You can download it from the link below:
As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.
This release contains improvements to a handful of the existing features based on feedback many of you have provided us.
Bringing back the Blend / Visual Studio projects for certain templates was one of the changes we made (see earlier post). We also made interacting with the Deep Zoom player smoother by removing the constraints that often led to some odd/jagged zooming and panning. The final change of note has to do with our Exporting where we made it extensible as well as possible for you to create composition-less collection exporting.
The last sentence was quite the mouthful, but instead of elaborating here, we will be elaborating in a series of blog posts what the new Exporting changes are and how to use them.
Cheers! Kirupa & Janete
Jeff Kelly is back with Part III of his behaviors coverage. This time, he focuses on the more advanced uses of Behaviors - Kirupa
In previous posts, I’ve touched on the basic pieces of the Behaviors API and some basic usages of them. In this post, I want to wrap up the discussion of the basic Behaviors API with some discussion of some of the more advanced features exposed by the Behaviors API.
Advanced Behaviors A large amount of interactive scenarios can be described in the language of triggers and actions; that is, when X happens, do Y. However, say I have two actions, A and B, both of which want to read and store information in a hidden (i.e. not exposed to the designer) but shared Foo object. If I implement A and B as actions, each action needs to know how to access the Foo object. There are a number of different ways to approach this, each with various merits and drawbacks. Rather than explore these in depth here, I want to point out a way to approach this problem using Behaviors.
The complexity in this scenario comes from multiple independent actions sharing a dependency on the Foo object. Consider that rather than having multiple Actions that share and operate on the same data objects, you can instead encapsulate the shared data objects into a Behavior and expose the functionality that would have been provided via Actions as commands on the Behavior. The benefits are two-fold: cohesion is greatly improved, as the data and the commands that act upon that data are now encapsulated in a single class, and second, the interface exposed to the designer in Blend 3 is much more explicit (no more wondering which Actions in a large class library are meant to be used together). Rather than relying on class-naming conventions or first-hand implementation knowledge to convey the relationships between several Actions that all act upon the same data object, the user is presented a single Behavior with each possible operation enumerated and customizable by the designer.
This is all tied into the Behavior system with the appropriately named InvokeCommandAction. By placing these actions directly on the behavior that exposes the ICommands, we get a really nice benefit: we can use any Trigger built against the Behavior Trigger API to invoke both Actions AND ICommands exposed on Behaviors! In addition to the assorted tooling work in Blend 3 to make invoking these ICommands from XAML easy for a designer, we’ve also added the ActionCommand support class for developers to make creating Behaviors exposing ICommands a breeze. A bare-bones implementation of ICommand that takes a function with either zero or one parameter, ActionCommand saves you the trouble of writing your own ICommand implementation each time you want to write a Command-able Behavior:
public class MyCommandBehavior : Behavior<DependencyObject>
this.MyCommand = new ActionCommand(this.MyFunction);
public ICommand MyCommand
private void MyFunction()
// do work...
Figure 2: Example Behavior exposing an ICommand
<Button x:Name="BehaviorHostButton" Content="Behavior Host>
<i:EventTrigger SourceName=" BehaviorHostButton" EventName="Click">
Figure 3: Example invocation of an ICommand on a Behavior using InvokeCommandAction
There is one major caveat to consider with this approach. Because InvokeCommandAction is not a TargetedTriggerAction, you cannot set TargetName to target an arbitrary Behavior; the InvokeCommandAction must be hosted on the Behavior it is invoking commands on. This means that the Trigger that fires the InvokeCommandAction must either be retargeted (by setting SourceName), or must be source agnostic. Also note that like any string-based reference system, the CommandName parameter of InvokeActionCommand is susceptible to falling victim to changing property names or refactorings down the road. Special care must be taken to avoid breaking these implicit links if these names are still in flux.
You may find yourself writing Actions and Behaviors that have a fairly common use case, and you may want to improve the default design-time experience around that use case. By default when you create an Action, Blend 3 will trigger it with an MouseLeftButtonDown EventTrigger where we can, or a Loaded EventTrigger if MouseLeftButtonDown isn’t available. However, you may want a custom Trigger instead of an EventTrigger, or maybe just a different default event in an EventTrigger. In order to facilitate this, we’ve added the DefaultTriggerAttribute in the System.Windows.Interactivity namespace:
public DefaultTriggerAttribute(Type targetType, Type triggerType,
params object parameters)
By setting this attribute on an Action class definition or an ICommand property definition exposed on a Behavior, you can specify one or more Triggers to instantiate automatically when that Action or Behavior is created by a user in Blend 3. The first parameter is the type for which to create this Trigger, the second is the type of Trigger to create, and the final is a list of constructor arguments to pass to the Trigger when it is created. If more than one attribute is defined, the most derived targetType that is applicable when the user created the Action/Behavior will be used.
For example, in the following definition:
[DefaultTrigger(typeof(UIElement), typeof(EventTrigger), "MouseLeftButtonDown")]
[DefaultTrigger(typeof(ButtonBase), typeof(EventTrigger), "Click")]
public class MyAction : TriggerAction<UIElement>
If MyAction is dragged onto a Button (or another ButtonBase derived class), the Action will be created under a Click EventTrigger. However, if MyAction is dragged onto any other UIElement, a MouseLeftButtonDown trigger will be created for it instead.
If you’ve read my previous point, you know that each of the core Behaviors classes constrain their AssociatedObject type via a generic argument in the class inheritance definition. However, there is a somewhat subtle complication here in the case of TargetedTriggerAction<T> and EventTriggerBase<T>. In both cases, these classes extend the more basic TriggerAction<T> and TriggerBase<T> and provide a “retargeting” mechanism, allowing Behavior authors to easily target and act upon elements other than the AssociatedObject.
For TargetedTriggerAction<T> and EventTriggerBase<T>, the generic parameter T does not constraint the type of their AssociatedObject as it does for TriggerAction<T>and TriggerBase<T>. Instead, it constrains the type of the retargeted element (Target/Source properties, respectively). Because retargeted Behavior classes are usually acting solely on their target, rather than their AssociatedObject, this is usually sufficient. But what if it isn’t?
Cue the TypeConstraintAttribute. You can apply this attribute to any TargetedTriggerAction<T> or EventTriggerBase<T> in order to constrain its AssociatedObject to the specified type. Blend 3 will enforce it when you are creating an instance of the Behavior type, and the run-time will throw if you manage to violate it anyway (via by-hand XAML manipulation or code behind).
This post covered quite a bit of ground, but there are a few more topics that we need to go over before calling it a day. Stay tuned for a future post on some of our behaviors-related extensibility features.
Blog Posts: Expression Web Blog Soma’s Expression Web 3 blog post Blog posts on the xWeb blog related to SuperPreview
Useful Links: Expression Blend Overview + Video + 60 day trialExpression Blend Community Site Expression Blend Forums
Blog Posts: Expression Blend & Design Blog SketchFlow Concepts: An Overview by Christian Schormann Expression Blend 3: Photoshop Import by Janete Perez Behavior Blog Posts by Various Overview of New Features in Expression Blend 3 + SketchFlow: Part 1 by Kirupa Introducing Sample Data in Blend 3 by Unni
Useful Links: Expression Design Overview + Video + 60 day trial Expression Blend & Design Blog Expression Design Community Site Expression Design Forums
Expression Encoder 3 With Microsoft Expression Encoder, you can import and encode video files, produce live webcasts, enhance media with watermarks and advertising, and publish with Microsoft Silverlight. Useful Links: Expression Encoder Overview + Video + 60 day trialExpression Encoder Community Site Expression Encoder Forums
Blog Posts: Expression Encoder Blog What’s new in Expression Encoder 3 blog post by the Encoder Team
Cheers! The Expression Blend Team
Recently, the final versions of both Silverlight 4 and .NET 4 have been released! To coincide with this, we are releasing a release candidate version of Expression Blend 4 that you can use to target them:
Download everything you need below:
There are two things that you really need to know about this release.
First, if you are doing Windows Phone development, you should not use the Expression Blend 4 RC. We will have an update for you soon with updated components, but in the meantime, please use Expression Blend 4 Beta.
Second, this release of Expression Blend 4 targets the final versions of Silverlight 4 and .NET 4, you can share your creations with the rest of the world. You no longer are limited to only sharing your creations in source code form or for private testing.
As always, we love to hear from you. Please feel free to comment below or use our forums here.
- The Expression Blend Team
It’s been a while since we released an update for those of you working on Windows Phone 7 projects! Well, wait no more! Today we’ve released an updated version of Expression Blend that supports all of the latest changes made to the Windows Phone 7 runtime along with some cool new features.
First, download everything you need below:
As you can see, you no longer need to download and install Expression Blend separately. You can just run the single Windows Phone Developer Tools installer and get Windows Phone variants of Expression Blend, XNA Game Studio, and Visual Studio for free.
Note This version of Expression Blend installs and runs side-by-side with Expression Blend 4 and only supports working with Windows Phone projects.
Note This version of Expression Blend installs and runs side-by-side with Expression Blend 4 and only supports working with Windows Phone projects.
New Features As mentioned earlier, beyond supporting the changes made to the runtime since the last release, we’ve added a lot of new functionality that makes designing Windows Phone 7 applications easier. Some of the more notable features are described below.
Improved Design Time Previewing Because your applications can be viewed in different orientations, themes, and accent colors, we’ve made it easier for you to visualize within Expression Blend what your application would look like.
All of this functionality is exposed via the improved Device panel:
The Device Panel now provides you with easy access to preview between Landscape and Portrait orientations, Light and Dark themes, and Accent color.
For example, here is a preview of what your application looks like in the default Dark theme:
Clicking the Light theme button in the Device panel swaps out all of the dark theme resources to display the light theme variants of them:
This allows you to design and make sure that your applications look the way you want regardless of which light/dark mode the user has their phone in.
Preview Text Styles Windows Phone 7 applications emphasize consistent use of text as a key design element. To make it easier for you to preview and apply existing text styles, we’ve added the ability to preview inline what a particular text style would look like:
Initial Application Bar Design Experience One of the unique and differentiating features found in Windows Phone 7 when compared to Silverlight and WPF is the Application Bar:
In this release, we have exposed a very early preview of our support for allowing you to design the Application Bar. You have the ability to create an Application Bar, add Application Bar Buttons, and add Application Bar Menu Items. Because Application Bar Buttons display a 48x48 PNG icon, you can specify your own icon or pick from a collection of icons we have provided for you:
A future blog post will go over in greater detail how to use what you have today to design a working Application Bar!
Easier Page Navigation Because Windows Phone applications are very page centric, we decided to make navigating between pages easy. To navigate from one page to another, we exposed a Navigate To context menu:
This menu can be accessed when you right click on any element that you wish to start the navigation when clicked.
Updated FluidMoveBehavior We have revised the FluidMoveBehavior to be on par with the improvements we made for Silverlight 4 and .NET 4. You can learn more about what this means by reading Kenny Young’s blog post on this topic.
Optimizing the On-screen Keyboard Unlike Silverlight and WPF where a full keyboard for input is almost always guaranteed, Windows Phone users may not have that luxury when working on their phones. While a on-screen keyboard is available, given the size of the screen, having the full keyboard with all of the keys appear on-screen may not be ideal for all situations either. It may be helpful to users if the keys displayed were optimized for the type of information they would be entering at that particular moment.
To address that need, we improved our support for the InputScope property on TextBox that allows you to specify what kind of data will be entered:
For example, if Number was selected for the InputScope on a TextBox, here is what the on-screen keyboard looks like when you focus on it on the emulator/device:
Notice that you are not seeing the traditional full keyboard. Instead, you are seeing a keyboard optimized only for numerical input.
As always, if you have any questions or feedback, please feel free to comment below or post on our forums.
Thanks, Expression Blend Team
One of the goals of Silverlight’s Visual State Manager technology is to let you do quite a bit of control customization without needing to use Blend’s Timeline, nor even having to know what a Storyboard is! Feel free to test-drive the Silverlight Button below, and then read on for a run-down of how easily it can be built.
I started out with some vectors (Paths) depicting the face in its normal resting state. Then I used the Tools > Make Into Control command to make the artwork into a template applied to an actual Button. After deleting the ContentPresenter from the template, I selected the MouseOver state in the States pane, so that the changes I was about to make to the existing elements (to produce a face that looks alert and ready) would be recorded only in the MouseOver state. I moved the head and the features upward a little, and the rest of the changes involved using the Direct Selection tool to move Path points around.
Because I wanted the Pressed state to be a variation on the MouseOver state, I used the Tools > Copy State To command to duplicate all my changes into the Pressed State. Then, with the Pressed state selected, I adjusted one eye and the mouth to make the wink.
For the Disabled state I decided I needed new graphics instead of adjusting properties of the existing graphics. So I created a simplified grayscale version of the face and made that version opaque only in the Disabled state.
For transition timing, I created a number of transitions to and from various states and set their durations to taste.
Finally, so that each Button instance can customize some aspect of the template, I used template bindings so that Brush colors used in the template to draw various pieces of the face are bound to properties of the Button instance. So for example I selected shoulders, then selected Fill in the property inspector, and then clicked Advanced property options > Template Binding > Background. So now, by setting a value for Background, Foreground, BorderBrush and OpacityMask, a Button instance with this style set on it can determine the colors of the shoulders, face, hair, eyes and nose.
You can download the sample project files here.