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

 

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

Rate This
  • Comments 5

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!--
//*********************************************************
//
// 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ThreadPool"
    xmlns:common="using:SDKTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!--//*********************************************************
//
// 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ThreadPool"
    xmlns:common="using:SDKTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://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 http://download.cnet.com/XML-Marker/3000-7241_4-10369541.html
  • Well, I suppose that's one way. Whenever I guild a new machine one of my first installs in the Visual Studio Extension XAML Styler (visualstudiogallery.msdn.microsoft.com/d6634d0e-38fb-48b6-829f-dadbc5c2fb62). This will not only indent but will alphabetize your attributes! It will skip elements and attributes you tell it to. It will format binding syntax (extension formatting). You can even set tolerance so it won't wrap short tags. I wish I wrote.

    To each his own,

    Jerry Nixon

    Jerry, love your blog.
    http://blog.jerrynixon.com.

    I tried the beautifier you mentioned. But it won't put each attribute on a separate line. I may be missing a setting in Tools/Options.

    But that is key to me, that it puts attributes on separate lines. Ordering attributes is cool, but when I create my attributes in the first place, they are in my preferred order any way. BRUNO
  • This is something resharper should do.. Maybe it can..? :)

    Bruno Reponse Hi Johnny, I looked but didn't see that feature. It must. Anybody know? I'm old school, I type in my own code, usually in VI.
  • A link to download the app would have been helpful -_-

    I provided that. See end of post for link from CNET
    BRUNO
  • After reading Bruno's post and Jerry's response, I didn't know which tool to use, but after downloading xml-marker, I see that a pertinent bit of into was elided: xml-marker is an evaluation version. And so, I will Czech out the other...

  • 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"

Page 1 of 1 (5 items)
Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post