<Page
    x:Class="C1Magazine.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C1Magazine"
    xmlns:c1="using:C1.Xaml"
    xmlns:ext="using:C1.Xaml.Extended"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Image">
            <Setter Property="Stretch" Value="UniformToFill" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="-1" />
        </Style>
        <Style TargetType="HyperlinkButton">
            <Setter Property="FontWeight" Value="Light" />
            <Setter Property="Margin" Value="0 -5" />
        </Style>
        <Style x:Key="TableOfContentsDotStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Indigo" />
            <Setter Property="StrokeThickness" Value="1" />
            <Setter Property="StrokeDashArray" Value="1,3" />
            <Setter Property="StrokeDashCap" Value="Round" />
            <Setter Property="X1" Value="0" />
            <Setter Property="X2" Value="400" />
            <Setter Property="Y1" Value="18" />
            <Setter Property="Y2" Value="18" />
        </Style>
        <Style TargetType="c1:C1ListBoxItem">
            <Setter Property="Width" Value="600" />
            <Setter Property="Height" Value="768" />
        </Style>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
         <Grid x:Name="bookGrid">
            <TextBlock Text="This app hosts an assortment of ComponentOne print ads from the past several years. You may have even seen some of them in publications such as MSDN or SD Times." TextWrapping="Wrap" Style="{StaticResource BodyTextStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="150" Width="400"/>

            <ext:C1Book x:Name="c1Book1" IsFirstPageOnTheRight="True" BorderThickness="0" MaxWidth="1200" MaxHeight="768" CurrentPageChanged="c1Book1_CurrentPageChanged">
                <ext:C1Book.LeftPageTemplate>
                    <ControlTemplate>
                        <Grid>
                            <ContentPresenter Content="{Binding}" />
                            <Border Background="#99000000" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10" Width="30" Height="30" CornerRadius="15">
                                <TextBlock Text="{Binding Tag}" Style="{StaticResource TitleTextStyle}" HorizontalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </ext:C1Book.LeftPageTemplate>
                <ext:C1Book.RightPageTemplate>
                    <ControlTemplate>
                        <Grid>
                            <ContentPresenter Content="{Binding}" />
                            <Border Background="#99000000" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Width="30" Height="30" CornerRadius="15">
                                <TextBlock Text="{Binding Tag}" Style="{StaticResource TitleTextStyle}" HorizontalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </ext:C1Book.RightPageTemplate>
                <Image Source="Images/newc1_1112.jpg" />
                <Image Source="Images/wijmo_0113.jpg" Tag="1"/>
                
                <Border Tag="2">
                    <Grid x:Name="tocGrid" MaxWidth="600">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <Border Background="Indigo"  Grid.Row="1" Margin="20 0 0 0">
                            <TextBlock Text="Table of Contents" Style="{StaticResource HeaderTextStyle}" Margin="0 10"/>
                        </Border>
                        <StackPanel Grid.Row="4">
                            <HyperlinkButton Tag="3" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="ActiveReports7 (2013)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="3" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="3" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Spread (2013)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="4" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="5" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Multi-channel Publishing (2013)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="5" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="5" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="ComponentOne Ultimate (2012)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="6" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="7" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Wijmo - UI for the Web (2012)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="7" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="7" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Windows, Web and XAML (2012)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="8" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="9" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Build Everything Everywhere (2011)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="9" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="9" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Play with the Ultimate Deck (2011)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="10" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="11" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="The Greatest FlexGrid on Earth (2011)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="11" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="11" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Meet the New Web Stack (2011)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="12" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="13" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Your Guide to .NET Charts (2011)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="13" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="13" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Your Guide to .NET Reports (2010)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="14" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="15" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="DevTopia (2010)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="15" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="17" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Play with a Full Deck (2010)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="17" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="19" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="ASP.NET AJAX. Ignited (2010)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="19" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="19" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="All-in-one Authoring and Publishing (2010)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="20" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="21" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Prepare for the World of Tomorrow (2009)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="21" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="23" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="RIA-mazing (2009)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="23" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="23" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Accomplish the Amazing (2008)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="24" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                            <HyperlinkButton Tag="25" Click="HyperlinkButton_Click">
                                <Grid Margin="10 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="Visual Development. Accelerated (2006)" />
                                    <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                    <TextBlock Text="25" Grid.Column="2"/>
                                </Grid>
                            </HyperlinkButton>
                        </StackPanel>
                    </Grid>
                </Border>
                <Image Source="Images/ar_0613.jpg" Tag="3"/>
                <Image Source="Images/sp_0213.jpg" Tag="4"/>
                <Image Source="Images/d2h_science_0912.jpg" Tag="5"/>
                <Image Source="Images/ult_bold_0912.jpg" Tag="6"/>
                <Image Source="Images/wijmo_0512.jpg" Tag="7"/>
                <Image Source="Images/ult_0412.jpg" Tag="8"/>
                <Image Source="Images/ult_starwars_1011.jpg" Tag="9"/>
                <Image Source="Images/se_0811.jpg" Tag="10"/>
                <Image Source="Images/flexgrid_circus_0711.jpg" Tag="11"/>
                <Image Source="Images/wijmo_0711.jpg" Tag="12"/>
                <Image Source="Images/charts_0411.jpg" Tag="13"/>
                <Image Source="Images/se_blueprint_1010.jpg" Tag="14"/>
                <ext:C1BookHalfSpan Dock="Left" Tag="15">
                    <Image Source="Images/se_devtopia_0810.jpg"/>
                </ext:C1BookHalfSpan>
                <ext:C1BookHalfSpan Dock="Right" Tag="16">
                    <Image Source="Images/se_devtopia_0810.jpg"/>
                </ext:C1BookHalfSpan>
            
                <ext:C1BookHalfSpan Dock="Left" Tag="17">
                    <Image Source="Images/sl_cardad_0910.jpg"/>
                </ext:C1BookHalfSpan>
                <ext:C1BookHalfSpan Dock="Right" Tag="18">
                    <Image Source="Images/sl_cardad_0910.jpg"/>
                </ext:C1BookHalfSpan>

                <Image Source="Images/aspnet_0410.jpg" Tag="19"/>
                <Image Source="Images/d2h_summer_0510.jpg" Tag="20"/>

                <ext:C1BookHalfSpan Dock="Left" Tag="21">
                    <Image Source="Images/se_future_1209.jpg"/>
                </ext:C1BookHalfSpan>
                <ext:C1BookHalfSpan Dock="Right" Tag="22">
                    <Image Source="Images/se_future_1209.jpg"/>
                </ext:C1BookHalfSpan>

                <Image Source="Images/se_0409.jpg" Tag="23"/>
                <Image Source="Images/se_0808.jpg" Tag="24"/>
                <Image Source="Images/se_0306.jpg" Tag="25"/>
            </ext:C1Book>
            <Button x:Name="btnPreviousPage" Content="&#xE112;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btnPreviousPage_Click" IsEnabled="False" BorderBrush="#4CFFFFFF" Background="#19FFFFFF"/>
            <Button x:Name="btnNextPage" Content="&#xE111;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btnNextPage_Click" Background="#19FFFFFF" BorderBrush="#4CFFFFFF"/>
        </Grid>
        <Grid x:Name="listGrid" Visibility="Collapsed">
            <TextBlock Text="This app hosts an assortment of ComponentOne print ads from the past several years. You may have even seen some of them in publications such as MSDN or SD Times." TextWrapping="Wrap" Style="{StaticResource BodyTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10"/>

            <c1:C1ListBox x:Name="c1ListBox1" Orientation="Horizontal" SelectionMode="None">
                <c1:C1ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <ContentPresenter Content="{Binding}" />
                            <Border Background="#99000000" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Width="30" Height="30" CornerRadius="15">
                                <TextBlock Text="{Binding Tag}" Style="{StaticResource TitleTextStyle}" HorizontalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </c1:C1ListBox.ItemTemplate>
                <c1:C1ListBoxItem>
                    <Image Source="Images/newc1_1112.jpg" />
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/wijmo_0113.jpg" Tag="1"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Border Background="White" Tag="2">
                        <Grid MaxWidth="600">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <Border Background="Indigo"  Grid.Row="1" Margin="20 0 0 0">
                                <TextBlock Text="Table of Contents" Style="{StaticResource HeaderTextStyle}" Margin="0 10"/>
                            </Border>
                            <StackPanel Grid.Row="4">
                                <HyperlinkButton Tag="3" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="ActiveReports7 (2013)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="3" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="4" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Spread (2013)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="4" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="5" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Multi-channel Publishing (2013)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="5" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="6" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="ComponentOne Ultimate (2012)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="6" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="7" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Wijmo - UI for the Web (2012)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="7" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="8" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Windows, Web and XAML (2012)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="8" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="9" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Build Everything Everywhere (2011)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="9" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="10" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Play with the Ultimate Deck (2011)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="10" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="11" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="The Greatest FlexGrid on Earth (2011)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="11" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="12" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Meet the New Web Stack (2011)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="12" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="13" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Your Guide to .NET Charts (2011)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="13" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="14" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Your Guide to .NET Reports (2010)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="14" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="15" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="DevTopia (2010)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="15" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="16" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Play with a Full Deck (2010)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="16" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="17" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="ASP.NET AJAX. Ignited (2010)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="17" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="18" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="All-in-one Authoring and Publishing (2010)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="18" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="19" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Prepare for the World of Tomorrow (2009)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="19" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="20" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="RIA-mazing (2009)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="20" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="21" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Accomplish the Amazing (2008)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="21" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                                <HyperlinkButton Tag="22" Click="HyperlinkButton_Click">
                                    <Grid Margin="10 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Visual Development. Accelerated (2006)" />
                                        <Line Grid.Column="1" Stroke="Indigo" X1="0" X2="500" Y1="18" Y2="18" StrokeDashArray="1,3" StrokeThickness="1" StrokeDashCap="Round"/>
                                        <TextBlock Text="22" Grid.Column="2"/>
                                    </Grid>
                                </HyperlinkButton>
                            </StackPanel>
                        </Grid>
                    </Border>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/ar_0613.jpg" Tag="3"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/sp_0213.jpg" Tag="4"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/d2h_science_0912.jpg" Tag="5"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/ult_bold_0912.jpg" Tag="6"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/wijmo_0512.jpg" Tag="7"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/ult_0412.jpg" Tag="8"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/ult_starwars_1011.jpg" Tag="9"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/se_0811.jpg" Tag="10"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/flexgrid_circus_0711.jpg" Tag="11"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/wijmo_0711.jpg" Tag="12"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/charts_0411.jpg" Tag="13"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/se_blueprint_1010.jpg" Tag="14"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem Width="1200">
                    <Image Source="Images/se_devtopia_0810.jpg" Tag="15"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem Width="1200">
                    <Image Source="Images/sl_cardad_0910.jpg" Tag="16"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/aspnet_0410.jpg" Tag="17"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/d2h_summer_0510.jpg" Tag="18"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem Width="1200">
                    <Image Source="Images/se_future_1209.jpg" Tag="19"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/se_0409.jpg" Tag="20"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/se_0808.jpg" Tag="21"/>
                </c1:C1ListBoxItem>
                <c1:C1ListBoxItem>
                    <Image Source="Images/se_0306.jpg" Tag="22"/>
                </c1:C1ListBoxItem>
               
            </c1:C1ListBox>

        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="bookGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="listGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    

    <Page.TopAppBar>
        <AppBar>
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                <Button x:Name="btnTOC" Style="{StaticResource BookmarksAppBarButtonStyle}" Click="btnTOC_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
</Page>
