{"id":438,"date":"2022-12-07T14:25:42","date_gmt":"2022-12-07T14:25:42","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=438"},"modified":"2023-01-18T16:43:58","modified_gmt":"2023-01-18T16:43:58","slug":"docklayout-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/07\/docklayout-in-maui\/","title":{"rendered":"How to use DockLayout in MAUI"},"content":{"rendered":"\n

The Xamarin.CommunityToolkit DockLayout in MAUI<\/strong><\/strong> is a layout where children can be docked<\/strong> to the sides of the layout container. Children are docked at one of 4 possible docking positions Top<\/strong><\/em>, Bottom<\/strong><\/em>, Left<\/strong><\/em> or Right<\/strong><\/em>. Child that are not explicitly docked or (with ‘None<\/em><\/strong>‘) are displayed at the center.<\/p>\n\n\n\n

In this article, I\u2019m going to show you how to use DockLayout in MAUI<\/strong> Community Toolkit<\/strong>.<\/p>\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><\/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 MAUIDockLayoutSample;\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            .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 – Create a 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=\"MAUIDockLayoutSample.MainPage\">\n\n    <toolkit:DockLayout VerticalOptions=\"FillAndExpand\" HorizontalOptions=\"FillAndExpand\">\n\n        <StackLayout toolkit:DockLayout.DockPosition=\"Top\" BackgroundColor=\"#ffcc61\" HeightRequest=\"70\"> \n            <Label Text=\"Header\" TextColor=\"Black\" FontSize=\"Large\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\"\/>\n        <\/StackLayout>\n        <StackLayout toolkit:DockLayout.DockPosition=\"Bottom\" BackgroundColor=\"#cdaeb4\" HeightRequest=\"70\"> \n            <Label Text=\"Footer\" TextColor=\"Black\" FontSize=\"Large\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\"\/>\n        <\/StackLayout>\n         <StackLayout toolkit:DockLayout.DockPosition=\"Left\" BackgroundColor=\"#83888e\" WidthRequest=\"80\"> \n            <Label Text=\"Left\" TextColor=\"Black\" FontSize=\"Large\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\"\/>\n        <\/StackLayout>\n         <StackLayout toolkit:DockLayout.DockPosition=\"Right\" BackgroundColor=\"#abc8c2\" WidthRequest=\"80\" HorizontalOptions=\"FillAndExpand\"> \n            <Label Text=\"Right\" TextColor=\"Black\" FontSize=\"Large\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\"\/>\n        <\/StackLayout>\n         <Image\n             Source=\"dotnet_bot.png\"\n             HeightRequest=\"180\"\n             WidthRequest=\"180\"\n             HorizontalOptions=\"CenterAndExpand\"\n             VerticalOptions=\"CenterAndExpand\"\n             \/>\n    <\/toolkit:DockLayout>\n    \n<\/ContentPage><\/pre>\n\n\n\n
3.2 – MainPage.xaml.cs<\/strong><\/p>\n\n\n\n
namespace MAUIDockLayoutSample;\n\npublic partial class MainPage : ContentPage\n{\n    public MainPage()\n    {\n\tInitializeComponent();\n    }\n}<\/pre>\n\n\n\n
Now, We have completed the coding, Let\u2019s 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
\"InternetConnStatus\"<\/a><\/figure>\n<\/div>\n\n\n
How to check internet connection continuously in Xamarin Forms<\/p>\n<\/div>\n\n\n\n
<\/p>\n\n\n\n
\n
\n
\"Field<\/a><\/figure>\n<\/div>\n\n\n
How to use Field Modifiers in MAUI<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The Xamarin.CommunityToolkit DockLayout in MAUI is a layout where children can be docked to the sides of the layout container. Children are docked at one of 4 possible docking positions Top, Bottom, Left or Right. Child that are not explicitly docked or (with ‘None‘) are displayed at the center. In this article, I\u2019m going to show you how to use DockLayout in…<\/p>\n","protected":false},"author":1,"featured_media":445,"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":[33,31,32,34],"class_list":["post-438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-docklayout-in-net-maui","tag-docklayout-in-maui","tag-how-to-use-docklayout-in-maui","tag-xamarin-communitytoolkit"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/438","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=438"}],"version-history":[{"count":13,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions\/752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}