﻿<local:SpotlightTileBase
    x:Class="WinStore.UX.Controls.Tiles.SpotlightItemLarge"
    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:local="using:WinStore.UX.Controls.Tiles"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <local:SpotlightBackgroundConverter x:Key="BackgroundConverter"/>
        <local:EmptyStringVisibilityConverter x:Key="StringVisibiltyConverter" />
    </UserControl.Resources>

    <Grid x:ConnectionId='1' x:Name="_tileGrid" Height="{StaticResource SpotlightGridNormalHeight}" Background="{ThemeResource SpotlightTileBackgroundBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:ConnectionId='2' x:Name="ReflowStates">
                <VisualState x:ConnectionId='7' x:Name="Medium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource SpotlightMediumMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='8' x:Name="MediumNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumNarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_tileGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SpotlightGridMediumNarrowHeight}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='9' x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_tileGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SpotlightGridNarrowHeight}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <!-- This state group defines the states that the text in this tile can be in. When the tile spans more than one column,
                 the title is larger and the margins on left and bottom are larger (this is the default). This state will be set from
                 the code behind of SpotlightHeroPanel in the SetLargeTileColumnSpan method. -->
            <VisualStateGroup x:ConnectionId='3' x:Name="TextStates">
                <VisualState x:ConnectionId='4' x:Name="MultiColumn" />
                <!-- This should be the active state when the tile's height is 240 -->
                <VisualState x:ConnectionId='5' x:Name="SingleColumnMediumNarrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="_textStackPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="22,0,0,18" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="_titleTextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <!-- This should be the active state when the tile's height is 160 -->
                <VisualState x:ConnectionId='6' x:Name="SingleColumnNarrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="_textStackPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,0,0,6" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="_titleTextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid Background="{Binding Path=Self, Converter={StaticResource BackgroundConverter}}">
            <Image x:ConnectionId='12'
                x:Name="_spotlightImage"
                Source="{Binding SpotlightImageUrl}"
                AutomationProperties.AccessibilityView="Raw"
                Stretch="UniformToFill" />
            <Rectangle 
                Fill="{StaticResource ImageOverlayGradientDarkBrush}"
                AutomationProperties.AccessibilityView="Raw" />
        </Grid>
        
        <StackPanel x:ConnectionId='10' x:Name="_textStackPanel" VerticalAlignment="Bottom" Margin="47,0,0,39">
            <TextBlock x:ConnectionId='11'
                x:Name="_titleTextBlock"
                Style="{StaticResource SubheaderTextBlockStyle}"
                Visibility="{Binding SpotlightTitleWithFallback, Converter={StaticResource StringVisibiltyConverter}}"
                Foreground="{ThemeResource PrimaryForegroundLightBrush}"
                Text="{Binding SpotlightTitleWithFallback}"
                TextTrimming="CharacterEllipsis" />
            <TextBlock
                Style="{StaticResource BodyTextBlockStyle}"
                Visibility="{Binding SpotlightDescription, Converter={StaticResource StringVisibiltyConverter}}"
                Foreground="{ThemeResource PrimaryForegroundLightBrush}"
                Text="{Binding SpotlightDescription}"
                TextTrimming="CharacterEllipsis" />
        </StackPanel>
    </Grid>
</local:SpotlightTileBase>

