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" > Create a thread pool timer object that runs after the specified number of 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> |
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 a thread pool timer object that runs after the specified number of 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.
- Step 1
- Paste in the XAML code that you want to format.
- Step 2
- Hit the toolbar button shown in #2
- Step 3
- Set your indent size and other parameters
- I used "4" and "1"
- Set your indent size and other parameters
- 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 “=”
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 |
Comments
- Anonymous
January 10, 2013
The comment has been removed - Anonymous
January 11, 2013
The comment has been removed - Anonymous
January 14, 2013
A link to download the app would have been helpful -_- I provided that.See end of post for link from CNET
BRUNO - Anonymous
January 15, 2013
The comment has been removed - Anonymous
January 15, 2013
As a follow-up, I think the VS Extension XAML Styler works just dandy - easy as pie to install and then right-click and select "Beautify XAML"