How to format XAML Easily and Effectively – Windows 8, WPF, Silverlight


Intro

I constantly format XML and XAML for my blog posts and for live presentations. The method I demonstrate is simply wonderful.


Before and After the format

Before the format

Unformatted Code
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 <!--//*********************************************************//// Copyright (c) Microsoft. All rights reserved.// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.////*********************************************************--><common:LayoutAwarePage    x:Class="ThreadPool.DelayTimer"    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:ThreadPool"    xmlns:common="using:SDKTemplate.Common"    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Grid x:Name="Input" Grid.Row="0">            <Grid.RowDefinitions>                <RowDefinition Height="Auto"/>                <RowDefinition Height="Auto"/>                <RowDefinition Height="*"/>            </Grid.RowDefinitions>            <TextBlock x:Name="InputTextBlock1" TextWrapping="Wrap" Grid.Row="0" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Create&nbsp;a&nbsp;thread&nbsp;pool&nbsp;timer&nbsp;object&nbsp;that&nbsp;runs&nbsp;after&nbsp;the&nbsp;specified&nbsp;number&nbsp;of&nbsp;milliseconds.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TextBlock>            <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Grid.Row="1">                <TextBlock Style="{StaticResource BasicTextStyle}" Margin="0,10,10,0" Text="Delay in ms."></TextBlock>                <ComboBox x:Name="DelayMs" SelectedIndex="0">                    <ComboBoxItem>0</ComboBoxItem>                    <ComboBoxItem>100</ComboBoxItem>                    <ComboBoxItem>500</ComboBoxItem>                    <ComboBoxItem>1000</ComboBoxItem>                    <ComboBoxItem>5000</ComboBoxItem>                    <ComboBoxItem>10000</ComboBoxItem>                </ComboBox>                <Button x:Name="CreateDelayTimerButton" Content="Create" Margin="0,0,10,0" Click="CreateDelayTimer" IsEnabled="True" Grid.Row="2"/>                <Button x:Name="CancelDelayTimerButton" Content="Cancel" Margin="0,0,10,0" Click="CancelDelayTimer" IsEnabled="False" Grid.Row="2"/>            </StackPanel>        </Grid>        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">            <StackPanel>                <TextBlock Style="{StaticResource HeaderTextStyle}" TextWrapping="Wrap" Text="Thread pool delay timer" />                <TextBlock x:Name="DelayTimerInfo" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" Text="" />                <TextBlock x:Name="DelayTimerStatus" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" Text="" />            </StackPanel>        </Grid>                <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts -->        <VisualStateManager.VisualStateGroups>            <VisualStateGroup>                <VisualState x:Name="FullScreenLandscape"/>                <VisualState x:Name="Filled"/>                <VisualState x:Name="FullScreenPortrait"/>                <VisualState x:Name="Snapped"/>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>    </Grid></common:LayoutAwarePage>

After the format (nicely indented now)

Formatted Code
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 <!--//*********************************************************//// Copyright (c) Microsoft. All rights reserved.// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.////*********************************************************--><common:LayoutAwarePage    x:Class="ThreadPool.DelayTimer"    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:ThreadPool"    xmlns:common="using:SDKTemplate.Common"    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid        x:Name="LayoutRoot"        Background="White"        HorizontalAlignment="Left"        VerticalAlignment="Top">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Grid            x:Name="Input"            Grid.Row="0">            <Grid.RowDefinitions>                <RowDefinition Height="Auto"/>                <RowDefinition Height="Auto"/>                <RowDefinition Height="*"/>            </Grid.RowDefinitions>            <TextBlock                x:Name="InputTextBlock1"                TextWrapping="Wrap"                Grid.Row="0"                Style="{StaticResource BasicTextStyle}"                HorizontalAlignment="Left">Create&nbsp;a&nbsp;thread&nbsp;pool&nbsp;timer&nbsp;object&nbsp;that&nbsp;runs&nbsp;after&nbsp;the&nbsp;specified&nbsp;number&nbsp;of&nbsp;milliseconds.</TextBlock>            <StackPanel                Orientation="Horizontal"                Margin="0,10,0,0"                Grid.Row="1">                <TextBlock                    Style="{StaticResource BasicTextStyle}"                    Margin="0,10,10,0"                    Text="Delay in ms.">                </TextBlock>                <ComboBox                    x:Name="DelayMs"                    SelectedIndex="0">                    <ComboBoxItem>0</ComboBoxItem>                    <ComboBoxItem>100</ComboBoxItem>                    <ComboBoxItem>500</ComboBoxItem>                    <ComboBoxItem>1000</ComboBoxItem>                    <ComboBoxItem>5000</ComboBoxItem>                    <ComboBoxItem>10000</ComboBoxItem>                </ComboBox>                <Button                    x:Name="CreateDelayTimerButton"                    Content="Create"                    Margin="0,0,10,0"                    Click="CreateDelayTimer"                    IsEnabled="True"                    Grid.Row="2"/>                <Button                    x:Name="CancelDelayTimerButton"                    Content="Cancel"                    Margin="0,0,10,0"                    Click="CancelDelayTimer"                    IsEnabled="False"                    Grid.Row="2"/>            </StackPanel>        </Grid>        <Grid            x:Name="Output"            HorizontalAlignment="Left"            VerticalAlignment="Top"            Grid.Row="1">            <StackPanel>                <TextBlock                    Style="{StaticResource HeaderTextStyle}"                    TextWrapping="Wrap"                    Text="Thread pool delay timer"/>                <TextBlock                    x:Name="DelayTimerInfo"                    Style="{StaticResource BasicTextStyle}"                    TextWrapping="Wrap"                    Text=""/>                <TextBlock                    x:Name="DelayTimerStatus"                    Style="{StaticResource BasicTextStyle}"                    TextWrapping="Wrap"                    Text=""/>            </StackPanel>        </Grid>        <!--Add Storyboards to the visual states below as necessary for supporting the various layouts -->        <VisualStateManager.VisualStateGroups>            <VisualStateGroup>                <VisualState x:Name="FullScreenLandscape"/>                <VisualState x:Name="Filled"/>                <VisualState x:Name="FullScreenPortrait"/>                <VisualState x:Name="Snapped"/>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>    </Grid></common:LayoutAwarePage>

Using XML Marker 1.1

This tool is free and easy to use. You download it off the web.

image

  1. Step 1
    • Paste in the XAML code that you want to format.
  2. Step 2
    • Hit the toolbar button shown in #2
  3. Step 3
    • Set your indent size and other parameters
      • I used "4" and "1"
  4. Step 4
    • Click OK

A quick search and replace and you’re done

XML Marker will insert spaces near equal (=) signs. A quick search and replace can fix that. Look for “ = “ and replace with “=”

image


You are doneYou now have code as you see above in Formatted Code.

XML Marker Download 1.1 https://download.cnet.com/XML-Marker/3000-7241_4-10369541.html