It is well known that good user interfaces should not be crowded with a lot of information. A page in a mobile app should not have too many visual elements displayed at the same time. If it does, they should at least be displayed in an appropriate way, or at the user’s will.

Today we will create a control. which gives your users the power to hide or display components of your user interface at will (an Accordion in Xamarin Forms). We will use a few components of Xamarin Forms, and no platform specific code. These components include: The ContentView, Animations, Bindable Propoerties.

You can get the source code for the demo application here.

Building The Accordion in Xamarin Forms

Before we start implementing, let’s have an overview of the components of the Accordion View we will build.

Accordion in Xamarin Forms illustration
Accordion in Xamarin Forms illustration
  • 1- The Title which will give an overview of the view’s content
  • 2- The Indicator, which will move depending on wether the accordion is open or closed.
  • 3- The Content, which will contain the visual elements to be displayed by the accordion. This component will also be animated.

To build our accordion in Xamarin Forms, we will use a content view. We will customize this content view and give it the properties and animations we need to.

If you like this post, you can chose to follow me on Twitter or Github and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.

Implementation

The Title

This is the easiest part of it all. The title will be a label we will place in the visual hierachy of our custom control. Our accordion is then added a bindable property “Title”. This title property is bound to the label’s text property.

The Indicator

This component is a content view of its own. It is made to be a content view so that its content can be modified outside of our accordion.

To make it easy to set the content of our indicator, we add a bindable property of type “View” known as “IndicatorView”.

Since we need to open and close our indicator, there should be a property to command these actions. This bindable property is the “IsOpen” property. When this property is changed, Animations and VisualStates are changed depending on its value.

The Content

Now let’s make it possible to set the content outside of our accordion. To accomplish this, we use the same approach as that of the indicator. We use a content view and create a bindable propoperty. This property is of type View and will make it easy to change our content outside our accordion.

Animation

We have to make this control more interactive. animations will help us accomplish this. The indicator will rotate while the content gets moves up or down then disapears. All of these should be done simultaneously and not sequentially. This task is easy thanks to Xamarin Forms animations.

Using the Accordion

Usually, the accordion is depicted as a kind of list view whose items can collapse and open at will. But if you have been following, you might notice our accordion is just a single control. To make it appear in a list-like manner, you can set it as ItemTemplate for a collection view. Here is an example, followed by its visual representation.

Accordion in Xamarin Forms Demo
Accordion in Xamarin Forms Demo

You might be interested about building a Snack Bar in Xamarin Forms. Or building a simple Edit Label in Xamarin Forms. These are other controls, you can find more the demos I do on Github.

If you find this article useful, please follow me on Twitter,  Github, Linkedin, or like my Facebook page to stay updated.
Follow me on social media and stay updated

Conclusion

Here you have a demo of how to create an accordion in Xamarin Forms. This control could be done in several other ways, and I’m interested to have your point of view in the comments. You can get the source code for this demo HERE

Follow me on social media and stay updated

1 Comment

  1. Rik Bonhof

    Reply

    Is there an option to have only one accordion opened at once? So if item 1 is opened and you tap item 2, 1 will close and 2 will open.

    Also it would be nice if the first item would be opened by default. Sadly I did not manage to do this from code.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.