{"id":469,"date":"2022-12-11T19:24:28","date_gmt":"2022-12-11T19:24:28","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=469"},"modified":"2023-01-18T16:37:50","modified_gmt":"2023-01-18T16:37:50","slug":"statecontainer-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/11\/statecontainer-in-maui\/","title":{"rendered":"How to use StateContainer in MAUI"},"content":{"rendered":"\n

The Xamarin.CommunityToolkit StateContainer<\/strong> in MAUI<\/strong><\/strong> is a layout which displaying a specific view when your app is in a specific state. StateContainer<\/strong><\/strong><\/strong> is an attached properties which enables the user to turn any layout into a state-aware<\/strong> layout. In this article, I\u2019m going to show you how to use StateContainer in MAUI<\/strong> Community Toolkit<\/strong>.<\/p>\n\n\n\n

In this sample demo i will take three different custom states like ‘Loading<\/strong>‘, ‘Empty<\/strong>‘ and ‘Success<\/strong>‘<\/p>\n\n\n\n

Loading<\/strong> : Will show before loading users.
Empty<\/strong> : Will show when user not available.
Success<\/strong> : Will show when user available.<\/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 \u2013 Install CommunityToolkit.Maui nuget package<\/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 MAUIStateContainerLayoutSample;\n\npublic static class MauiProgram\n{\n    public static MauiApp CreateMauiApp()\n    {\n        var builder = MauiApp.CreateBuilder();\n        builder\n            .UseMauiApp<App>()\n            .UseMauiCommunityToolkit()\n            .ConfigureFonts(fonts =>\n            {\n                fonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");\n                fonts.AddFont(\"OpenSans-Semibold.ttf\", \"OpenSansSemibold\");\n            });\n\n#if DEBUG\n        builder.Logging.AddDebug();\n#endif\n\n        return builder.Build();\n    }\n}<\/pre>\n\n\n\n
3 \u2013 Setting up the UI<\/strong><\/p>\n\n\n\n
3.1 \u2013 Create a MainPage.xaml<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage\n    x:Class=\"MAUIStateContainerLayoutSample.MainPage\"\n    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:Name=\"MainPageContainer\">\n\n    <ScrollView>\n        <StackLayout Padding=\"20\" Spacing=\"10\">\n\n            <Image\n                HeightRequest=\"150\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\">\n\n                <Image.Behaviors>\n                    <toolkit:IconTintColorBehavior TintColor=\"Red\" \/>\n                <\/Image.Behaviors>\n            <\/Image>\n\n            <VerticalStackLayout\n                toolkit:StateContainer.CurrentState=\"{Binding CurrentState}\"\n                toolkit:StateContainer.ShouldAnimateOnStateChange=\"True\"\n                Spacing=\"25\"\n                VerticalOptions=\"CenterAndExpand\">\n\n                <toolkit:StateContainer.StateViews>\n\n                    <!--  Loading State  -->\n                    <VerticalStackLayout toolkit:StateView.StateKey=\"Loading\">\n                        <ActivityIndicator\n                            HeightRequest=\"25\"\n                            HorizontalOptions=\"CenterAndExpand\"\n                            IsRunning=\"True\"\n                            VerticalOptions=\"CenterAndExpand\"\n                            WidthRequest=\"25\"\n                            Color=\"Red\" \/>\n\n                        <Label\n                            HorizontalOptions=\"CenterAndExpand\"\n                            HorizontalTextAlignment=\"Center\"\n                            Text=\"Loading ...\" \/>\n                    <\/VerticalStackLayout>\n\n                    <!--  Empty State  -->\n                    <VerticalStackLayout toolkit:StateView.StateKey=\"Empty\">\n\n                        <Image\n                            HeightRequest=\"200\"\n                            HorizontalOptions=\"Center\"\n                            Source=\"empty.png\" \/>\n\n                    <\/VerticalStackLayout>\n\n                    <!--  Success State  -->\n                    <StackLayout\n                        toolkit:StateView.StateKey=\"Success\"\n                        BindableLayout.ItemsSource=\"{Binding UserList}\"\n                        HorizontalOptions=\"FillAndExpand\"\n                        VerticalOptions=\"FillAndExpand\">\n                        <BindableLayout.ItemTemplate>\n                            <DataTemplate>\n                                <Frame Padding=\"5\" CornerRadius=\"0\">\n                                    <StackLayout\n                                        Padding=\"10\"\n                                        HorizontalOptions=\"FillAndExpand\"\n                                        Orientation=\"Horizontal\"\n                                        VerticalOptions=\"FillAndExpand\">\n                                        <Label\n                                            x:Name=\"UserName\"\n                                            HorizontalOptions=\"FillAndExpand\"\n                                            Text=\"{Binding .}\"\n                                            TextColor=\"Black\" \/>\n                                        <Frame\n                                            Padding=\"7\"\n                                            CornerRadius=\"15\"\n                                            HeightRequest=\"30\"\n                                            HorizontalOptions=\"EndAndExpand\"\n                                            WidthRequest=\"30\">\n                                            <Image Source=\"delete.png\" \/>\n                                            <Frame.GestureRecognizers>\n                                                <TapGestureRecognizer Command=\"{Binding BindingContext.DeleteUserCommand, Source={x:Reference MainPageContainer}}\" CommandParameter=\"{Binding .}\" \/>\n                                            <\/Frame.GestureRecognizers>\n                                        <\/Frame>\n                                    <\/StackLayout>\n                                <\/Frame>\n                            <\/DataTemplate>\n                        <\/BindableLayout.ItemTemplate>\n                    <\/StackLayout>\n\n                <\/toolkit:StateContainer.StateViews>\n            <\/VerticalStackLayout>\n\n            <Entry\n                Placeholder=\"Type name\"\n                Text=\"{Binding User}\"\n                VerticalOptions=\"EndAndExpand\" \/>\n\n            <Button\n                Margin=\"0,10,0,0\"\n                Command=\"{Binding AddUserCommand}\"\n                HorizontalOptions=\"CenterAndExpand\"\n                Text=\"Add User\" \/>\n\n        <\/StackLayout>\n\n    <\/ScrollView>\n\n<\/ContentPage><\/pre>\n\n\n\n