{"id":518,"date":"2022-12-21T15:03:44","date_gmt":"2022-12-21T15:03:44","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=518"},"modified":"2023-01-18T16:31:22","modified_gmt":"2023-01-18T16:31:22","slug":"uniformitemslayout-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/21\/uniformitemslayout-in-maui\/","title":{"rendered":"How to use UniformItemsLayout in MAUI"},"content":{"rendered":"\n

UniformItemsLayout <\/strong>in MAUI<\/strong><\/strong> Community Toolkit<\/strong> is a layout where all rows<\/strong> and columns<\/strong> will have the same size. UniformItemsLayout<\/strong><\/strong> is similar to Grid<\/strong>. For positioning the child in a particular cell we no need to specify row and column index in UniformItemsLayout<\/strong> like in Grid<\/strong>, It will automatically positioned child in row and column.<\/p>\n\n\n\n

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

UniformItemsLayout <\/strong>in MAUI<\/strong><\/strong> Community Toolkit<\/strong> allow us to limit the maximum<\/strong> number of columns<\/strong> and rows<\/strong> using MaxRows<\/strong> and MaxColumns<\/strong> properties.<\/p>\n\n\n\n

MaxRows<\/strong> – Used for Getting\/Setting the maximum number of items in a row.
MaxColumns<\/strong> – Used for Getting\/Setting the maximum number of items in a column.<\/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 MAUIUniformItemsLayoutSample;\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=\"MAUIUniformItemsLayoutSample.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\n    <ContentPage.Resources>\n        <ResourceDictionary>\n            <Style TargetType=\"Button\">\n                <Setter Property=\"CornerRadius\" Value=\"0\" \/>\n                <Setter Property=\"TextColor\" Value=\"Black\" \/>\n            <\/Style>\n            <Style TargetType=\"Label\">\n                <Setter Property=\"TextColor\" Value=\"Black\" \/>\n                <Setter Property=\"FontAttributes\" Value=\"Bold\" \/>\n                <Setter Property=\"Margin\" Value=\"0,10,0,0\" \/>\n            <\/Style>\n        <\/ResourceDictionary>\n    <\/ContentPage.Resources>\n\n    <ScrollView>\n        <VerticalStackLayout Padding=\"10\" Spacing=\"15\">\n\n            <Label Text=\"UniformItemsLayout with default settings\" \/>\n            <toolkit:UniformItemsLayout x:Name=\"UniformItemsLayout_Default\">\n                <Button BackgroundColor=\"#F5F5DC\" Text=\"Button 1\" \/>\n                <Button BackgroundColor=\"#FAEBD7\" Text=\"Button 2\" \/>\n                <Button BackgroundColor=\"#FFF0F5\" Text=\"Button 3\" \/>\n                <Button BackgroundColor=\"#FFE4E1\" Text=\"Button 4\" \/>\n            <\/toolkit:UniformItemsLayout>\n\n            <Label Text=\"UniformItemsLayout with MaxColumns=2 and MaxRows=2\" \/>\n            <toolkit:UniformItemsLayout\n                x:Name=\"UniformItemsLayout_MaxRows2MaxColumns2\"\n                MaxColumns=\"2\"\n                MaxRows=\"2\">\n                <Button BackgroundColor=\"#E6E6FA\" Text=\"Button 1\" \/>\n                <Button BackgroundColor=\"#D8BFD8\" Text=\"Button 2\" \/>\n                <Button BackgroundColor=\"#DDA0DD\" Text=\"Button 3\" \/>\n                <Button BackgroundColor=\"#EE82EE\" Text=\"Button 4\" \/>\n            <\/toolkit:UniformItemsLayout>\n\n            <Label Text=\"UniformItemsLayout with MaxRows=1\" \/>\n            <toolkit:UniformItemsLayout x:Name=\"UniformItemsLayout_MaxRows1\" MaxRows=\"1\">\n                <Button BackgroundColor=\"#FFDEAD\" Text=\"Button 1\" \/>\n                <Button BackgroundColor=\"#D2B48C\" Text=\"Button 2\" \/>\n                <Button BackgroundColor=\"#F4A460\" Text=\"Button 3\" \/>\n                <Button BackgroundColor=\"#B8860B\" Text=\"Button 4\" \/>\n            <\/toolkit:UniformItemsLayout>\n\n            <Label Text=\"UniformItemsLayout with MaxColumns=1\" \/>\n            <toolkit:UniformItemsLayout x:Name=\"UniformItemsLayout_MaxColumns1\" MaxColumns=\"1\">\n                <Button BackgroundColor=\"#D3D3D3\" Text=\"Button 1\" \/>\n                <Button BackgroundColor=\"#A9A9A9\" Text=\"Button 2\" \/>\n                <Button BackgroundColor=\"#808080\" Text=\"Button 3\" \/>\n                <Button BackgroundColor=\"#696969\" Text=\"Button 4\" \/>\n            <\/toolkit:UniformItemsLayout>\n\n        <\/VerticalStackLayout>\n    <\/ScrollView>\n\n<\/ContentPage><\/pre>\n\n\n\n
As in the above MainPage.xaml<\/strong> i have used four UniformItemsLayout<\/strong><\/strong> :<\/p>\n\n\n\n