<Page
    x:Class="ControlExplorer.ControlsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlExplorer"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="using:ControlExplorer.Common"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource
                x:Name="itemsViewSource"
                IsSourceGrouped="True"
                ItemsPath="Controls"
                Source="{Binding Groups}"
                />
        <CollectionViewSource
                x:Name="newControls"
                Source="{Binding NewControls}"/>
        <CollectionViewSource
                x:Name="topControls"
                Source="{Binding TopControls}"
                />
        <Style TargetType="local:C1ToggleButton" x:Key="HeaderToggleButtonStyle">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:C1ToggleButton">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates" >
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver" />
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Disabled" >
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates" >
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineCollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineCollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates" >
                                    <VisualState x:Name="Unfocused">
                                    </VisualState>
                                    <VisualState x:Name="Focused">
                                    </VisualState>
                                    <VisualState x:Name="PointerFocused">
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="LineExpandedIcon" Visibility="Visible" Fill="{TemplateBinding Foreground}" Width="10" Height="2"/>
                                <Path x:Name="LineCollapsedIcon" Data="M4,0 L6,0 L6,4 L10,4 L10,6 L6,6 L6,10 L4,10 L4,6 L0,6 L0,4 L4,4 z" Width="10" Height="10" Fill="{TemplateBinding Foreground}" Stretch="Fill" />
                                <!-- CheckBox content -->
                                <ContentPresenter x:Name="Content" Grid.Column="1" 
                                                      Margin="5 0 0 0"
                                                      Content="{TemplateBinding Content}" 
                                                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                      IsHitTestVisible="true"  />
                                <!-- Disabled -->
                                <Path x:Name="DisabledVisualElement" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"
                                          Width="12" Height="12" Stretch="UniformToFill"  Opacity="0"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="10 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="340" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
                <HyperlinkButton Foreground="Gray" Content="{Binding Source={StaticResource ControlExplorerLocalization}, Path=ExpandAll_Text}" Click="ExpandedButtonClick"/>
                <Rectangle Width="2" Fill="LightGray" Margin="10 6"/>
                <HyperlinkButton Foreground="Gray" Content="{Binding Source={StaticResource ControlExplorerLocalization}, Path=CollapseAll_Text}" Click="CollapsedButtonClick" />
            </StackPanel>
            <Grid Grid.Row="1">
                <Grid.Resources>
                    <DataTemplate x:Key="GridViewHeaderTemplate">
                        <TextBlock Text="{Binding}" Margin="0 0 0 10" />
                    </DataTemplate>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB1_Text}" Foreground="Gray" FontSize="20" FontFamily="Segoe WP" FontWeight="Light" />
                <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB2_Text}" Grid.Row="1" FontFamily="Segoe WP" FontWeight="SemiBold" FontSize="20" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap"/>
                <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB3_Text}" Margin="0 30" Grid.Row="2" FontFamily="Segoe WP" FontWeight="Light" FontSize="14" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap"/>
                <GridView Grid.Row="3" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" SelectionMode="None" Header="{Binding Source={StaticResource ControlExplorerLocalization}, Path=NewControls_Header}" HeaderTemplate="{StaticResource GridViewHeaderTemplate}" ItemsSource="{Binding Source={StaticResource newControls}}" ItemTemplate="{StaticResource Standard50x50ItemTemplate}" Margin="0 20"/>
                <GridView Grid.Row="4" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" SelectionMode="None" Header="{Binding Source={StaticResource ControlExplorerLocalization}, Path=TopControls_Header}" HeaderTemplate="{StaticResource GridViewHeaderTemplate}" ItemsSource="{Binding Source={StaticResource topControls}}" ItemTemplate="{StaticResource Standard50x50ItemTemplate}"/>
            </Grid>
            <local:C1GridView
                Padding="0"
                HorizontalContentAlignment="Stretch"
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemsGridView"
                AutomationProperties.Name="Items"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                SelectionMode="None"
                Margin="30 25 0 0"
                Grid.Column="1"
                Grid.Row="1"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick"
                Style="{StaticResource wideLayoutGridView}">
                <local:C1GridView.Resources>
                    <Style TargetType="ContentControl">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </local:C1GridView.Resources>
                <local:C1GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </local:C1GridView.ItemsPanel>
                <local:C1GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Background="#727aba" Margin="0 5 20 5" VerticalAlignment="Stretch">
                                    <local:C1ToggleButton IsChecked="{Binding IsExpanded, Mode=TwoWay}" VerticalAlignment="Center" Foreground="White" Content="{Binding Name}" FontSize="15" Style="{StaticResource HeaderToggleButtonStyle}" Click="ToggleButton_Click" />
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Horizontal" Margin="8 0 0 0" MaximumRowsOrColumns="5" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </local:C1GridView.GroupStyle>
            </local:C1GridView>
        </Grid>
    </Grid>
</Page>
