{"id":401,"date":"2022-12-02T20:52:46","date_gmt":"2022-12-02T20:52:46","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=401"},"modified":"2023-01-18T16:52:05","modified_gmt":"2023-01-18T16:52:05","slug":"flexlayout-in-net-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/02\/flexlayout-in-net-maui\/","title":{"rendered":"How to use FlexLayout in MAUI"},"content":{"rendered":"\n<p><strong><strong>FlexLayout<\/strong>&nbsp;<strong>in&nbsp;MAUI<\/strong> <\/strong> is a layout that can arrange its children <strong>horizontally<\/strong> and <strong>vertically<\/strong> in a stack. It is also wrap its children if there are too many children to fit in a single row or column. <strong>FlexLayout<\/strong> can control orientation and alignment, and adapt to different screen sizes.<\/p>\n\n\n\n<p>In this article, I\u2019m going to show you how to use&nbsp;<strong>FlexLayout<\/strong>&nbsp;<strong>in&nbsp;MAUI<\/strong> to add skills.<\/p>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Setting up the UI<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.1 &#8211; MainPage.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;ContentPage xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             xmlns:converter=\"clr-namespace:MAUIFlextLayout\"\n             x:Class=\"MAUIFlextLayout.MainPage\">\n\n     &lt;ContentPage.Resources>\n            &lt;converter:StringToReverseBoolConverter x:Key=\"IsLableShow\" \/>\n            &lt;converter:StringToViewSizeStringConverter x:Key=\"ViewSizeConverter\" \/>\n    &lt;\/ContentPage.Resources>\n\n    &lt;ScrollView Padding=\"0,0,0,20\">\n        &lt;VerticalStackLayout\n            Spacing=\"15\"\n            Padding=\"20,20\"\n            VerticalOptions=\"Start\">\n\n            &lt;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            &lt;Label Text=\"Skills : \"\n                   FontSize=\"20\"\n                   Margin=\"5,0,0,0\"\n                   FontAttributes=\"Bold\"\/>\n\n            &lt;FlexLayout\n                    x:Name=\"FlexSkillContainer\"\n                    Margin=\"5,-10,5,5\"\n                    AlignContent=\"Start\"\n                    AlignItems=\"Start\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    VerticalOptions=\"Fill\"\n                    Direction=\"Row\"\n                    JustifyContent=\"Start\"\n                    BindableLayout.ItemsSource=\"{Binding Skills}\"\n                    Wrap=\"Wrap\" >\n\n                   &lt;BindableLayout.ItemTemplate>\n                        &lt;DataTemplate>\n                             &lt;Frame\n                                Margin=\"2\"\n                                Padding=\"4\"\n                                BackgroundColor=\"{StaticResource ColorFocused}\"\n                                CornerRadius=\"15\">\n                                   &lt;StackLayout\n                                        Margin=\"5,0,5,0\"\n                                        Orientation=\"Horizontal\">\n\n                                            &lt;Label\n                                                x:Name=\"LabelSkill\"\n                                                FontSize=\"18\"\n                                                Text=\"{Binding .}\"\n                                                Margin=\"5,0,5,0\"\n                                                TextColor=\"{StaticResource ColorWhite}\"\n                                                VerticalOptions=\"Center\" \/>\n\n                                            &lt;Image\n                                                x:Name=\"ImgCross\"\n                                                HeightRequest=\"24\"\n                                                HorizontalOptions=\"End\"\n                                                Source=\"cross.png\"\n                                                VerticalOptions=\"Center\"\n                                                WidthRequest=\"24\">\n\n                                                &lt;Image.GestureRecognizers>\n                                                    &lt;TapGestureRecognizer Tapped=\"OnDeleteSkillClicked\" \/>\n                                                &lt;\/Image.GestureRecognizers>\n\n                                            &lt;\/Image>\n\n                                 &lt;\/StackLayout>\n                             &lt;\/Frame>\n                        &lt;\/DataTemplate>\n                   &lt;\/BindableLayout.ItemTemplate>\n\n             &lt;\/FlexLayout>\n\n            &lt;FlexLayout Direction=\"Row\" HeightRequest=\"50\">\n\n                &lt;Entry\n                    x:Name=\"SkillEntry\"\n                    Margin=\"5\"\n                    FlexLayout.Basis=\"{Binding Source={x:Reference SkillEntry}, Path=Text, Converter={StaticResource ViewSizeConverter}}\"\n                    FontSize=\"20\"\n                    HeightRequest=\"50\"\n                    VerticalOptions=\"Fill\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Keyboard=\"Text\"\n                    Placeholder=\"Add Skill\" \/>\n\n                &lt;Image\n                    x:Name=\"ImageCheck\"\n                    FlexLayout.Basis=\"10%\"\n                    HeightRequest=\"35\"\n                    FlexLayout.AlignSelf=\"Center\"\n                    VerticalOptions=\"CenterAndExpand\"\n                    IsVisible=\"{Binding Source={x:Reference SkillEntry}, Path=Text, Converter={StaticResource IsLableShow}}\"\n                    Source=\"check.png\"\n                    WidthRequest=\"35\">\n\n                    &lt;Image.GestureRecognizers>\n                        &lt;TapGestureRecognizer Tapped=\"TapGestureRecognizer_Tapped\"\/>\n                    &lt;\/Image.GestureRecognizers>\n                 &lt;\/Image>\n\n            &lt;\/FlexLayout>\n\n        &lt;\/VerticalStackLayout>\n    &lt;\/ScrollView>\n\n&lt;\/ContentPage><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>MainPage.xaml<\/strong> I have used two <strong>FlexLayout<\/strong> first <strong>FlexLayout<\/strong> has used for showing the list of skills and second <strong>FlexLayout<\/strong> contains &#8216;Entry&#8217; and &#8216;Image&#8217;.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I have used below properties in <strong>FlexLayout<\/strong>:<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Direction=\u201dRow\u201d<\/strong>&nbsp;=&gt; Children will appear horizontally.<\/li>\n\n\n\n<li><strong>JustifyContent=\u201dStart\u201d<\/strong>&nbsp;=&gt; Children will aligned from start without any spacing.<\/li>\n\n\n\n<li><strong>Wrap=\u201dWrap\u201d<\/strong>&nbsp;=&gt;&nbsp;<strong>FlexLayout&nbsp;<\/strong>will wrap its children. If there are too many children to fit in a single row.<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the second <strong>FlexLayout<\/strong> i have used <strong>FlexLayout.Basis<\/strong> attached property to its children.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>FlexLayout.Basis<\/strong>, defines the amount of space that&#8217;s allocated to a child on the main axis.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For <strong>Entry<\/strong> i have used <strong>StringToViewSizeStringConverter<\/strong> converter to manage the width size.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Create a StringToViewSizeStringConverter.cs converter<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing Microsoft.Maui.Layouts;\nusing System.Globalization;\n\nnamespace MAUIFlextLayout\n{\n    public class StringToViewSizeStringConverter : IValueConverter\n    {\n        public StringToViewSizeStringConverter()\n        {\n        }\n\n        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            string val = (string)value;\n\n            if (!string.IsNullOrEmpty(val))\n            {\n                return new FlexBasis(0.90f, true);\n            }\n            else\n            {\n                return new FlexBasis(1f, true);\n            }\n        }\n\n        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            return !((bool)value);\n        }\n    }\n}\n\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>StringToViewSizeStringConverter.cs<\/strong> If <strong>Entry<\/strong> text length is more than 1 then <strong>StringToViewSizeStringConverter<\/strong> converter will return 90% of <strong>FlexBasis<\/strong> else 100% <strong>FlexBasis<\/strong>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And I have used another <strong>StringToReverseBoolConverter<\/strong> converter to Image for hiding and showing.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211; Create another StringToReverseBoolConverter.cs converter<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Globalization;\n\nnamespace MAUIFlextLayout\n{\n    public class StringToReverseBoolConverter : IValueConverter\n    {\n        public StringToReverseBoolConverter()\n        {\n        }\n\n        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            string val = (string)value;\n\n            if (!string.IsNullOrEmpty(val))\n            {\n                if (val.Length > 0)\n                {\n                    return true;\n                }\n                else\n                {\n                    return false;\n                }\n            }\n            else\n            {\n                return false;\n            }\n        }\n\n        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            return !((bool)value);\n        }\n    }\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If <strong>Entry<\/strong> text length is more than 1 then image icon will be <strong>visible<\/strong> else <strong>not visible<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4 &#8211; Manage Add\/Delete skills in MainPage.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System.Collections.ObjectModel;\nusing System.ComponentModel;\n\nnamespace MAUIFlextLayout;\n\npublic partial class MainPage : ContentPage, INotifyPropertyChanged\n{\n    private ObservableCollection&lt;string> _skills;\n    public ObservableCollection&lt;string> Skills\n    {\n        get\n        {\n            return _skills;\n        }\n        set\n        {\n            _skills = value;\n            OnPropertyChanged(\"Skills\");\n        }\n    }\n\n\tpublic MainPage()\n\t{\n\t\tInitializeComponent();\n        Skills = new ObservableCollection&lt;string>();\n        BindingContext = this;\n    }\n\n    void OnAddSkillClicked(System.Object sender, System.EventArgs e)\n    {\n        Skills.Add(SkillEntry.Text);\n        SkillEntry.Text = \"\";\n    }\n\n    void OnDeleteSkillClicked(System.Object sender, System.EventArgs e)\n    {\n        string skill = (sender as Image).BindingContext as string;\n\n        if(!string.IsNullOrEmpty(skill))\n        {\n            Skills.Remove(skill);\n        }\n    }\n}<\/pre>\n\n\n\n<p>Now, We have completed the coding, Let&#8217;s try to run the application.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>5 &#8211; Result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1578\" style=\"aspect-ratio: 724 \/ 1578;\" width=\"724\" controls muted src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/FlexLayoutInMAUI.mov\"><\/video><\/figure>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code <strong><a href=\"https:\/\/github.com\/Alam-Ashraf\/MAUIFlexLayoutSample\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/strong><\/p>\n\n\n\n<p>Happy Coding!<strong> \ud83d\ude00<\/strong><\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>You may also like<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/21\/uniformitemslayout-in-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-1024x548.png\" alt=\"UniformItemsLayout in MAUI\" class=\"wp-image-522\" width=\"512\" height=\"274\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-1024x548.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-300x161.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-768x411.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-850x455.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout.png 1390w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use UniformItemsLayout in MAUI<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/03\/expander-in-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI-1024x624.png\" alt=\"Expander in MAUI\" class=\"wp-image-435\" width=\"512\" height=\"312\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI-1024x624.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI-300x183.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI-768x468.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI-850x518.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/Expander-in-Dot-Net-MAUI.png 1260w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use Expander in MAUI<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>FlexLayout&nbsp;in&nbsp;MAUI is a layout that can arrange its children horizontally and vertically in a stack. It is also wrap its children if there are too many children to fit in a single row or column. FlexLayout can control orientation and alignment, and adapt to different screen sizes. In this article, I\u2019m going to show you&#8230;<\/p>\n","protected":false},"author":1,"featured_media":402,"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":[24,25,26],"class_list":["post-401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-flexlayout-in-net-maui","tag-how-to-use-flexlayout-in-net-maui","tag-net-maui-flexlayout"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/401","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=401"}],"version-history":[{"count":23,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/401\/revisions\/756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/402"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}