<Page x:Class="ControlExplorer.ControlsPage" 
           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:local="clr-namespace:ControlExplorer"
           mc:Ignorable="d"
           xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
           d:DataContext="{d:DesignData Source=/DesignData/MainData.xaml}"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Control List">
    <Page.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="scrollViewer">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="360"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="360"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="scrollViewer">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>
    <Grid>
        <local:PageFrame>
            <Grid HorizontalAlignment="Left" >
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard >
                            <Storyboard x:Name="LoadStoryboard">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="scrollViewer">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="360"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="360"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="scrollViewer">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Grid.RowDefinitions>
                    <RowDefinition Height="110"/>
                    <RowDefinition />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="45" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="45" />
                </Grid.ColumnDefinitions>

                <!--Title-->
                <TextBlock x:Name="textBlock" Text="Control List" Style="{StaticResource SamplePageTitle}" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3"/>
                <ScrollViewer x:Name="scrollViewer" FontFamily="Segoe WP SemiLight" FontSize="12" Padding="0" Grid.Row="1" Grid.Column="1" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" Style="{StaticResource GralScrollViewer}">
                    <!--Control List-->
                    <ItemsControl ItemsSource="{Binding Controls}" Background="Transparent">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <c1:C1WrapPanel ItemWidth="90" ItemHeight="90" Margin="0 0 0 -10"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <local:TileControl Title="{Binding Name}" IconTemplate="{Binding Icon}" Cursor="Hand" Click="TileControl_Click"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <c1:ScrollViewerTouchBehavior.TouchBehavior>
                        <c1:ScrollViewerTouchBehavior/>
                    </c1:ScrollViewerTouchBehavior.TouchBehavior>
                </ScrollViewer>
            </Grid>
        </local:PageFrame>
    </Grid>
</Page>
