maui-linux-samples/ShellDemo/Pages/GridsPage.xaml.cs

// GridsPage - Demonstrates Grid layouts with various options

using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace ShellDemo;

public partial class GridsPage : ContentPage
{
    public GridsPage()
    {
        InitializeComponent();
        BuildContent();
    }

    private void BuildContent()
    {
        MainContent.Children.Add(CreateSectionHeader("Basic Grid (2x2)"));
        MainContent.Children.Add(CreateBasicGrid());

        MainContent.Children.Add(CreateSectionHeader("Column Definitions"));
        MainContent.Children.Add(CreateColumnDefinitionsDemo());

        MainContent.Children.Add(CreateSectionHeader("Row Definitions"));
        MainContent.Children.Add(CreateRowDefinitionsDemo());

        MainContent.Children.Add(CreateSectionHeader("Star Sizing (Proportional)"));
        MainContent.Children.Add(CreateStarSizingDemo());

        MainContent.Children.Add(CreateSectionHeader("Row & Column Spacing"));
        MainContent.Children.Add(CreateSpacingDemo());

        MainContent.Children.Add(CreateSectionHeader("Row & Column Span"));
        MainContent.Children.Add(CreateSpanDemo());

        MainContent.Children.Add(CreateSectionHeader("Mixed Sizing"));
        MainContent.Children.Add(CreateMixedSizingDemo());

        MainContent.Children.Add(new BoxView { HeightRequest = 20 });
    }

    private Label CreateSectionHeader(string text)
    {
        var label = new Label
        {
            Text = text,
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            Margin = new Thickness(0, 10, 0, 5)
        };
        label.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#2196F3"),
            Color.FromArgb("#64B5F6"));
        return label;
    }

    private View CreateBasicGrid()
    {
        var grid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star }
            }
        };
        grid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var cell1 = CreateCell("Row 0, Col 0", "#E3F2FD", "#1A3A5C");
        var cell2 = CreateCell("Row 0, Col 1", "#E8F5E9", "#1A3C1A");
        var cell3 = CreateCell("Row 1, Col 0", "#FFF3E0", "#3C2A1A");
        var cell4 = CreateCell("Row 1, Col 1", "#FCE4EC", "#3C1A2A");

        Grid.SetRow(cell1, 0); Grid.SetColumn(cell1, 0);
        Grid.SetRow(cell2, 0); Grid.SetColumn(cell2, 1);
        Grid.SetRow(cell3, 1); Grid.SetColumn(cell3, 0);
        Grid.SetRow(cell4, 1); Grid.SetColumn(cell4, 1);

        grid.Children.Add(cell1);
        grid.Children.Add(cell2);
        grid.Children.Add(cell3);
        grid.Children.Add(cell4);

        return CreateDemoContainer(grid, "Equal columns using Star sizing");
    }

    private View CreateColumnDefinitionsDemo()
    {
        var stack = new VerticalStackLayout { Spacing = 15 };

        // Auto width columns
        var autoGrid = new Grid
        {
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Auto },
                new ColumnDefinition { Width = GridLength.Auto },
                new ColumnDefinition { Width = GridLength.Auto }
            }
        };
        autoGrid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var a1 = CreateCell("Auto", "#BBDEFB", "#1A3A5C");
        var a2 = CreateCell("Auto Width", "#C8E6C9", "#1A3C1A");
        var a3 = CreateCell("A", "#FFECB3", "#3C3A1A");
        Grid.SetColumn(a1, 0);
        Grid.SetColumn(a2, 1);
        Grid.SetColumn(a3, 2);
        autoGrid.Children.Add(a1);
        autoGrid.Children.Add(a2);
        autoGrid.Children.Add(a3);

        var autoLabel = new Label { Text = "Auto: Sizes to content", FontSize = 12 };
        autoLabel.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#757575"),
            Color.FromArgb("#B0B0B0"));
        stack.Children.Add(autoLabel);
        stack.Children.Add(autoGrid);

        // Absolute width columns
        var absoluteGrid = new Grid
        {
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = new GridLength(50) },
                new ColumnDefinition { Width = new GridLength(100) },
                new ColumnDefinition { Width = new GridLength(150) }
            }
        };
        absoluteGrid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var b1 = CreateCell("50px", "#BBDEFB", "#1A3A5C");
        var b2 = CreateCell("100px", "#C8E6C9", "#1A3C1A");
        var b3 = CreateCell("150px", "#FFECB3", "#3C3A1A");
        Grid.SetColumn(b1, 0);
        Grid.SetColumn(b2, 1);
        Grid.SetColumn(b3, 2);
        absoluteGrid.Children.Add(b1);
        absoluteGrid.Children.Add(b2);
        absoluteGrid.Children.Add(b3);

        var absLabel = new Label { Text = "Absolute: Fixed pixel widths (50, 100, 150)", FontSize = 12, Margin = new Thickness(0, 10, 0, 0) };
        absLabel.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#757575"),
            Color.FromArgb("#B0B0B0"));
        stack.Children.Add(absLabel);
        stack.Children.Add(absoluteGrid);

        return stack;
    }

    private View CreateRowDefinitionsDemo()
    {
        var grid = new Grid
        {
            WidthRequest = 200,
            RowDefinitions =
            {
                new RowDefinition { Height = new GridLength(30) },
                new RowDefinition { Height = new GridLength(50) },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = new GridLength(40) }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star }
            }
        };
        grid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var r1 = CreateCell("30px height", "#BBDEFB", "#1A3A5C");
        var r2 = CreateCell("50px height", "#C8E6C9", "#1A3C1A");
        var r3 = CreateCell("Auto height\n(fits content)", "#FFECB3", "#3C3A1A");
        var r4 = CreateCell("40px height", "#F8BBD9", "#3C1A3C");

        Grid.SetRow(r1, 0);
        Grid.SetRow(r2, 1);
        Grid.SetRow(r3, 2);
        Grid.SetRow(r4, 3);

        grid.Children.Add(r1);
        grid.Children.Add(r2);
        grid.Children.Add(r3);
        grid.Children.Add(r4);

        return CreateDemoContainer(grid, "Different row heights: 30px, 50px, Auto, 40px");
    }

    private View CreateStarSizingDemo()
    {
        var grid = new Grid
        {
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
            }
        };
        grid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var s1 = CreateCell("1*", "#BBDEFB", "#1A3A5C");
        var s2 = CreateCell("2* (double)", "#C8E6C9", "#1A3C1A");
        var s3 = CreateCell("1*", "#FFECB3", "#3C3A1A");

        Grid.SetColumn(s1, 0);
        Grid.SetColumn(s2, 1);
        Grid.SetColumn(s3, 2);

        grid.Children.Add(s1);
        grid.Children.Add(s2);
        grid.Children.Add(s3);

        return CreateDemoContainer(grid, "Star proportions: 1* | 2* | 1* = 25% | 50% | 25%");
    }

    private View CreateSpacingDemo()
    {
        var stack = new VerticalStackLayout { Spacing = 15 };

        // No spacing
        var noSpacing = CreateSpacedGrid(0, 0);
        var noLabel = new Label { Text = "No spacing (RowSpacing=0, ColumnSpacing=0)", FontSize = 12 };
        noLabel.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#757575"),
            Color.FromArgb("#B0B0B0"));
        stack.Children.Add(noLabel);
        stack.Children.Add(noSpacing);

        // With spacing
        var withSpacing = CreateSpacedGrid(10, 10);
        var withLabel = new Label { Text = "With spacing (RowSpacing=10, ColumnSpacing=10)", FontSize = 12, Margin = new Thickness(0, 10, 0, 0) };
        withLabel.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#757575"),
            Color.FromArgb("#B0B0B0"));
        stack.Children.Add(withLabel);
        stack.Children.Add(withSpacing);

        return stack;
    }

    private Grid CreateSpacedGrid(int rowSpacing, int columnSpacing)
    {
        var grid = new Grid
        {
            RowSpacing = rowSpacing,
            ColumnSpacing = columnSpacing,
            RowDefinitions =
            {
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star }
            }
        };

        var c1 = CreateCell("0,0", "#BBDEFB", "#1A3A5C");
        var c2 = CreateCell("0,1", "#C8E6C9", "#1A3C1A");
        var c3 = CreateCell("1,0", "#FFECB3", "#3C3A1A");
        var c4 = CreateCell("1,1", "#F8BBD9", "#3C1A3C");

        Grid.SetRow(c1, 0); Grid.SetColumn(c1, 0);
        Grid.SetRow(c2, 0); Grid.SetColumn(c2, 1);
        Grid.SetRow(c3, 1); Grid.SetColumn(c3, 0);
        Grid.SetRow(c4, 1); Grid.SetColumn(c4, 1);

        grid.Children.Add(c1);
        grid.Children.Add(c2);
        grid.Children.Add(c3);
        grid.Children.Add(c4);

        return grid;
    }

    private View CreateSpanDemo()
    {
        var grid = new Grid
        {
            RowSpacing = 5,
            ColumnSpacing = 5,
            RowDefinitions =
            {
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star }
            }
        };

        // Spanning header
        var header = CreateCell("ColumnSpan=3 (Header)", "#1976D2", "#0D47A1", Colors.White);
        Grid.SetRow(header, 0);
        Grid.SetColumn(header, 0);
        Grid.SetColumnSpan(header, 3);

        // Left sidebar spanning 2 rows
        var sidebar = CreateCell("RowSpan=2\n(Sidebar)", "#388E3C", "#1B5E20", Colors.White);
        Grid.SetRow(sidebar, 1);
        Grid.SetColumn(sidebar, 0);
        Grid.SetRowSpan(sidebar, 2);

        // Content cells
        var content1 = CreateCell("Content 1", "#E3F2FD", "#1A3A5C");
        Grid.SetRow(content1, 1); Grid.SetColumn(content1, 1);

        var content2 = CreateCell("Content 2", "#E8F5E9", "#1A3C1A");
        Grid.SetRow(content2, 1); Grid.SetColumn(content2, 2);

        var content3 = CreateCell("Content 3", "#FFF3E0", "#3C2A1A");
        Grid.SetRow(content3, 2); Grid.SetColumn(content3, 1);

        var content4 = CreateCell("Content 4", "#FCE4EC", "#3C1A2A");
        Grid.SetRow(content4, 2); Grid.SetColumn(content4, 2);

        grid.Children.Add(header);
        grid.Children.Add(sidebar);
        grid.Children.Add(content1);
        grid.Children.Add(content2);
        grid.Children.Add(content3);
        grid.Children.Add(content4);

        return CreateDemoContainer(grid, "Header spans 3 columns, Sidebar spans 2 rows");
    }

    private View CreateMixedSizingDemo()
    {
        var grid = new Grid
        {
            ColumnSpacing = 5,
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = new GridLength(60) },
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Auto },
                new ColumnDefinition { Width = new GridLength(60) }
            }
        };
        grid.SetAppThemeColor(Grid.BackgroundColorProperty,
            Color.FromArgb("#F5F5F5"),
            Color.FromArgb("#2C2C2C"));

        var c1 = CreateCell("60px", "#BBDEFB", "#1A3A5C");
        var c2 = CreateCell("Star (fills remaining)", "#C8E6C9", "#1A3C1A");
        var c3 = CreateCell("Auto", "#FFECB3", "#3C3A1A");
        var c4 = CreateCell("60px", "#F8BBD9", "#3C1A3C");

        Grid.SetColumn(c1, 0);
        Grid.SetColumn(c2, 1);
        Grid.SetColumn(c3, 2);
        Grid.SetColumn(c4, 3);

        grid.Children.Add(c1);
        grid.Children.Add(c2);
        grid.Children.Add(c3);
        grid.Children.Add(c4);

        return CreateDemoContainer(grid, "Mixed: 60px | Star | Auto | 60px");
    }

    private Border CreateCell(string text, string lightBgColor, string darkBgColor, Color? textColor = null)
    {
        var label = new Label
        {
            Text = text,
            FontSize = 12,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalTextAlignment = TextAlignment.Center
        };

        if (textColor != null)
        {
            label.TextColor = textColor;
        }
        else
        {
            label.SetAppThemeColor(Label.TextColorProperty,
                Colors.Black,
                Colors.White);
        }

        var border = new Border
        {
            Padding = new Thickness(10, 8),
            StrokeThickness = 0,
            Content = label
        };

        border.SetAppThemeColor(Border.BackgroundColorProperty,
            Color.FromArgb(lightBgColor),
            Color.FromArgb(darkBgColor));

        return border;
    }

    private View CreateDemoContainer(View content, string description)
    {
        var descLabel = new Label { Text = description, FontSize = 12 };
        descLabel.SetAppThemeColor(Label.TextColorProperty,
            Color.FromArgb("#757575"),
            Color.FromArgb("#B0B0B0"));

        return new VerticalStackLayout
        {
            Spacing = 5,
            Children = { descLabel, content }
        };
    }
}