﻿<UserControl
    x:Class="WinStore.UX.RetailDemo.RetailDemoImageControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinStore.UX.RetailDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
	
	<Control.Resources>
		<LinearGradientBrush x:Key="RetailOverlayGradientDarkBrush" Opacity="1" StartPoint="0.5,0" EndPoint="0.5,1">
			<GradientStop Offset="1" Color="{StaticResource ColorBlack}" />
			<GradientStop Offset="0" Color="#00000000" />
		</LinearGradientBrush>
		
		<Style x:Key="RetailTextBase" TargetType="TextBlock">
			<Setter Property="Foreground" Value="White" />
			<Setter Property="TextWrapping" Value="Wrap" />
 		</Style>
				
		<Style x:Key="RetailHeaderLargeScreenTextTyle" BasedOn="{StaticResource RetailTextBase}" TargetType="TextBlock">
			<Setter Property="FontSize" Value="34" />
			<Setter Property="LineHeight" Value="40" />
			<Setter Property="FontFamily" Value="Segoe UI Light" />
 		</Style>
		
		<Style x:Key="RetailCaptionLargeScreenTextTyle" BasedOn="{StaticResource RetailTextBase}" TargetType="TextBlock">
			<Setter Property="FontSize" Value="15" />
			<Setter Property="LineHeight" Value="20" />
			<Setter Property="FontFamily" Value="Segoe UI" />
 		</Style>
		
		<Style x:Key="RetailHeaderSmallScreenTextTyle" BasedOn="{StaticResource RetailTextBase}" TargetType="TextBlock">
			<Setter Property="FontSize" Value="24" />
			<Setter Property="LineHeight" Value="28" />
			<Setter Property="FontFamily" Value="Segoe UI Semi Light" />
 		</Style>
		
		<Style x:Key="RetailCaptionSmallScreenTextTyle" BasedOn="{StaticResource RetailCaptionLargeScreenTextTyle}" TargetType="TextBlock">
			<Setter Property="Opacity" Value=".6"/>
 		</Style>
		
	</Control.Resources>

    <Grid>
		 <VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:ConnectionId='1' x:Name="Widths">
				<VisualState x:ConnectionId='2' x:Name="Wide">
					<VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumMinWidth}" />
                    </VisualState.StateTriggers>
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_backgroundImage" Storyboard.TargetProperty="(Grid.RowSpan)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_backgroundImage" Storyboard.TargetProperty="(Grid.Column)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_transparentBand" Storyboard.TargetProperty="(Grid.ColumnSpan)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_transparentBand" Storyboard.TargetProperty="(Grid.Row)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_transparentBand" Storyboard.TargetProperty="(Grid.RowSpan)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gradiantRectangle" Storyboard.TargetProperty="(Grid.ColumnSpan)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gradiantRectangle" Storyboard.TargetProperty="(Grid.Column)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gradiantRectangle" Storyboard.TargetProperty="(Grid.Row)" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textPanel" Storyboard.TargetProperty="Margin" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="48,0,48,0" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gradiantRectangle" Storyboard.TargetProperty="Height" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="160" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textPanel" Storyboard.TargetProperty="HorizontalAlignment" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_firstColumn" Storyboard.TargetProperty="Width" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_bandBody" Storyboard.TargetProperty="Margin" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="0,12,0,0" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_bandHeader" Storyboard.TargetProperty="Style" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RetailHeaderLargeScreenTextTyle}" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_bandBody" Storyboard.TargetProperty="Style" >
							<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RetailCaptionLargeScreenTextTyle}" />
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition />
			<RowDefinition MaxHeight="182" />
		</Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:ConnectionId='3' x:Name="_firstColumn" Width="Auto" MinWidth="320"/>
			<!--this needs to be auto, not *.  If we leave it blank, it will always be 1/4th of the screen, preventing the text from being centered.-->
			<ColumnDefinition Width="3*"  />
		</Grid.ColumnDefinitions>
		
		
		<Image x:ConnectionId='4' x:Name="_backgroundImage" 
			   Stretch="UniformToFill"
			   Grid.ColumnSpan="2"
               HorizontalAlignment="Center"
			   VerticalAlignment="Center"/>

		<Rectangle x:ConnectionId='5' x:Name="_gradiantRectangle"
				Fill="{StaticResource RetailOverlayGradientDarkBrush}"
				Grid.ColumnSpan="2"
				VerticalAlignment="Bottom"
				Height="80"/>
		
        <Border x:ConnectionId='6' Name="_transparentBand" 
				Grid.ColumnSpan="2"
				Grid.Row="1"
				Background="#0274CE">
			
            <StackPanel x:ConnectionId='7' x:Name ="_textPanel" 
						VerticalAlignment="Center"
						HorizontalAlignment="Center"
						MaxWidth="544"
						Margin="24,0,24,0">
				
                <TextBlock x:ConnectionId='8' Name="_bandHeader" 
						   Style="{StaticResource RetailHeaderSmallScreenTextTyle}"/>
				
                <TextBlock x:ConnectionId='9' Name="_bandBody"  
						   Margin="0,6,0,0"
						   Style="{StaticResource RetailCaptionSmallScreenTextTyle}"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

