Xamarin Forms - How to animate show/hide of item in StackLayout?

Question

I've got a Xamarin Forms cross-platform application (iOS and Android), and on one of the screens I want a list with details:

Heading 1
   Detail 1
   Detail 2
   Detail 3
Heading 2
   Detail 1
Heading 3
   Detail 1
   Detail 2

As you can see, the amount of detail under each heading is variable.

I want the page to display at first with just the headings:

Heading 1
Heading 2
Heading 3

And then when the user presses on a heading, the details for that particular heading appear. Pretty standard stuff.

I've tried several different ways to get this to work, the only path that seems open to me is to have a StackLayout where I define a bunch of labels:

new StackLayout
{
   Orientation = StackOrientation.Vertical,
   Children = 
   {
      new Label { Text = "Heading 1" },
      new Label { Text = "   Detail 1\n   Detail 2\n   Detail 3", IsVisible = false },
      new Label { Text = "Heading 2" },
      new Label { Text = "   Detail 1", IsVisible = false },
      new Label { Text = "Heading 3" },
      new Label { Text = "   Detail 1\n   Detail 2", IsVisible = false }
   }
}

I then add a TapGestureRecognizer to the heading labels, and when tapped I toggle the value of IsVisible for the detail labels. It works!

The only thing I don't like, is that there is no transition. I click on the heading label and BAM the detail label appears (correctly pushing down all the following labels to make space for itself). I would like an animation so that when I click on the header, the space beneath the header "slowly" opens up to reveal the detail.

As I read about animations online, one possibility is to set the HeightRequest of the detail labels to zero (instead of hiding them with IsVisible=false) and then creating an animation that "slowly" changes the HeightRequest from zero to the actual height of the label. And that's where I run into a problem.

I can't figure out how to get Xamarin to tell me the height of my "details" label.

If I inspect the Height and HeightRequest properties of my details label right after creating it, they are both -1 (no big surprise there). If I inspect those same two properties when I click on the heading, they are still -1. The only way I've found to get the height of my detail label, is to set the detail label visible, call ForceLayout() on my stack layout, store the detail label height, and then set the detail label invisible again. The problem with that is that I sometimes see the detail label flash visible for an instant while I do this.

What's the best/recommended way to accomplish my desired UI?

Solution

You can use the Animation API. Read the blog about it - Creating Animations with Xamarin.Forms.

In particular for your scenario you can use the FadeTo method to animate the Opacity property of a Visual Element.

Eg :

await image.FadeTo (1, 4000);

For more information, see Animation.

In your case my suggested approach would be for showing a label, to set opacity of label to 0, then make it visible, and then use FadeTo to make the opacity to 1. Use the opposite to hide the label, set opacity 0 via FadeTo, then set IsVisible to false.

Comments

[KFactory]

it's not really the expected answer... I presume @Betty is looking for a kind of 'ExpandTo' method instead of 'FadeTo' ...