<Page x:Class="ControlExplorer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml"
    xmlns:local="using:ControlExplorer"
    mc:Ignorable="d">
    <d:DataContext>
        <local:ViewModel/>
    </d:DataContext>
    <Page.Resources>
        <Storyboard x:Name="SelectionTransition">
            <DoubleAnimation BeginTime="0:0:0.2" Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pivot" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="LoadTransition">
            <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pivot" d:IsOptimized="True"/>
        </Storyboard>
    </Page.Resources>
    <Grid>
        <local:PageBackgroundControl  />
        <Border Height="56" Background="{StaticResource CE-HeaderBackground}"  VerticalAlignment="Top">
            <Grid x:Name="Header">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Width="40" Height="40" Source="/Resources/Imaging/ico-WP-40px.png" Stretch="Uniform" Margin="16 8 10 8"/>
                <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                    <TextBlock Text="Studio" Margin="0 0 5 0" FontWeight="SemiLight"  Style="{StaticResource CE-HeaderTextBlock}"/>
                    <TextBlock Text="WinRT Edition" FontWeight="Bold"  Style="{StaticResource CE-HeaderTextBlock}"/>
                </StackPanel>
            </Grid>
        </Border>
        <Pivot x:Name="pivot" Margin="0 50 0 0" ItemsSource="{Binding Categories}">
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Category}"/>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <Pivot.ItemTemplate>
                <DataTemplate>
                    <GridView ItemsSource="{Binding Controls}" SelectionChanged="OnItemSelected" Margin="-19 0">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource CE-TileItemBackgroundBrush}" Width="120" Height="120" Margin="0 0 1 1">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <ContentControl ContentTemplate="{Binding IconTemplate}" Width="85" Height="65" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
                                        <TextBlock TextWrapping="Wrap" Foreground="White" Margin="-20 0 -20 5" Text="{Binding ControlName}" HorizontalAlignment="Center" FontWeight="SemiLight" FontSize="20" Grid.Row="1"/>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <c1:C1WrapPanel HorizontalAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </DataTemplate>
            </Pivot.ItemTemplate>
        </Pivot>


    </Grid>

    <Page.BottomAppBar>
        <CommandBar x:Name="myApplicationBar" Background="{ThemeResource AppBarBackgroundThemeBrush}" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}">
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="Help" Label="Info" Click="OnAboutClick"/>
                <!--<AppBarButton Icon="Setting" Label="Settings" Click="OnSettingsClick"/>-->
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
