﻿<local:SpotlightTileBase
    x:Class="WinStore.UX.Controls.Tiles.SpotlightItemSmall"
    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"
    d:DesignWidth="400"
    d:DesignHeight="144">
    <UserControl.Resources>
        <local:SpotlightBackgroundConverter x:Key="BackgroundConverter"/>
        <local:EmptyStringVisibilityConverter x:Key="StringVisibiltyConverter" />
    </UserControl.Resources>
    <Border x:ConnectionId='1' x:Name="_root" VerticalAlignment="Top" Height="{StaticResource SpotlightItemHeight}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:ConnectionId='2' x:Name="Medium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='3' x:Name="MediumNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumNarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_root">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SpotlightGridMediumNarrowHeight}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="24,24,12,24" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="162" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="162" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="_title">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubheaderTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='4' x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_root">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SpotlightGridNarrowHeight}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="150" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="_icon">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="150" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="_title">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubtitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:ConnectionId='5' x:Name="_tileGrid" Background="{ThemeResource SpotlightTileBackgroundBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid x:ConnectionId='6' x:Name="_icon" Width="140" Height="140" Background="{Binding Path=Self, Converter={StaticResource BackgroundConverter}}">
                <Image x:ConnectionId='9' x:Name="_image" AutomationProperties.AccessibilityView="Raw" />
                <Border BorderThickness="1" BorderBrush="{StaticResource TileImageOverlayBorderBrush}" />
            </Grid>
            
            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="12,0,0,0">
                <TextBlock x:ConnectionId='7'
                    x:Name="_title"
                    Style="{StaticResource SubtitleTextBlockStyle}"
                    Foreground="{ThemeResource PrimaryForegroundBrush}"
                    TextTrimming="CharacterEllipsis" />
                <TextBlock x:ConnectionId='8'
                    x:Name="_description"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Foreground="{ThemeResource PrimaryForegroundBrush}"
                    TextTrimming="CharacterEllipsis" />
            </StackPanel>
        </Grid>
    </Border>
</local:SpotlightTileBase>

