Home > Blend, Visual Studio, XAML > XAML Formatting in Visual Studio

XAML Formatting in Visual Studio

May 7, 2010

A question came up last night at RVNUG about manually editing XAML, something I avoid as much as reasonably possible.  When I have to edit XAML though, I almost always jump over to Visual Studio, so I was asked why I prefer to edit XAML in Visual Studio over the Blend editor.  Besides the fact that I’ve always just done it that way because originally we did not have Intellisense in Blend, I have two other reasons.

The first reason is that I use Blend to write XAML and Visual Studio to code XAML.  It sounds like splitting hairs, but let me explain.  Blend is the best darn XAML Editor ever written, primarily because it allows me to write and edit XAML without actually typing the XAML.  It magically translates the design I have on the screen into it’s XAML representation: that’s what makes it so awesome.  When I find a situation where I actually need to code the XAML and make textual changes to it myself, then I use Visual Studio, because it is the best darn Code Editor ever written.  To sum up: Design = Blend, Code = Visual Studio.

The second reason is far less highbrow: I dislike the default XAML formatting that Blend produces.  Don’t get me wrong, the XAML code itself is wonderful, almost pristine, but it compresses it to as few lines as possible.  That means lots of properties on a single line, which becomes an issue when you have a bunch of properties full of Binding references and more complicated structures.  So my preference is to see one property per line in the XAML.  This makes it much more palatable on those rare moments when I must code the XAML manually.

Setting up Visual Studio

I saw the question today on the Expression Blend forums about how to get Blend or Visual Studio to do exactly that, so I thought I would put up a quick post for the archives.

While Blend cannot format the XAML in this fashion, Visual Studio can:

  1. In VS2008 or VS2010 go to Tools –> Options
  2. Expand Text Editor -> XAML -> Formatting –> Spacing
  3. Under "Attribute Spacing" check "Position each attribute on separate line".
  4. If you prefer, you can also put the first attribute on the same line as the tag by checking the box.  I use this setting because it isn’t offensive and still saves a little space.

Now, whenever you edit XAML in Visual Studio, press "Ctrl+K+D" and Visual Studio will reformat the XAML as desired. 


Categories: Blend, Visual Studio, XAML
  1. Troy
    December 23, 2010 at 7:57 pm

    I absolutely agree with you Joel. I’ve just started using Blend and it’s an awesome product. I did find a great Visual Studio 2010 extension the other day that helps with XAML layout and attribute ordering. It’s called the Xaml Markup Styler Visual Studio 2010 Extension (xamlstyler.codeplex.com).

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: