<!--
	Copyright (c) Microsoft. All rights reserved.
-->

<UserControl x:Class="MOX.LoadingUI"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:o="http://schemas.microsoft.com/office/xaml/2013"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Stretch"
  VerticalAlignment="Stretch">
  <UserControl.Resources>
    <Storyboard x:Name="hideAnimationStoryboard">
      <!-- Empty animation placeholder until SplashScreen exact Redlines are finalized.
      Tracked by OfficeMain:1836060 -->
    </Storyboard>
    <Storyboard x:Name="customContentStoryboard">
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="customContentControl"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:2.15" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="0:0:2.517" Value="-58" KeySpline=".1,.9,.2,1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="appNameStoryboard">
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="appNameTextBlock"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="-95"/>
        <LinearDoubleKeyFrame KeyTime="0:0:2.15" Value="-95"/>
        <SplineDoubleKeyFrame KeyTime="0:0:2.883" Value="0" KeySpline=".1,.9,.2,1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="appNameTextBlock"
        Storyboard.TargetProperty="Opacity">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:2.15" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:2.883" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="informationTextStoryboard">
      <!-- Swap InformationText moves down and disappears -->
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="informationSwapTextBlock"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <!-- {OfficeCurve EaseIn} = .83,0,1,1 -->
        <SplineDoubleKeyFrame KeyTime="0:0:0.167" Value="15" KeySpline=".83,0,1,1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="informationSwapTextBlock"
        Storyboard.TargetProperty="Opacity">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.167" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <!-- InformationText moves in from above and appears -->
      <!-- InformationText and Swap InformationText overlap on timeline -->
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="informationTextBlock"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="-20"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.1" Value="-20"/>
        <!-- {OfficeCurve ShotgunToPillowLanding} =  .1,.9,.2,1 -->
        <!-- .1 + {OfficeDuration Basic} = .467 -->
        <SplineDoubleKeyFrame KeyTime="0:0:0.467" Value="0" KeySpline=".1,.9,.2,1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="informationTextBlock"
        Storyboard.TargetProperty="Opacity">
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.467" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="informationTextInitialDelayStoryboard">
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="informationTextBlock"
        Storyboard.TargetProperty="Opacity">
        <!--InformationText can only appear through informationTextStoryboard animation-->
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:3.05" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="progressRingStoryboard">
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="progressRing"
        Storyboard.TargetProperty="Opacity">
        <!--progressRing instantly appears-->
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:3.23" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:3.23" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <!-- Define styles locally to keep LoadingUI light -->
    <Style
      x:Name="ExtraLargeSemiLightTypeRampEntryStyle"
      TargetType="TextBlock">
      <Setter Property="FontFamily" Value="Segoe UI"/>
      <Setter Property="FontSize" Value="21.333"/>
      <Setter Property="FontWeight" Value="SemiLight"/>
      <Setter Property="LineHeight" Value="30"/>
    </Style>
    <Style
      x:Name="MediumSemiLightTypeRampEntryStyle"
      TargetType="TextBlock">
      <Setter Property="FontFamily" Value="Segoe UI"/>
      <Setter Property="FontSize" Value="14.667"/>
      <Setter Property="FontWeight" Value="SemiLight"/>
      <Setter Property="LineHeight" Value="20"/>
    </Style>
  </UserControl.Resources>
  <Grid
    x:Name="rootGrid">
    <StackPanel
      x:Name="stackPanel"
      HorizontalAlignment="Left"
      VerticalAlignment="Top">
      <Grid>
        <ContentControl
          x:Name="customContentControl">
          <ContentControl.RenderTransform>
            <TranslateTransform>
            </TranslateTransform>
          </ContentControl.RenderTransform>
        </ContentControl>
        <TextBlock
          x:Name="appNameTextBlock"
          HorizontalAlignment="Center"
          VerticalAlignment="Bottom"
          TextAlignment="Center"
          Style="{StaticResource ExtraLargeSemiLightTypeRampEntryStyle}"
          AutomationProperties.AutomationId="AppNameTextBlock">
          <TextBlock.RenderTransform>
            <TranslateTransform>
            </TranslateTransform>
          </TextBlock.RenderTransform>
        </TextBlock>
      </Grid>
      <Grid>
        <TextBlock
          x:Name="informationTextBlock"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          TextAlignment="Center"
          TextWrapping="WrapWholeWords"
          MaxLines="3"
          TextTrimming="CharacterEllipsis"
          Margin="0,15,0,0"
          MaxWidth="300"
          MinHeight="70"
          Style="{StaticResource MediumSemiLightTypeRampEntryStyle}"
          AutomationProperties.AutomationId="InformationTextBlock">
          <TextBlock.RenderTransform>
            <TranslateTransform>
            </TranslateTransform>
          </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock
          x:Name="informationSwapTextBlock"
          Opacity="0"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          TextAlignment="Center"
          TextWrapping="WrapWholeWords"
          MaxLines="3"
          TextTrimming="CharacterEllipsis"
          Margin="0,15,0,0"
          MaxWidth="300"
          MinHeight="70"
          Style="{StaticResource MediumSemiLightTypeRampEntryStyle}"
          AutomationProperties.AutomationId="InformationTextBlock">
          <TextBlock.RenderTransform>
            <TranslateTransform>
            </TranslateTransform>
          </TextBlock.RenderTransform>
        </TextBlock>
      </Grid>
      <ProgressRing
        x:Name="progressRing"
        IsActive="True"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="20"
        Height="20"
        AutomationProperties.AutomationId="ProgressRing"/>
    </StackPanel>
  </Grid>
</UserControl>
