Telerik blogs
XamarinT2 Dark_1200x303

Learn how to use this handy control to save time when you're developing your next Xamarin app.

As developers, it’s normal for us to find applications that require more complex controls than the more common ones. In these moments we have to choose between building them from scratch or looking for whether the controls we need already exist. If we choose to build them ourselves, we can penalize the development time of the project. 😓 So in this post, making use of Telerik UI for Xamarin, in a few steps we will learn how to use one of those uncommon but very, very useful controls for our applications: the Expander. 💓

But 🤔… What is the Expander?

The Expander, also called the RadExpander, is a control that allows us to group a set of information (graphic controls), allowing it to collapse and expand, so we can have all the information we need on the screen but save space on the screen design.


First of All… What Do I Need?

⚠ Important: Telerik UI for Xamarin has a free trial that allows us to explore all the great components they offer for use in our apps.

Let’s Start!

1. Add the following namespace to your app


2. Learning RadExpander Structure

To add this control, you must use the following structure:

    <telerikPrimitives:RadExpander HeaderText="Settings">            

                        <!-- Here you can add whatever layout that you need-->  

As we saw above, we need to enclose our code between these two tags and then just close it. It’s important to know that inside the tags, we can add whatever layout that we need, such as: StackLayout, GridLayout, among others. These are some of my favorite properties. 💓

  • HeaderText: (Obligatory field) This is the name that will be displayed in the header of the expander.

    Telerik UI for Xamarin Expander - Header

  • HeaderLocation: Allows us to set the location that will get the header bar. Values accepted are:
  • Top (Default value)

    Telerik UI for Xamarin Expander - TopBar

  • Bottom

    Telerik UI for Xamarin Expander - BottomBar

  • BorderColor: This is the color that the border of the entire RadExpander will have, including the header bar.

    Telerik UI for Xamarin Expander - Border Color

Now, Let’s See an Example!

    <telerikPrimitives:RadExpander x:Name="SettingExpander" HeaderText="Settings" HeaderLocation="Top" BorderColor="#F7AEF0">            
                    <Grid Margin="20">
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>

                        <telerikPrimitives:RadCheckBox Grid.Row="0" Grid.Column="0" />
                        <Label Grid.Row="0" Grid.Column="1" Text="Turn On WIFI" />

                        <telerikPrimitives:RadCheckBox Grid.Row="1" Grid.Column="0" />
                        <Label Grid.Row="1" Grid.Column="1" Text="Turn On Bluetooth" />

                        <telerikPrimitives:RadCheckBox Grid.Row="2" Grid.Column="0" />
                        <Label Grid.Row="2" Grid.Column="1" Text="Airplane mode"/>

Good look with your implementation! 😎 Thanks for reading 💚!

Learn More

Check out the Telerik UI for Xamarin docs to learn more about how this control works.

About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts


Comments are disabled in preview mode.