<Page
    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="http://schemas.componentone.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ControlExplorer"
    xmlns:common="clr-namespace:ControlExplorer.Common"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="ControlExplorer.HomePage"
    mc:Ignorable="d"
    d:DesignWidth="990" d:DesignHeight="650"
    Title="ComponentOne Control Explorer">
    <Page.Resources>
        <CollectionViewSource 
            x:Key="itemsViewSource"
            Source="{Binding Groups}">
        </CollectionViewSource>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="HeaderToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <StackPanel Orientation="Horizontal" Margin="5 0 0 0">
                                <Rectangle x:Name="LineExpandedIcon" Fill="{TemplateBinding Foreground}" Visibility="Collapsed" Width="10" Height="2" />
                                <Path x:Name="LineCollapsedIcon" Fill="{TemplateBinding Foreground}" 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" Stretch="Fill" />
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" Margin="10 0 0 0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="LineCollapsedIcon" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="LineExpandedIcon" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter TargetName="LineCollapsedIcon" Property="Visibility" Value="Visible" />
                                <Setter TargetName="LineExpandedIcon" Property="Visibility" Value="Collapsed" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Margin="10 0">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
                <local:HyperlinkButton Foreground="Gray" FontSize="15" Content="Expand All" Command="{Binding ExpandedCollpasedCommand}" CommandParameter="true" />
                <Rectangle Width="2" Fill="LightGray" Margin="10 4"/>
                <local:HyperlinkButton Foreground="Gray" FontSize="15" Content="Collapse All" Command="{Binding ExpandedCollpasedCommand}" CommandParameter="false" />
            </StackPanel>
            <ScrollViewer x:Name="welcomeSection" Grid.Row="1" VerticalAlignment="Top" Padding="0,0,10,0" Style="{StaticResource GralScrollViewer}" HorizontalAlignment="Left">
                <StackPanel Orientation="Vertical">
                    <TextBlock Style="{StaticResource SimpleText}" MaxWidth="270">
                    <Run Text="Leveraging the full potential of WPF, ComponentOne Studio® WPF Edition offers everything from high-performing datagrids, charts and scheduler controls to slick layout and navigation controls."/>
                    <LineBreak/>
                    <LineBreak/>
                    <Run Text="Choose from"/>
                    <Bold><Run Text=" 50+ WPF controls"/></Bold>
                    <Run Text=" packed with developer-requested features like easy styling, printing, export to Microsoft Excel, complete XAML support, and more. "/>
                    </TextBlock>
                    <StackPanel Orientation="Vertical" Margin="0 20">
                        <TextBlock Text="New Controls" FontWeight="Bold" Margin="0 8"/>
                        <ItemsControl ItemsSource="{Binding NewControls}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type local:ControlDescription}">
                                    <local:TileControl Title="{Binding Name}" IconTemplate="{Binding Icon}" Cursor="Hand" Click="TileControl_Click"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <c1:C1WrapPanel Orientation="Horizontal" ItemWidth="70" ItemHeight="70" Margin="0 0 0 -10" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Top Controls" FontWeight="Bold" Margin="0 8"/>
                        <ItemsControl ItemsSource="{Binding TopControls}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type local:ControlDescription}">
                                    <local:TileControl Title="{Binding Name}" IconTemplate="{Binding Icon}" Cursor="Hand" Click="TileControl_Click"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <c1:C1WrapPanel Orientation="Horizontal" ItemWidth="70" ItemHeight="70" Margin="0 0 0 -10" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
                </StackPanel>
                <c1:ScrollViewerTouchBehavior.TouchBehavior>
                    <c1:ScrollViewerTouchBehavior/>
                </c1:ScrollViewerTouchBehavior.TouchBehavior>
            </ScrollViewer>
            <ScrollViewer
                Margin="30 25 0 0"
                Grid.Column="1" FontFamily="Segoe WP SemiLight" 
                FontSize="12"
                Padding="0"
                RenderTransformOrigin="0.5,0.5" 
                VerticalAlignment="Top" 
                Style="{StaticResource GralScrollViewer}"
                Grid.Row="1">
                <ItemsControl
                    Padding="0"
                    HorizontalContentAlignment="Stretch"
                    x:Name="itemGridView"
                    AutomationProperties.AutomationId="ItemsGridView"
                    AutomationProperties.Name="Items"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:GroupDescription}">
                            <StackPanel Orientation="Vertical">
                                <ToggleButton Content="{Binding Name}" Background="#3dba93" Cursor="Hand" FontSize="16" BorderThickness="0" Margin="0 10" Height="30" Foreground="White" IsChecked="{Binding IsExpanded, Mode=TwoWay}" Style="{StaticResource HeaderToggleButtonStyle}" HorizontalContentAlignment="Left"/>
                                <c1:C1SlideContentControl x:Name="SlidePanel">
                                    <ItemsControl ItemsSource="{Binding Controls}" x:Name="ControlItems">
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate DataType="{x:Type local:ControlDescription}">
                                                <local:TileControl Title="{Binding Name}" IconTemplate="{Binding Icon}" Cursor="Hand" Click="TileControl_Click"/>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <c1:C1WrapPanel Orientation="Horizontal" ItemWidth="90" ItemHeight="90" Margin="0 0 0 -10" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                </c1:C1SlideContentControl>
                            </StackPanel>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding Path=IsExpanded}" Value="true">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="ExpandStory">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.5" From="0.0" To="1.0" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                    <DoubleAnimation.EasingFunction>
                                                        <QuadraticEase EasingMode="EaseOut"/>
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="ExpandStory"/>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Path=IsExpanded}" Value="false">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="CollapseStory">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.5" To="0.0" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                    <DoubleAnimation.EasingFunction>
                                                        <QuadraticEase EasingMode="EaseOut" />
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="CollapseStory"/>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>
