One of the early goals we had we Family.Show was to make the XAML files easy to read and understandable. I want to share the list of some of the little things that we did to keep our XAML clean. I will be using the MainWindow.xaml page as an example.
Clean <Window> Tag
We placed the xmlns (xml namespace references) attributes first and in separate lines. Like the "using" section in .cs files, this keeps them organized.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Microsoft.FamilyShowLib="clr-namespace:Microsoft.FamilyShowLib;assembly=FamilyShowLib"
xmlns:local="clr-namespace:Microsoft.FamilyShow"
x:Class="Microsoft.FamilyShow.MainWindow"
Title="Family.Show" Height="728" Width="960"
Background="{DynamicResource MainBackgroundBrush}"
ResizeMode="CanResizeWithGrip">
Extensive Comments
Almost every code section will have a corresponding comment above it. We did this for two reasons. Visual Studio display comments as green text, which makes it really easy to scan the XAML for the tag that we want to modify. People new to the code will have an easier time understanding the XAML structure from looking the comments instead of the XAML tags.
x:Name
Although we will not reference all of the controls in our code behind, we would still name all of our controls. We always use x:Name instead of the Name attribute for consistency as not all controls support the Name property. We keep the x:Name as the first attribute again for consistency.
The naming help describes their function and why the control is there. This is especially helpful when it comes to picking the right controls to style in Expression Blend using the Objects and Timeline panel with the Property panel.
Use User Controls
User Controls are not only great for code-reuse; They are a great organization tool. With User Controls, we abstracted functionality into their own XAML file. It's like refactoring code into methods.
<!-- New User Control -->
<local:NewUserControl x:Name="NewUserControl" ... />
<!-- Welcome User Control -->
<local:Welcome x:Name="WelcomeUserControl" ... />
<!-- Person Info Control -->
<local:PersonInfo x:Name="PersonInfoControl" ... />
<!-- Family Data Control -->
<local:FamilyData x:Name="FamilyDataControl" .. />
Resource Dictionaries
We kept brushes, styles, and templates in separate resource dictionary files. Think of it as using a separate cascading style sheet in HTML. The look and feel is separated from the content. We could've done a little better by removing all inline styling in Family.Show.
By using Resource Dictionaries we were also able to implement the Skinning functionality by simply replacing the Resource Dictionary in code.
Structured indents and spacing
Like HTML and code, indents and spacing are a great way to keep XAML clean. The auto-format feature in Visual Studio really helps with this.
Well, that about sums it up
Hope this helps,
Alan