Unni's Blog

Text effects (think Kerning) and animations

With Expression Blend RC1 (if you have not gotten that yet, you should – there are some very cool samples in there – get it here), we “unknowingly” enabled a few scenarios that are cool. For our v1, we really wanted to support these scenarios using a richer design surface and were disappointed when we ran out of time. However, for the brave-hearted, you can still do some cool things around typography.

For example, take letter-pair kerning and tracking. Here is how you could do this in Blend.

1)      Create a new Project (File -> New Project) and save it to some location

2)      Draw a TextBlock using the tool-bar and type some type text – say “Text” and switch back to the selection tool.

3)      In the property grid, search for “TextEffects”. Increase the font size and change the font family to something interesting.

4)      For this property, bring up the collection editor. Now you are ready to add a custom text effect.

5)      Click the “Add” button this will add a new effect.

6)      For the PositionCount property, use 1 as the value. This means that you want to edit one character at a time as opposed to a range.

7)      For the PositionCount property, use 1 as the value. This means that you want to offset the 2^nd character (as most of the things in .Net, this is 0 based).

8)      Now use the transform editor to translate the character as you want!

If you have dual monitors, you can move the collection editor to the secondary monitor and you will see that any changes you make to the modal collection editor and updated on the design surface in real-time, which is pretty cool.

While editing using the collection editor is not ideal (and something we would like to fix in the future), this is such a specialized editing operation that I think people will sacrifice the editing convenience for the coolness of the feature (at least for the time beingJ). It does not end there – you can arbitrarily transform each character like rotate them or scale them. You can also animate these effects so you can do effects like “characters falling from the sky”. Try it out and give us some feedback.

What is new in Expression Blend Beta1?

We listened to your feedback and worked a large number of new features to help you become more productive + improved a lot on our old set of features. Explaining all the new work would probably be too much for a blog post, but I will try to highlight on all that I can recollect. Give it a shot!

 

• Project system
• Solution support: We now support opening solutions (.sln). This lets you work seamlessly with Visual Studio and your favorite developer without frustrations.
• User Controls: User Controls let you compose your UI into more manageable entities – gone is the day of that humongous XAML file that tried to describe your entire application’s UI. Check out File -> Add New Item that lets you create these. We also let you embed User Controls within one another and let you jump out to the appropriate User Control (within a project and across projects) to edit them. Right click on a User Control that you have embedded in your application to edit it.
• Re-designed user experience
• The new Expression Dark theme: The dark theme is meant to let you focus on the design surface, and puts everything else in the background. We also plan to support a lighter theme (called Expression Light) for those paranoid of dark user interfaces – however, this is something that we have yet to work on although you can see a placeholder for the same in the Options dialog).
• Workspaces: We ship with two distinct workspaces – one of the workspaces lets you have a wider timeline palette and is useful for complex animation sequences. In addition, you can undock any palette to your secondary monitor.
• Shortcuts, shortcuts, shortcuts: Almost everything is now accessible using keyboard shortcuts. My favorite (and did we miss this!): Hit Tab to hide all palettes so you could focus on your work. When you hit tab, we have enabled a special mode for the property inspector that lets you make quick edits to a property without making the entire UI visible.
• Focus issues: In keeping with the various professional design tools out there, and quite contrary to Visual Studio’s design surfaces, the focus is almost always on the design surface. This lets you quickly navigate between different functionality, with lesser number of clicks.
• Property editing experience
• Context sensitive property grid: One of the biggest differences you will see in Blend is that we moved away from the palette metaphor. The palette metaphor works great for drawing tools which have a limited set of things you can manipulate, but for WPF and all its richness, it can become a hassle since you need many, many palettes. Enter the context sensitive property grid which tries to blend (no pun intended) the best of both worlds: You get categories that try to preserve the well known palette metaphor, and that you can collapse to hide. But you also get a one stop shop for setting practically any property in WPF.
• Search for properties: The search feature in the property grid is well integrated to search across categories.
• Brush and color editors: We have done a ton of work on these, and it would probably warrant a post of its own. Couple major things we integrated, thanks to your feedback: Specifying Hex values and values in the 0-255 range, and the ability to pick color and brush resources.
• Extensibility: The property editing experience is extensible, meaning you can write your own categories, and editors for your properties. In addition, the extensibility API for the property grid is the same as that exposed for Visual Studio – so with one bullet, you can target two sets of audiences. I will detail this out in a following post. The cool thing here is that we have written a lot of Blend’s property grid against this API – so that shows the power.
• Collection editor: Lets you edit collections of things like BitmapEffects, items in a ListBox, etc.
• Create and apply BitmapEffects: Now you can create and apply your favorite BitmapEffect using Blend. However, standard warning applies: BitmapEffects are rendered in software in WPF, so be subtle in their use if you want fast user experiences!
• Asset creation
• Tool bar: Tool bar lets you create elements like shapes, and some common controls, in addition to the various standard tools like selection, zoom, and pan.
• Asset tool: Asset tool replaces the library palette and provided the one stop shop for creating any WPF or custom control. The asset tool also maintains an MRU list of controls that you create so you can quickly create a second instance. The asset tool palette lets you drag and drop control so controls get instantiated at their default size or you can double click to instantiate a control at a certain specific size.
• Search: Like the property grid, the asset tool lets you search for controls so you can quickly find them.
• Better workflow with Microsoft Visual Studio
• Edit projects in Visual Studio: Right click on a project or solution file in the project pane to edit in Visual Studio. Now you can right click on any file and chose to edit it in Visual Studio. It is great fun (and highly productive) to be using Visual Studio and Blend on a two monitor setup! Any changes you make in Visual Studio are automatically picked up by Blend.
• Add event handler code in Visual Studio: We simply did not have enough time to provide a great coding experience. But don’t worry – we more than made up for it by falling back on Visual Studio. You can choose to setup Blend such that when you add an event handler, the right file will be opened up in Visual Studio and the handler added for you – all ready for you to code away.
• XAML editor
• View XAML: Right-click on any element, resource, etc. and quickly jump to the corresponding XAML. This is extremely useful when you don’t really know where something is located in XAML.
• Find and replace: Lets you find and replace stuff in XAML. Also lets you jump to a different line.
• XAML coloring: Pretty standard stuff. We also color markup extensions (stuff like Bindings, Resource references, etc.) with a different color so you can quickly find them.
• Resource management
• Is my resource missing? If it is, we will show it to you. Any missing resource references are shown in the results pane. You no longer have to debug your application to figure this out! WYSIWYG.
• Manage resources. We let you drag and drop and copy and paste resources across various resource dictionaries – application level, document level, and external. We try to be smart enough to ensure that your document is never “broken” when you move resources around, and will prompt you when the document integrity cannot be maintained. This is a major feature that we worked on – we wanted to make sure that you could manage resources as an after-thought.
• Resources pane: The resources pane is your one stop shop to see resources that are being used in your current document, and all other resources that can be applied. You can edit most resources directly from within here (and better support for this is coming in the near future – this is a work in progress). You can drag and drop a resource from the resource pane onto your element – this makes it very easy to work with any pre-defined resources that you may have.
• Filter resource: Imagine that you have 10 different resource dictionaries, and 100s of resources. How do you figure out all the resources that are being used by an element so you could edit them? Use the “Filter” button in the resource pane to only see resources that are currently being used by the selected element (Styles, brushes, etc.).
• Create resources out of virtually anything. In our previous CTP, it was not possible to create and apply Visual Brush resources. Now it is – the key scenario here is to create one or more reflections that are “live”.
• Layout and drawing
• Snapping: You can snap to other elements, text baseline, and grid rows and columns – forms layout is now as easy as ever. You can also have a snap grid that helps for vector drawing operations.
• Boolean operations: We support a variety of Boolean operations on paths – Unite, Divide, Intersect, Subtract, Exclude, and Exclude Overlap. Check out the Object - > Combine menu.
• Fill an element in a container: Right click on an element -> Auto Size -> Fill to cause the element to occupy all the size made available by its parent.
• Timeline and interactivity
• A workspace that is completely dedicated to let you focus on creating animations.
• The completely redone triggers pane lets you create and edit various kinds of triggers. A follow up post will be necessary to explain all of it, but you no longer have to hunt around for a way to trigger a MouseOver animation or create a MousePressed state.
• Drag and drop to reorder elements in the timeline.
• Timeline is now automatically expanded to show selection on the design surface.
• Miscellaneous
• XAML is as clean as ever: We listened to a ton of feedback from you, thanks! As a result, the XAML we generate is very concise – no extra precision, extra attributes.
• Documentation: Tooltips for various WPF (and custom) controls is now available right within the product. In a future release, all properties will also have a brief documentation associated with them.
• Color eye-dropper: This lets you sample colors from anywhere on the desktop.
• Gradient eye-dropper: Ever saw a nice line gradient that took time to reproduce? We have a solution for you. This is one of my favorite subtle features. You can sample gradients from anywhere within Blend or outside it on the desktop.
• Object Data source dialog: An improved data source dialog that lets you search for a type that you want to add as data source.
• Simple style editing: Let’s admit it. WPF control can be difficult to edit primarily because of two reasons: they try to compliant with the standard Aero (on Windows Vista) and Luna (on Windows XP) counterparts, often a lot of their functionality is baked into code for performance reasons. To make it easy for our users, we now ship with a set of styles for all the standard controls that you might want to edit (check out the Asset tool -> Simple Styles) – these styles are not functionally complete but they provide a great starting point for customization. When you use a Simple Style, all we do is include an external resource dictionary will the style definition.
• 3^rd party control licensing – If you are 3^rd party writing a WPF control, you can take advantage of licensing functionality baked into the tool. Users of you control will have to acquire a license from you before using your control.
• Design time detection – You can now easily figure out when you control is running on the design surface (How? – a follow up blog post will explain). This lets you, among other things, populate data structures with data that is only available at run time (for example, at the click of a button) so you could design you application better.
• Cut/Copy and Paste has been greatly improved: When you cut/copy and paste an element, we will copy all necessary resources that are required to preserve the integrity of the document. 

If you reached here, you probably will have a lot of questions (in addition to positive and negative feedback!). Please feel free to ask and share your feedback…

Microsoft Expression Blend Beta1 is here!

It took a while, but we finally managed to get it done. Previously code-named "Sparkle", then named "Microsoft Expression Interactive Designer", we finally settled for "Microsoft Expression Blend". There is more to it than just the new name - download and try now from http://www.microsoft.com/expression. (It will be a while before the site updates make their way thru the server farms, but try http://www.microsoft.com/products/expression/en/expression-blend/try.mspx)

If you offered us feedback either via the Newsgroup or Connect, we are very thankful to you. We also wanted to thank you for your patience as it has been almost a year since we published anything - this time, we wanted to take the time and do it right! You will notice that we really listened to your feedback and we will continue to do so thru the Beta period - if you really want to see a feature that is greatly missing from Blend, now is the time to let us know. As soon as I get a few minutes to finish it up, I will post a list of things that I think are cool in this new Beta (and yes, it will be a long list).

I tried my best to make sure any bug you reported via Connect or the Newsgroup would get fixed. However, I am sure we missed a couple (as is always the case). My apologies - please let me know - we will def. fix them for the next release.

Have a great holiday season!

Source code for the Gadgets and Messenger projects

Finally, I got some time to zip and upload some files!

XPGadgets
XMessenger

How would the Vista gadgets look like on XP?

The other weekend, I got some spare time to see how I could go in re-creating the sidebar experience that will ship with Window Vista on XP.  I was amazed at how far I could get using Expression Interactive Designer. Here is the current status of my effort:

 

I only wish I could show some off some of the transition effects – in this case, a picture is not speaking the 1000 words they say it does.  At some point in the near future (once an appropriate version of WinFX run-time ships) , I will post the source code for this project on CodePlex. If you download the code, you will be held responsible for contributing a gadget of your choice to this project J.

Not bad for a weekend’s worth of work ah?

Note: Contrary to some of the e-mails I have recieved, this project has nothing to do with the Vista Gadgets. This is only an imitation of them created as a Windows Presentation Foundation application using the Expression tools. The main goal of this project was to see how the Expression tools would scale up to a more real-world application, and to understand some of the usability issues of the tool so we could fix them.

Expression Interactive Designer May CTP is available

We just published a new build of Expression Interactive Designer targeting Beta2 of WinFX and Windows Vista. Please download it from here. We look forward to your feedback.

What did I use Interactive Designer most recently for?

This:

We recently finished up another product development milestone, and at the end of it had a day-long bug-bash to find bugs in the product. Arturo and I teamed up and came with the simple "application" above done 100% using the Expression tools (and of course, VS for some coding purposes). Arturo came up with the concept and the visuals in Graphic Designer. I then made the application come to "life" using Interactive Designer.

We have been listening to your feedback, and we have been working hard on fixing the issues. You will be glad to hear that each of the contents of the tab items (the messenger buddy list, the FreeCell game, and some stock information) is its own "scene" (UserControls for those who care) that has been designed independent of each other (they share some resources like brushes) and has been put together in Interactive Designer. Hopefully, the days of massive XAML files are now gone!

I will post the source for this sample as soon as the new build of Expression Interactive Designer (and more importantly, a new version of WinFX run-time components) becomes available. Unfortunately, I don't have any release date information...

Resizable panels

Somebody asked me how one could extend the "Panel-like system" such that Panels could be re-sized. Here is my attempt... Source can be downloaded and improved at will from here.

Expression Interactive Designer training videos

We just made available some training videos for Expression Interactive Designer. Be sure to check them out here. Simply click on the Interactive Designer tab at the bottom of the page.

March CTP of Expression Interactive Designer is now available

Our March CTP that targets the February CTP of WinFX run-time components is now available. Visit http://www.microsoft.com/expression and give it a shot!

...And another one - a Stocks widget

Here is another attempt at a widget that I put togther in couple of hours last night - this lets you search for Stock quotes. This is fun stuff and easy to do - expect coolers ones from the many talented designers out there once WinFX and Expression Interactive Designer ship!

Two things to note: The OS that the application is being run on is not Windows Vista, it is the Feb. CTP of WinFX on Windows XP - I simply faked out the chrome for the window to look like the Aero glass one. Also, the text box behaves like the ones made popular by AJAX - it shows you a red highlight if the stock symbol that you entered is invalid by querying the Windows Live stock quotes service. If valid, it will show you the name of the company and a green highlight for the text box.

Feel free to download the source, and improve at will (excluding the content) from here. The code and design quality could have been a lot better, but I always run out of time at that point :).

A simple widget done using Interactive Designer

I have been busy lately with feature work and working on the impending release of our March CTP that will be compatible with the Feb. CTP of WinFX. However, this weekend, I got a chance to play with Interactive Designer again and came up with a simple widget. Here is the result - you need the Feb CTP of WinFX to run the sample:

The cool part was that given couple lines of framework code (for making the transparency work), you can take Interactive Designer and go wild designing the widget of your choice. This one required no code (other than a couple of trival event handlers here and there) and every line of Xaml was generated in Expression Interactive Designer.

Source can be downloaded and re-used (excluding the content) at will from here.

Imagine Cup for wannabe Designers

I just got an invitation to participate in the Imagine Cup. This is a Microsoft-sponsored competition that allows folks attending high-school, college or university to - as the name suggests - imagine, design, and implement an idea of their choice around a particular theme. This years' theme is "Imagine a world where technology enables us to live healthier lives". Also, this years' competition will have a new track called "Interface Designer". With so many tools and platforms currently available and emerging that want to improve a user's experience in working with a computer, the timing could not have been better. It is with this track that I will be associated with.

If you or anyone you know is 16 or more years old, attends school/college/university, likes to imagine, is trying to earn a few thousand dollars in prize money and a free trip across the world to see Taj Mahal, and most importantly wants to make friends in different academic communities of the world and learn, this is a great opportunity. I am excited!

 

Working around Interactive Designer launch issues

Some customers have reported issues in launching Expression Interactive Designer where it crashes on launch. This issue has been documented here. These problems have since been addressed by the WPF team. While there is no known workaround for the non-Intel P4 chipset issue, there is some twiddling that you could do to workaround the corrupt GAC bug. If you are interested in doing this (and I really hope you are since I would love to hear more feedback about the product from you), you can do the following:

 

Step 1: Making sure it is the same issue

1. Download a tool (small .exe) that I wrote from here. Rename CustomAssemblyAttributeDebugger.exe.zip to CustomAssemblyAttributeDebugger.exe
2. After copying the tool locally, run it. If you get some debug output in your command prompt (not just “Hit any key to finish..”), you know that it is the same issue. The tool will also tell you what the problematic assemblies installed in your GAC are. What is happening is that these assemblies define some attributes that reference types that are not defined in any of the assemblies currently in the GAC. This really is the root cause of the WPF issue. This is likely caused by some installer that did not clean up correctly and left things in the GAC whereas it should not have.

Step 2: Fixing the issue

1. To fix the issue, there are two steps that you can take. First option is to re-install the assemblies that define the missing types.
2. Install on a cleaner machine, or clean up the erroneous assemblies in the GAC listed by the tool you tried. Unfortunately, I don't have enough experience with the latter approach but you can find a lot of information here at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cptools/html/cpgrfglobalassemblycacheutilitygacutilexe.asp

"Panel-like" system

Someone asked me how to implement a “panel-like” system using Expression / WPF. This led me to do a small take on Expression Interactive Designer itselfJ. Though the panel system presented here is only 1/100^th as complex as our real Palette management infrastructure (and is my own code), it serves as a good example to get you started. Source for this example can be downloaded / re-used / re-implemented at will from here.

 

 

I wanted to highlight a few concepts in this example: a) How to implement a naive dragging  system, b) How to create and raise your own events, c) How to do simple hit-testing in WPF so you can figure out what is under the mouse and drop into it. I also wanted to highlight the clear distinction in roles between a developer and designer (my design skills are found severely wanting at times!).

 

The Panels are all custom controls that extend HeaderedContentControl because we want the panels to be draggable only when clicking on the Header part and we also want the designer to be able to specify Header and Content for every Panel. It is expected (call it a contract if you will) that the designer will name one element in the template of the control to be “PART_Header”. As long as this contract is maintained, the control should work as expected; else the drag functionality simply won’t be there.

 

Next step is to pull out Interactive Designer (the real one!) and create the look for an individual Panel and layout the various Panels. All the Panels share the same “chrome” (consisting of the border and the close button) and this is done by applying the same template to each. Also, each Panel’ template has two ContentPresenter elements – one to render the Header (which is a string in our case), and one to render Content (which are simple images). These various panels are then added to two ItemsControl (for the left and right containers). Also, grid splitters have been used for resizing the panel columns – neat, ah?

 

Back to the developer role using and using VS. At this point, we have the capability to drag panels around. Now, we want to be able to drop them into other containers. Whenever a panel is dragged, it raises a custom event called “DragPanel”. Also, when the user lets go of the mouse, another event called “DropPanel” is raised. These events then bubble up to the parent Window which then performs required logic for changing containers around. One advantage of using eventing in this fashion is that I can then reuse my custom Panel class in other scenarios where I don’t really care about drop-drop and parents and such. Also, you will see the use of some simple hit-testing code to determine the ItemsControl into which a container is dropped. Personally, I don’t prefer writing low-level hit-testing code (as I have shown in the example) and I would rather use data-binding and custom controls for this purpose – this is just there for the purpose of showing the power of the platform.

 

Feel free to send feedback to me!