Silverlight 3 and Expression 3

After months of top secret work at Microsoft my labors are nearly realized. Yesterday Silverlight 3 and Expression 3 were released as an RC. If you haven’t checked it out you should definitely go and play around with the new bits. Here is a overview from Soma himself:

http://blogs.msdn.com/somasegar/archive/2009/07/10/launching-silverlight-3-and-expression-studio-3.aspx

Specifically I worked on the Photoshop Import functionality found in Expressoin Blend, Design and Web. It has been an exciting and rewarding project and I’m really looking forward to what is coming up next!

One of the other cool features to check out which was created by fellow Minnesotans, is Sketch Flow for Expression Blend. It’s a cool tool you can use to quickly prototype new applications and features.

Expression Photoshop Importer – By Soma

In his latest blog post Soma did a feature preview of the new version of Expression Web and the Photoshop importer gets an honorable mention.

http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

With Expression Web 3, we have significantly improved capabilities and workflow when working with Photoshop files. When you import a PSD file, you can choose just the layers you want to import in to your website. You can save the layers as JPG, PNG, or GIF and scale the image* before saving the individual layers in Expression Web 3. If the source file has changed, Expression Web 3 prompts you to update it.

*Actually, you can’t scale the imported image in this window but you can zoom in or out of the preview to view it scaled and you can adjust the quality if you select jpeg. Once it is imported you can scale the dimensions of the image with your image editor of choice.

One interesting thing about the Photoshop Importer is that it is an expression wide feature rather than simply for Blend. Specifically it will be a feature available in Blend, Web and Design for this release. In each application the importer will have slightly different behavior. For example in the window shown here you can see there are options for Encoding and Quality as well as a field displaying the estimated size. When you import a Photoshop file in Web you will get a single flattened image rather than multiple resources like in Blend and Design.

Designing the importer so that it could be extended to support different feature sets for each application was one of my main roles so far. It was a lot of fun and I learned a lot!

Derived Styles based on unnamed default Styles

This seems so obvious in retrospect but I just learned something very useful today so I thought I’d put it out there just in case anyone else wasn’t aware of this.

Specifically the problem occurs when you create a style in Xaml that is supposed to be the default style for a particular type of Control. For example:

<Style TargetType="{x:Type ComboBox}">
</Style>

This will allow you to create a style for all ComboBoxes. If a ComboBox does not specify a specific Style it will get this one automatically. The tricky part comes when you want a single particular ComboBox to deviate from the style just a little bit. So typically what I do is create the main Style that is named then create the default Style to be based on that main one like:

<Style x:Key="ComboBoxBase" TargetType="{x:Type ComboBox}">
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource ComboBoxBase}">
</Style>

Then if you make any further custom styles they can just be based on ComboBoxBase and change as necessary. While this works I just found a way that is potentially cleaner. It turns out that you can pass in a Type to the StaticResource instead of a key and get at the default Style for that Type. Very handy, like so:

<Style TargetType="{x:Type ComboBox}">
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
</Style>

How did I not know this sooner? This way you put all of your main styling into the official default Style, you also don’t need to remember the name of that default Style to use it.

Disclaimer: I haven’t tried this on Silverlight, only WPF.

Photoshop Import in Blend 3 – by Janete Perez

Janete Perez has created a great series of blog posts on importing Photoshop files into Expression Blend. I have been apart of the Expression team for almost a year now and I have been working on the Photoshop Import feature, so these posts are especially interesting to me.

http://blogs.msdn.com/janete/archive/2009/05/27/photoshop-import-in-blend-3.aspx

Expression Blend for Developers

Expression Blend often times is portrayed as a tool for graphic designers, which is fair enough, but this can be a little daunting for people who are artistically challenged like myself. If you’re primarily a developer you probably want to use a developer tool, like Visual Studio, to do your work. But I might assert here that Expression Blend actually is a tool for developers and not to be dismissed! I often hear one of the following reasons from developers as to why they might avoid using Blend.

  • I’m not “artsy” I prefer to dig into code, none of this drag-and-drop business.
  • I’m working on a business application, making it look pretty is unnecessary, costly, fluff.
  • Having a dependency on .NET 3.5 isn’t worth it, I’ll stick with .NET 2.0.
  • etc.

I can summarize my response to all of these positions by simply saying that I would never choose to do WinForms or an MFC application over Wpf in any circumstances. If you’re not using Wpf, even for simple business applications, even if you don’t have a single artistic bone in your body you’re definitely missing out. I might even go one step further and saying you’re actually making a mistake.

I might even go so far as to say that the same thing holds true for doing Silverlight development over standard Web development. The benefits aren’t nearly as stacked in favor of Silverlight for the web as Wpf is for desktop applications but it’s still a winner in my eyes. Additionally, with Silverlight 3 you’ll be able to create applications that can be run as desktop applications or on the web. That kind of re-usability (of skills and code) is another win.

And Blend is the tool to make these technologies come alive.

User Experience

User experience is not “fluff” or unnecessary. Usability translates directly into money, even for simple business applications. The less usable your application is the larger the training costs, the longer the development time, the likelihood of data input errors becomes higher, and just general unhappiness from your customers can be a result if you don’t pay attention to UX. This is a competitive market, customers more and more have higher expectations from every piece of software they use, especially ones that they’re paying money for.

And believe it or not as a developer you’re definitely going to want to learn a little something about Expression Blend. You don’t need to be an expert and know all of the various tricks and commands but you’ll probably find a huge productivity gain from just from knowing a little. And as we know, productivity is money in your pocket.

Roles

Typically if you’re a developer in a Wpf project you’ll find yourself in one of two roles.

  • Designer supporter
  • The Devigner (Designoper?)

The Designer Supporter

As the developer tasked to work along side designers you may think that because you have people who are tasked with doing all of the UI work you don’t need to know anything about Xaml or Blend. Or even worse, you may know too little but just enough to screw up the workflow for the designers. Knowing a little bit about Expression Blend and how to effectively support your Designers will be critical to your success. Here is a quick list of things you should learn about.

  • DataBinding
    • Binding class
    • IValueConverter
    • ObjectDataProvider
    • Design time data
  • ViewModels
    • INotifyPropertyChanged
    • INotifyCollectionChanged
  • Markup Extensions
  • Behaviors
  • Custom Controls
    • Visual State Manager
    • DependencyObject
    • DependencyProperty
    • Attached properties
  • Theming
    • Generic.xaml
    • [assembly:ThemeInfo]
  • Commands
  • Routed Events

As a developer supporting designers you will find yourself either having to DataBind your ViewModels to an existing UI created by the designers or you will have to create ViewModels that the designers can then build their UI around. Most likely the designers will want the former while developers will want the latter. All I can say is that the sooner you bring them both together and make it real the better off you will be.

The above topics will be crucial to know in order to preserve the developer / designer workflow with minimal friction.

The Devigner

You may actually be artistically inclined enough to claim this title yourself but then again maybe you’re simply tasked with this out of necessity. For developers who find themselves plunging into the world of Expression Blend here is a list of tasks, in addition to the previous list, that you may want to start learning about.

  • Templates
    • ControlTemplate
    • DataTemplate
    • DataTrigger
    • TemplateBinding
  • Visual State Manager
  • Storyboards
  • Commands
  • Styles
    • Setters
    • Triggers
  • Resources
    • Merged Dictionaries
  • Gradients
  • Layout Controls
    • Grid
    • StackPanel
    • ListBox
    • DockPanel
    • Canvas
  • Layout Transform vs. Render Transform

And really the list goes on and on. There is a myriad of things to learn but this is a pretty good start.

The important thing to know here though is that Expression Blend is not just a tool for Designers. It’s simply a tool geared towards creating rich interactive applications. Designers and developers alike will benefit greatly from this tool in any Wpf project, whether you’re just hooking up DataBinding for designers or doing it all yourself.

I would like to break down each of these topics in following blog posts with a developer oriented slant and how they can be done in Blend, so keep an eye out for those!

MIX09 Announcements

There are lots of cool videos of demos and discussions over at Mix09 today. If you haven’t been there you should definitely head on over.

http://live.visitmix.com/

There are lots of cool announcements for new features for the next version of various Microsoft products. Too many for me to even enumerate in a single blog post actually but what’s really exciting is that I finally get to tell everyone what I have been working on these last couple on the job at Microsoft.

I have been working with a small team of developers, here in Minneapolis, who are responsible for the Photoshop Import feature of expression studio. It’s been a very interesting an exciting project so far and it seems like something that developers and designers are both very happy about. Here is a screen shot from the Mix demo site.

ExpressionBlend3PhotoshopImportFeature_web[1]

We’re able to read the layer information from a Photoshop file and import them as separate controls into Blend. Once there a developer can make those generated layers into real interactive controls like anything else in Blend. There is also a re-import feature to ease to workflow from designer to developer. This exact incarnation of the importer is available in the build of Blend 3 Preview, so download that and give it a shot! Feel free to send me feedback if you do try it out.

Expression Studio and MIX09

Tomorrow is Day 1 of MIX09, if you’re not aware of this then you must be living on mars should amble on over and check out what’s in store this year. There’s a lot I can’t tell you but I can say there are tons of cool new features being announced for the first time tomorrow, including the one that I have been working on here in Minneapolis. Also, there are some features that will be demoed during the keynote that will not be apart of the public CTP released at the same time so you should definitely check that out to get a complete idea of the sweetness of the real release.

If you have any questions about features feel free to ask me sometime tomorrow after the keynote 😉 Until then it’s all hush hush.