﻿<local:SpotlightTileBase
    x:Class="WinStore.UX.Controls.Tiles.SpotlightItemSmallLowTouch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinStore.UX.Controls"
    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"
    d:DesignHeight="144"
    d:DesignWidth="324">

    <Grid x:ConnectionId='1' x:Name="_tileGrid" Height="{StaticResource SpotlightItemHeight}" Background="{ThemeResource SpotlightTileBackgroundBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:ConnectionId='5' x:Name="Medium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource SpotlightMediumMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='6' 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>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="36,39,24,39" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='7' 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>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="140" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="140" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,10,12,10" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:ConnectionId='2' x:Name="DefaultForeground" />
                <VisualState x:ConnectionId='3' x:Name="LightForeground">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_title">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource WhiteBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_rating">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource WhiteBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_pricing">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource WhiteBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="PromoForeground" Storyboard.TargetName="_pricing">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource WhiteBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='4' x:Name="DarkForeground">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_title">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource BlackBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_rating">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource BlackBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="_pricing">
                            <DiscreteObjectKeyFrame KeyTime="0" Value ="{StaticResource BlackBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid x:ConnectionId='8' x:Name="_icon" Width="162" Height="162" Margin="24,24,12,24">
            <Image x:ConnectionId='12' x:Name="_image" AutomationProperties.AccessibilityView="Raw" />
            <Border BorderThickness="1" BorderBrush="{StaticResource TileImageOverlayBorderBrush}" />
        </Grid>

        <StackPanel Grid.Column="1" VerticalAlignment="Center">
			<TextBlock x:ConnectionId='9'
            x:Name="_title"
            Style="{StaticResource SubtitleTextBlockStyle}"
            Foreground="{ThemeResource PrimaryForegroundBrush}"
            TextTrimming="CharacterEllipsis"
			MaxLines="2"
			TextWrapping="WrapWholeWords"/>
			<controls:StarRating x:ConnectionId='10' x:Name="_rating" />
            <controls:PromoPrice x:ConnectionId='11' x:Name="_pricing"/>
        </StackPanel>
        
        <Border Grid.ColumnSpan="2" BorderThickness="0,0,1,1" BorderBrush="{StaticResource TileImageOverlayBorderBrush}" />
    </Grid>
</local:SpotlightTileBase>

