Click here to Skip to main content
15,861,125 members
Articles / Desktop Programming / Universal Windows Platform
Tip/Trick

Formating XAML for Readability

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
28 Oct 2017CPOL2 min read 7.9K   3  
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 https://marketplace.visualstudio.com/items?itemName=NicoVermeir.XAMLStyler.

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 https://github.com/Xavalon/XamlStyler/wiki/Configuration.

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

History

  • 2017-10-28: Original release

License

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


Written By
Architect
Hungary Hungary
Been interested in computers & electronics since I got my NES, eventually became a Computer engineer, now a Software Architect

Comments and Discussions

 
-- There are no messages in this forum --