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
