The original version of the panel creates a Fireworks text block, pastes the generated XAML inside the text block, then does a clipCut() to remove the text block from the stage and copy it to the clipboard. The latest version (posted here), sends the XAML back to the Flash panel and, using the System.setClipboard() method, pastes the XAML to the clipboard. The result is a noticeably faster export operation, a very nice surprise.

I’ve also done a little additional housecleaning, adding support for the new pixel-based rounded corners feature of Fireworks CS4. This is actually one of my favorite new features — where previously the CornerRadius of rectangles in Fireworks was percentage-based (meaning the amount of roundness would change as you resized the rectangle) you can now specify a pixel-based CornerRadius. This approach ensures the same CornerRadius regardless of the size of the rectangle. (This is how both WPF and Silverlight do it also). The updated panel will honor both percentage and pixel-based roundness modes.

I also updated the way text is converted to paths. Now, instead of a group of individual path objects (the result you get when you select Text > Convert to Paths in Fireworks, I go two steps further, first ungrouping the indivual paths, then joining them into a single path. The result is a much cleaner single Path object.

One last fix I made over the weekend addresses a problem exposed by Silverlight. The FW to XAML panel automatically adds a .Resources collection to the outermost panel, should any of its children need to define a brush resource. Often, this Resources collection was rendered as an empty node <Grid.Resources />, something that the Silverlight engine does not like (WPF just ignores it). So, this latest update removes the Resources node if it’s empty. You’re welcome!

Summary of Changes

• New Clipboard Logic – supports Fireworks CS4, improved performance
• Support for both percentage and pixel-based rectangle roundness modes (pixel-based mode introduced with FW CS4)
• Text to Paths operation results in fewer XAML objects
• No longer render empty Resources collection (exposed via Silverlight)

Download DevScovery: Introduction to Blend Presentation

The Meeting in the Middle zip file includes the presentation, a demo project, and a Fireworks source file used for layout. This is the third time I’ve done this presentation and the second time I’ve done it with Josh. This time, we worked through the slides, covering core concepts in WPF that enable an effective designer/developer workflow and concluded the presentation by creating a simple XML-bound layout. Josh created the rough, developer-styled layout in Visual Studio, then I stepped in and imported artwork from Fireworks and tweaked the layout in Blend. We made it through without any problems – a miracle considering how many moving pieces there were. We kept the scope of the application extremely small though, so that worked in our favor.

Download DevScovery: Meeting in the Middle Presentation

In an effort to get more code to the public faster, Infragistics’ WPF team has shipped an interim build of NetAdvantage for WPF controls planned for the 2008 Volume 2 release. This release includes two major enhancements: xamOutlookBar and Printing Capabilities that not only easily print the xamDataGrid, but allow for the creation of a fully stylized report. The xamOutlookBar is styled and has functionally modeled off of Outlook 2007 which greatly increases the developers ability to create line of business applications. The Printing Capabilities allow not only printing, but allow for publishing documents out as XPS.

The CTP includes a Silverlight Chart and Silverlight Gauge both of which you can see in the online demo. So download the bits, take them for a test drive, then send us feedback and help shape the final shipping product!

For those of you who’ve been thinking about creating your own custom skin, now you finally have some incentive to do it! Josh and I put in a lot of late nights to release Podder v2 in time for Mix ’08. That was almost two months ago, so I’m sure you’ve already had ideas for new skins that you just haven’t made time for. Well, you have until July to realize your vision – so get to it and impress us all!

I only have the “Open” function working, which lets you browse for a ResourceDictionary. I’m planning on adding Save capability and a Sync feature, which will synchronize objects on the stage with brushes assigned to them should the resource change. Watch for that over the next 3 months

Known Issues: I’ve found that I have to open the same ResourceDictionary twice sometimes in order for the file to be recognized. So if your brushes don’t appear at first, try again. If your brushes never appear, or if you run into bugs, please send me a note along with your ResourceDictionary and I’ll add it to my list of test RDs.

(7: The number of times I typed “Panel” in this post, 8 after that last reference)

Download ResourceDictionaryPanel Preview
(Double-click MXP to install, swf included if you have problems, copy directly to the Command Panels folder: C:\Program Files\Adobe\Adobe Fireworks CS3\Configuration\Command Panels)

The second video demonstrates a feature that I’m really excited about: ResourceWashing. Using ResourceWashing, you can “wash” the brushes defined in ResourceDictionaries with a new color. Since the brushes can be washed at runtime, you can create an application that can be infinitely customized by the end user — really exciting! This is the same washing technology used by AppStylist for Windows Forms in the “New from Template” feature. The xamRibbon is the first control whose brushes have been grouped into “WashGroups” to really take advantage of this technology. Moving forward, we’ll be applying the same techniques to the other controls. I can’t wait to see what the WPF community ends up creating with this technology!

Videos

• xamRibbon QuickStart Video
• ResourceWashing Video

If you’re reading this blog, you’re probably also reading Josh Smith‘s blog, and you’re probably aware that I’m working on a new skin for Podder, his WPF podcast reader. Throughout the design process, I’ve had lots of different ideas running through my head – I really have a clean slate to play with here, and any of you who have designed an app or web site from scratch know how challenging that initial blank page can be. There are so many possibilities, so many directions you can take the layout; ultimately, you just have to go with something then tweak until you go crazy. It’s definitely a different process than designing something that works (visually) with an existing product line. There, you have an established aesthetic that drives the design.

So, as I go into the polish stage and really have a feel for the direction the layout is going, I’m looking at ways to make the application feel responsive, alive. One way I’m doing this is through my “McGuffin”-Enabling Image Converter. This converter is bound to an Image’s Source property and then returns an “averaged” Color – I take a random sampling of pixels then average their color values. The resulting color represents the generalized color of the image. In Podder, I’m using this converter to set the background image of the application to a color that works well with the image of the selected podcast, so as the selection changes, the color of the application changes to match, and the plot advances (my McGuffin).

I’ve added this converter to the Infragistic ToyBox assembly that I started a while back (and haven’t actively added to in a while). Download the sample project to see the converter in action. (Note: it currently only works with local images, not images whose source points to a web address).

We have plenty of ideas for making the overall experience better, but I’d love to get some feedback anyway. I’m currently using a xamCarouselListBox at the top of the window to display resource dictionaries. In mockups this approaches looks clean and nice, but in practice it doesn’t really cut it. Most of our resource paths are actually longer than the template for each item provides, so we start to see text colliding. I’m planning on moving the resource list to the left side of the page and possibly presenting it in a tree or vertical tab format. I want to reinforce the relationship between the active resource page and the grid of resources. Later posts will also incorporate usage visualizations courtesy of our new xamChart.

 So — download Pistachio and take it for a spin! Let me know if you love it or hate it (or if it doesn’t work for you).

This application covers a huge range of techniques and technologies and is great way to increase your knowledge of WPF. We’ve used the xamCarouselListBox throughout the application in several different ways — hopefully this will inspire some additional creative uses of the control.