Click here to Skip to main content
13,736,633 members
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 28 Oct 2017
Licenced CPOL

Formating XAML for Readability

, 28 Oct 2017
Rate this:
Please Sign up or sign in to vote.
How to format your XAML documents for effective version handling & maximum maintainability

Introduction and the Source of Problems

If you design and create an XAML view using the VS designer or Blend, all properties are written to a single line.

This behavior is bad for code maintainability and for version control systems. You can't easily edit such an XAML manually, because you get lost in the properties.

Also, all of the Version control systems are based on line diff tracking. That means a property change changes the whole line, so you can't easily see the differences between two states of the file.

A Possible Solution

As always, there are several ways to overcome this problem. The first way is doing it manually. Ideally, one should split each property to one line. This way, when a single property changes, it is reflected by a line change. This makes review and change tracking easier.

Manually formatting a document can be painful and it's an additional developer task that takes time. Luckily, this process can be automated with a Visual Studio Extension, that is called XAML Styler. You can download the extension from

It comes with a variety of options. After installation, the options are available by navigating to Tools → Options → XAML Styler. I won't go into detail about this, because you can find the detailed description of each setting on the project's wiki page, which is located at

I use the following settings:

  • Attribute Indentation: 4 - This is the indentation of the property after the specifier tag. 4 spaces = 1 tab
  • Attribute indentation style: spaces - By default the VS code editor replaces tabs to spaces, so it's a good idea to be consistent with default formatting.
  • Max attributes per line: 1
  • Newline exception elements: I added the <rowdefinition> and <columndefinition> elements. My recommendation is to add any element here that has maximum of two parameters.
  • Enable Attribute reordering: true
  • Order Attributes by name: true
  • Remove ending tags of empty elements This one formats tags like <stackpanel></stackpanel> to <stackpanel/>
  • Format XAML on save: False

This is a very powerful tool that can make your life easier as an individual developer or a team member. Feel free to play along with the settings.

If this tool is used by a team, then the Team members should consult with each other to make settings consistent and to avoid further problems.

Points of Interest


  • 2017-10-28: Original release


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Hungary Hungary
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 28 Oct 2017
Article Copyright 2017 by webmaster442
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid