title: Xamarin Forms - slide text up behind image
body: <p>Within a grid I have an image then 2 stack layouts, one contains a row of icons and a button, and the one below contains a list of text items.
  I have a function which, when the user click a button, the list animates upwards to effectively disappear, then downwards to reappear.</p>
  
  <p>This works fine but the text is always visible over the image when animating up, is there a way to make the image always visible on top, so that it appears as if the text is sliding up behind the image?</p>
  
  <p>Here is the code I use to animate the text stack:</p>
  
  <pre><code>public void ShowLess()
  {
      TopLayout.TranslateTo(0, -(TopLayout.Bounds.Height + 60), 500, Easing.Linear);
      isIncreased = false;
  }
  
  public void ShowMore()
  {
      TopLayout.TranslateTo(0, 0, 500, Easing.Linear);
      isIncreased = true;
  }
  </code></pre>
  
  <p>And the XAML:</p>
  
  <pre><code>&lt;ContentPage.Content&gt;
      &lt;Grid BackgroundColor="#ede8db"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="47.5*" /&gt;
              &lt;RowDefinition Height="5*" /&gt;
              &lt;RowDefinition Height="47.5*" /&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;ratio:ContentRatioContainer Grid.Row="0"&gt;
              &lt;Image Aspect="AspectFill" Source="KevingroveCarouselImg.png" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="bigImg" /&gt;
          &lt;/ratio:ContentRatioContainer&gt;
  
          &lt;artina:Button Margin="10,10,10,10" x:Name="ImgZoom" Clicked="EnlargeImage" HorizontalOptions="End" VerticalOptions="Start" Image="IncreaseImageIcon.png" BackgroundColor="Transparent"  HeightRequest="30" WidthRequest="30"/&gt;
  
          &lt;StackLayout Grid.Row="1" Orientation="Horizontal" BackgroundColor="#ede8db" Margin="0" Padding="30,0,30,0" x:Name="iconStack" &gt;
              &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
              &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CUTLERY}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
              &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WIFI}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
              &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CAMERA}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
              &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.MAP}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
              &lt;!--&lt;Label HorizontalTextAlignment="End" HorizontalOptions="End" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}" Style="{StaticResource FontIcon}" TextColor="Gray" FontSize="30" /&gt;--&gt;
              &lt;artina:Button x:Name="openStack" HorizontalOptions="End" VerticalOptions="Start" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}" 
                                 Style="{StaticResource FontIcon}" BackgroundColor="Transparent"  HeightRequest="30" WidthRequest="30" Clicked="btnClicked" TextColor="Gray"/&gt;
  
          &lt;/StackLayout&gt;
  
          &lt;StackLayout Grid.Row="2" x:Name="articleInfo" Padding="30,0,30,0"&gt;
              &lt;StackLayout x:Name="TopLayout"&gt;
                  &lt;StackLayout Orientation="Horizontal"&gt;
                      &lt;Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" /&gt;
                      &lt;Label Text="Address" VerticalOptions="Center" HorizontalOptions="StartAndExpand"  /&gt;
                  &lt;/StackLayout&gt;
              &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/Grid&gt;
  &lt;/ContentPage.Content&gt;
  </code></pre>