Skip to main content

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!

 

expander

 

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

SNAGHTML120fc68

 

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

 

image

 

image

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.

 

image

 

Animation

 

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

 

image

image

 

Now we change the height formula :

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

 

image

 

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

 

accordion

 

Check out the sample app here.