Build Puzzle 15 - Walkthrough

<phone:PhoneApplicationPage 
    x:Class="Puzzle15.Help"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <controls:Pivot Title="{StaticResource AppName}">
            <!--Pivot item one-->
            <controls:PivotItem Header="Step 1">
                <Grid>
                    <TextBlock Margin="8,11,9,0" Name="textBlock1" Text="Start with getting the 1 and 2 into their proper places. 1 first, then 2. After you're done with that, you don't put 3 right next to them. You place it in the top right corner, and then the 4 right below, like this:" TextWrapping="Wrap" Height="154" VerticalAlignment="Top" />
                    <TextBlock Height="185" Margin="9,0,8,51" Name="textBlock2" Text="After placing the hole between the 2 and 3, you can then drag both 3 and 4 along into their proper positions. That takes care of the first row. The second one works exactly the same. 5 and 6 first, followed by 7 out on the right edge with the 8 just below it, and then you are halfway." TextWrapping="Wrap" VerticalAlignment="Bottom" />
                    <Image Height="203" HorizontalAlignment="Left" Margin="132,145,0,0" Name="image1" Stretch="UniformToFill" VerticalAlignment="Top" Width="200" Source="/Puzzle15;component/Images/Help/1.png" />
                </Grid>
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="Step 2">
                <Grid>
                    <TextBlock Margin="8,11,9,0" Text="The final two rows are easiest to solve if you work them through sideways, just like you did with the 3 and 4 and the 7 and 8 earlier. Place the 13 and 9 like this:" TextWrapping="Wrap" Height="154" VerticalAlignment="Top" />
                    <TextBlock Height="450" Margin="13,0,218,17" Text="Use the hole to drag them both along into their proper column. Then you do the same with the 14 and the 10. After that, you only have the bottom right 2x2 square left. You solve it by simply rotating the pieces, which is done by moving the hole around inside that square one or more full rotations. It doesn't matter which way." TextWrapping="Wrap" VerticalAlignment="Bottom" Width="225" />
                    <Image Height="203" HorizontalAlignment="Left" Margin="245,104,0,0" Stretch="UniformToFill" VerticalAlignment="Top" Width="200" Source="/Puzzle15;component/Images/Help/2.png" />
                    <Image Height="203" HorizontalAlignment="Left" Margin="246,391,0,0" Source="/Puzzle15;component/Images/Help/3.png" Stretch="UniformToFill" VerticalAlignment="Top" Width="200" />
                </Grid>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
    
</phone:PhoneApplicationPage>