UX Patterns: Expander Control (with expand/collapse animation)

In this blog post, we will create an expander control. An expander control can be useful to show and hide sections of your UI and therefore declutter your app. We will start with a simple expander that show/hide content and we will finish by adding a expand/collapse animation (linear but in theory, we should be able to add easing In/out).

I've laid this out in easy to follow screen shots below so you can easily replicate this idea in your own PowerApp!

 

 

Let’s start by laying out the UI elements needed for the expander control

 

We arrange the above elements to create the expander below. We wire up the expand/collapse buttons bellow as follow:

 

 

In the above steps, we are toggling the value to expandCollapse between false and true on the OnSelect event. We are also using that variable to show and hide the appropriate collapse button depending on the state of the expander.

 

We use the same variable expandCollapse to determine if the height of the expander content is set to 0 or 300 in this case. That was makes this expander collapse and expand.

 

 

Animation

 

To add animation, we simply tweak the height formula above.  First, we will insert a Timer and set the following properties as follow:

 

 

Now we change the height formula :

If(expandCollapse,300*(AnimationTimer.Value/AnimationTimer.Duration),300*(1-(AnimationTimer.Value/AnimationTimer.Duration)))

 

 

As a bonus, you can build an accordion control (Hint: Expander+Variable height gallery = Accordion Control)

 

 

Check out the sample app here.