{"id":417,"date":"2022-12-03T20:14:01","date_gmt":"2022-12-03T20:14:01","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=417"},"modified":"2023-01-18T16:47:54","modified_gmt":"2023-01-18T16:47:54","slug":"expander-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/03\/expander-in-maui\/","title":{"rendered":"How to use Expander in MAUI"},"content":{"rendered":"\n

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

In this article, I\u2019m going to show you how to use Expander <\/strong>in MAUI<\/strong><\/strong> Community Toolkit<\/strong>. <\/p>\n\n\n\n

Expander<\/strong> has “Direction<\/strong>” property which defines the expander direction.<\/p>\n\n\n\n

 ExpandDirection<\/strong>
“Down”<\/strong> => It indicates that the Expander<\/strong> content is under the header.
“Up”<\/strong> => It indicates that the Expander<\/strong> content is above the header.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
 <\/strong>Note : Expander<\/strong> is not supported inside CollectionView<\/strong> or ListView<\/strong>. May be in future version of .NET MAUI Community Toolkit<\/strong> will support.<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Let\u2019s Start<\/strong><\/p>\n\n\n\n

In this sample demo we will use CommunityToolkit.Maui<\/a><\/strong> nuget package.<\/p>\n\n\n\n

CommunityToolkit.Maui<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

1 – Install CommunityToolkit.Maui nuget package<\/strong><\/strong><\/p>\n\n\n\n

\"Expander<\/figure>\n\n\n\n

2 – In order to use the .NET MAUI Community Toolkit you need to call the extension method in your MauiProgram.cs file as follows<\/strong> :<\/p>\n\n\n\n

using CommunityToolkit.Maui;\nusing Microsoft.Extensions.Logging;\n\nnamespace MAUIExpanderViewSample;\n\npublic static class MauiProgram\n{\n\tpublic static MauiApp CreateMauiApp()\n\t{\n\t\tvar builder = MauiApp.CreateBuilder();\n\t\tbuilder\n\t\t\t.UseMauiApp<App>()\n\t\t\t.UseMauiCommunityToolkit()\n\t\t\t.ConfigureFonts(fonts =>\n\t\t\t{\n\t\t\t\tfonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");\n\t\t\t\tfonts.AddFont(\"OpenSans-Semibold.ttf\", \"OpenSansSemibold\");\n\t\t\t});\n\n#if DEBUG\n\t\tbuilder.Logging.AddDebug();\n#endif\n\n\t\treturn builder.Build();\n\t}\n}<\/pre>\n\n\n\n
3 – Setting up the UI<\/strong><\/p>\n\n\n\n
3.1 – MainPage.xaml<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             xmlns:toolkit=\"http:\/\/schemas.microsoft.com\/dotnet\/2022\/maui\/toolkit\"\n             x:Class=\"MAUIExpanderViewSample.MainPage\">\n\n    <ScrollView Padding=\"10\"\n                VerticalScrollBarVisibility=\"Always\"\n                VerticalOptions=\"FillAndExpand\">\n        <StackLayout\n            Spacing=\"25\"\n            Padding=\"10,0\"\n            VerticalOptions=\"Start\">\n\n            <!--Expander in Down Direction-->\n            <Border Stroke=\"#2B0B98\"\n                    StrokeThickness=\"4\"\n                    StrokeShape=\"RoundRectangle 40,0,0,40\"\n                    Background=\"#fff\"\n                    Padding=\"16,8\"\n                    HorizontalOptions=\"FillAndExpand\">\n\n                <toolkit:Expander Direction=\"Down\">\n                    <toolkit:Expander.Header>\n                          <Button Text=\"Expand in Down Direction !!\"  HorizontalOptions=\"CenterAndExpand\"\/>\n                    <\/toolkit:Expander.Header>\n\n                    <toolkit:Expander.Content>\n                        <VerticalStackLayout Spacing=\"20\" Padding=\"10\">\n                            <Image\n                                Source=\"dotnet_bot.png\"\n                                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                                HeightRequest=\"200\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Label\n                                Text=\"Hello, World!\"\n                                SemanticProperties.HeadingLevel=\"Level1\"\n                                FontSize=\"32\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Label\n                                Text=\"Welcome to .NET Multi-platform App UI\"\n                                SemanticProperties.HeadingLevel=\"Level2\"\n                                SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\n                                FontSize=\"18\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Button\n                            x:Name=\"CounterBtn\"\n                            Text=\"Click me\"\n                            SemanticProperties.Hint=\"Counts the number of times you click\"\n                            Clicked=\"OnCounterClicked\"\n                            HorizontalOptions=\"Center\" \/>\n                        <\/VerticalStackLayout>\n                    <\/toolkit:Expander.Content>\n\n               <\/toolkit:Expander>\n            <\/Border>\n\n            <!--Expander in Up Direction-->\n            <Border Stroke=\"#2B0B98\"\n                    StrokeThickness=\"4\"\n                    StrokeShape=\"RoundRectangle 40,0,0,40\"\n                    Background=\"#fff\"\n                    Padding=\"16,8\"\n                    HorizontalOptions=\"FillAndExpand\">\n\n                <toolkit:Expander Direction=\"Up\">\n                    <toolkit:Expander.Header>\n                          <Button Text=\"Expand in Up Direction !!\" HorizontalOptions=\"CenterAndExpand\"\/>\n                    <\/toolkit:Expander.Header>\n\n                    <toolkit:Expander.Content>\n                        <VerticalStackLayout Spacing=\"20\" Padding=\"10\">\n                            <Image\n                                Source=\"dotnet_bot.png\"\n                                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                                HeightRequest=\"200\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Label\n                                Text=\"Hello, World!\"\n                                SemanticProperties.HeadingLevel=\"Level1\"\n                                FontSize=\"32\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Label\n                                Text=\"Welcome to .NET Multi-platform App UI\"\n                                SemanticProperties.HeadingLevel=\"Level2\"\n                                SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\n                                FontSize=\"18\"\n                                HorizontalOptions=\"Center\" \/>\n\n                            <Button\n                            Text=\"Click me\"\n                            SemanticProperties.Hint=\"Counts the number of times you click\"\n                            Clicked=\"OnCounterClicked\"\n                            HorizontalOptions=\"Center\" \/>\n                        <\/VerticalStackLayout>\n                    <\/toolkit:Expander.Content>\n\n               <\/toolkit:Expander>\n            <\/Border>\n\n            <!--Nested Expander in Down Direction-->\n            <Border Stroke=\"#2B0B98\"\n                    StrokeThickness=\"4\"\n                    StrokeShape=\"RoundRectangle 40,0,0,40\"\n                    Background=\"#fff\"\n                    Padding=\"16,8\"\n                    HorizontalOptions=\"FillAndExpand\">\n\n                <toolkit:Expander Direction=\"Down\">\n                    <toolkit:Expander.Header>\n                          <Button Text=\"Nested Expand in Down Direction !!\" HorizontalOptions=\"CenterAndExpand\"\/>\n                    <\/toolkit:Expander.Header>\n\n                    <toolkit:Expander.Content>\n                        <VerticalStackLayout Spacing=\"20\" Padding=\"10\">\n\n                            <toolkit:Expander Direction=\"Down\">\n                                <toolkit:Expander.Header>\n                                    <Image\n                                        Source=\"dotnet_bot.png\"\n                                        SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                                        HeightRequest=\"200\"\n                                        HorizontalOptions=\"Center\" \/>\n                               <\/toolkit:Expander.Header>\n                                <toolkit:Expander.Content>\n                                    <toolkit:Expander Direction=\"Down\">\n                                        <toolkit:Expander.Header>\n                                            <Label\n                                                Text=\"Hello, World!\"\n                                                SemanticProperties.HeadingLevel=\"Level1\"\n                                                FontSize=\"32\"\n                                                HorizontalOptions=\"Center\" \/>\n                                        <\/toolkit:Expander.Header>\n                                        <toolkit:Expander.Content>\n                                            <toolkit:Expander Direction=\"Down\">\n                                                <toolkit:Expander.Header>\n                                                    <Label\n                                                        Text=\"Welcome to .NET Multi-platform App UI\"\n                                                        SemanticProperties.HeadingLevel=\"Level2\"\n                                                        SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\n                                                        FontSize=\"18\"\n                                                        HorizontalOptions=\"Center\" \/>\n                                                <\/toolkit:Expander.Header>\n                                                <toolkit:Expander.Content>\n                                                    <Button\n                                                        Text=\"Click me\"\n                                                        SemanticProperties.Hint=\"Counts the number of times you click\"\n                                                        Clicked=\"OnCounterClicked\"\n                                                        HorizontalOptions=\"Center\" \/>\n                                                <\/toolkit:Expander.Content>\n                                            <\/toolkit:Expander>\n                                        <\/toolkit:Expander.Content>\n                                        \n                                    <\/toolkit:Expander>\n                                <\/toolkit:Expander.Content>\n                            <\/toolkit:Expander> \n                        <\/VerticalStackLayout>\n                    <\/toolkit:Expander.Content>\n\n               <\/toolkit:Expander>\n            <\/Border>\n            \n        <\/StackLayout>\n    <\/ScrollView>\n\n<\/ContentPage><\/pre>\n\n\n\n
3.2 – MainPage.xaml.cs<\/strong><\/p>\n\n\n\n
namespace MAUIExpanderViewSample;\n\npublic partial class MainPage : ContentPage\n{\n\tint count = 0;\n\n\tpublic MainPage()\n\t{\n\t\tInitializeComponent();\n\t}\n\n\tprivate void OnCounterClicked(object sender, EventArgs e)\n\t{\n\t\tcount++;\n\n\t\tif (count == 1)\n\t\t\tCounterBtn.Text = $\"Clicked {count} time\";\n\t\telse\n\t\t\tCounterBtn.Text = $\"Clicked {count} times\";\n\n\t\tSemanticScreenReader.Announce(CounterBtn.Text);\n\t}\n}<\/pre>\n\n\n\n
Now, We have completed the coding, Let’s try to run the application.<\/p>\n\n\n\n
4 – Result<\/strong><\/p>\n\n\n\n
You can check the full source code here<\/a>.<\/strong><\/p>\n\n\n\n
Happy Coding! \ud83d\ude00<\/strong><\/p>\n\n\n\n
<\/div>\n\n\n\n
You may also like<\/strong><\/p>\n\n\n\n
\n
\n
\"DockLayout<\/a><\/figure>\n<\/div>\n\n\n
How to use DockLayout in MAUI<\/p>\n<\/div>\n\n\n\n
<\/p>\n\n\n\n
\n
\n
\"ObservableObject<\/a><\/figure>\n<\/div>\n\n\n
How to use ObservableObject in MAUI for Data Binding<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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\u2019m going to show you how to use Expander in MAUI…<\/p>\n","protected":false},"author":1,"featured_media":435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[28,27,30,29,34],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-expander-in-net-maui","tag-expander-in-dot-net-maui","tag-expander-view-net-maui-community-toolkit","tag-expander-view-in-net-maui","tag-xamarin-communitytoolkit"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":25,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/417\/revisions\/754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/435"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}