How to use Expander in MAUI

The Xamarin.CommunityToolkit Expander in MAUI view provides an expandable container to host any content. It has two main properties to store your content that is Header & Content. User can show or hide its content by interacting with the header of the control.

In this article, I’m going to show you how to use Expander in MAUI Community Toolkit.

Expander has “Direction” property which defines the expander direction.

ExpandDirection
“Down” => It indicates that the Expander content is under the header.
“Up” => It indicates that the Expander content is above the header.

Note : Expander is not supported inside CollectionView or ListView. May be in future version of .NET MAUI Community Toolkit will support.

Let’s Start

In this sample demo we will use CommunityToolkit.Maui nuget package.

CommunityToolkit.Maui

CommunityToolkit.Maui is a collection of Converters, Behaviours, Animations, Custom Views, Effects, Helpers etc. It simplifies the developers task when building Android, iOS, macOS and WinUI applications using MAUI.

1 – Install CommunityToolkit.Maui nuget package

2 – In order to use the .NET MAUI Community Toolkit you need to call the extension method in your MauiProgram.cs file as follows :

using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;

namespace MAUIExpanderViewSample;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.UseMauiCommunityToolkit()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if DEBUG
		builder.Logging.AddDebug();
#endif

		return builder.Build();
	}
}

3 – Setting up the UI

3.1 – MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MAUIExpanderViewSample.MainPage">

    <ScrollView Padding="10"
                VerticalScrollBarVisibility="Always"
                VerticalOptions="FillAndExpand">
        <StackLayout
            Spacing="25"
            Padding="10,0"
            VerticalOptions="Start">

            <!--Expander in Down Direction-->
            <Border Stroke="#2B0B98"
                    StrokeThickness="4"
                    StrokeShape="RoundRectangle 40,0,0,40"
                    Background="#fff"
                    Padding="16,8"
                    HorizontalOptions="FillAndExpand">

                <toolkit:Expander Direction="Down">
                    <toolkit:Expander.Header>
                          <Button Text="Expand in Down Direction !!"  HorizontalOptions="CenterAndExpand"/>
                    </toolkit:Expander.Header>

                    <toolkit:Expander.Content>
                        <VerticalStackLayout Spacing="20" Padding="10">
                            <Image
                                Source="dotnet_bot.png"
                                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                                HeightRequest="200"
                                HorizontalOptions="Center" />

                            <Label
                                Text="Hello, World!"
                                SemanticProperties.HeadingLevel="Level1"
                                FontSize="32"
                                HorizontalOptions="Center" />

                            <Label
                                Text="Welcome to .NET Multi-platform App UI"
                                SemanticProperties.HeadingLevel="Level2"
                                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                                FontSize="18"
                                HorizontalOptions="Center" />

                            <Button
                            x:Name="CounterBtn"
                            Text="Click me"
                            SemanticProperties.Hint="Counts the number of times you click"
                            Clicked="OnCounterClicked"
                            HorizontalOptions="Center" />
                        </VerticalStackLayout>
                    </toolkit:Expander.Content>

               </toolkit:Expander>
            </Border>

            <!--Expander in Up Direction-->
            <Border Stroke="#2B0B98"
                    StrokeThickness="4"
                    StrokeShape="RoundRectangle 40,0,0,40"
                    Background="#fff"
                    Padding="16,8"
                    HorizontalOptions="FillAndExpand">

                <toolkit:Expander Direction="Up">
                    <toolkit:Expander.Header>
                          <Button Text="Expand in Up Direction !!" HorizontalOptions="CenterAndExpand"/>
                    </toolkit:Expander.Header>

                    <toolkit:Expander.Content>
                        <VerticalStackLayout Spacing="20" Padding="10">
                            <Image
                                Source="dotnet_bot.png"
                                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                                HeightRequest="200"
                                HorizontalOptions="Center" />

                            <Label
                                Text="Hello, World!"
                                SemanticProperties.HeadingLevel="Level1"
                                FontSize="32"
                                HorizontalOptions="Center" />

                            <Label
                                Text="Welcome to .NET Multi-platform App UI"
                                SemanticProperties.HeadingLevel="Level2"
                                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                                FontSize="18"
                                HorizontalOptions="Center" />

                            <Button
                            Text="Click me"
                            SemanticProperties.Hint="Counts the number of times you click"
                            Clicked="OnCounterClicked"
                            HorizontalOptions="Center" />
                        </VerticalStackLayout>
                    </toolkit:Expander.Content>

               </toolkit:Expander>
            </Border>

            <!--Nested Expander in Down Direction-->
            <Border Stroke="#2B0B98"
                    StrokeThickness="4"
                    StrokeShape="RoundRectangle 40,0,0,40"
                    Background="#fff"
                    Padding="16,8"
                    HorizontalOptions="FillAndExpand">

                <toolkit:Expander Direction="Down">
                    <toolkit:Expander.Header>
                          <Button Text="Nested Expand in Down Direction !!" HorizontalOptions="CenterAndExpand"/>
                    </toolkit:Expander.Header>

                    <toolkit:Expander.Content>
                        <VerticalStackLayout Spacing="20" Padding="10">

                            <toolkit:Expander Direction="Down">
                                <toolkit:Expander.Header>
                                    <Image
                                        Source="dotnet_bot.png"
                                        SemanticProperties.Description="Cute dot net bot waving hi to you!"
                                        HeightRequest="200"
                                        HorizontalOptions="Center" />
                               </toolkit:Expander.Header>
                                <toolkit:Expander.Content>
                                    <toolkit:Expander Direction="Down">
                                        <toolkit:Expander.Header>
                                            <Label
                                                Text="Hello, World!"
                                                SemanticProperties.HeadingLevel="Level1"
                                                FontSize="32"
                                                HorizontalOptions="Center" />
                                        </toolkit:Expander.Header>
                                        <toolkit:Expander.Content>
                                            <toolkit:Expander Direction="Down">
                                                <toolkit:Expander.Header>
                                                    <Label
                                                        Text="Welcome to .NET Multi-platform App UI"
                                                        SemanticProperties.HeadingLevel="Level2"
                                                        SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                                                        FontSize="18"
                                                        HorizontalOptions="Center" />
                                                </toolkit:Expander.Header>
                                                <toolkit:Expander.Content>
                                                    <Button
                                                        Text="Click me"
                                                        SemanticProperties.Hint="Counts the number of times you click"
                                                        Clicked="OnCounterClicked"
                                                        HorizontalOptions="Center" />
                                                </toolkit:Expander.Content>
                                            </toolkit:Expander>
                                        </toolkit:Expander.Content>
                                        
                                    </toolkit:Expander>
                                </toolkit:Expander.Content>
                            </toolkit:Expander> 
                        </VerticalStackLayout>
                    </toolkit:Expander.Content>

               </toolkit:Expander>
            </Border>
            
        </StackLayout>
    </ScrollView>

</ContentPage>

3.2 – MainPage.xaml.cs

namespace MAUIExpanderViewSample;

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();
	}

	private void OnCounterClicked(object sender, EventArgs e)
	{
		count++;

		if (count == 1)
			CounterBtn.Text = $"Clicked {count} time";
		else
			CounterBtn.Text = $"Clicked {count} times";

		SemanticScreenReader.Announce(CounterBtn.Text);
	}
}

Now, We have completed the coding, Let’s try to run the application.

4 – Result