// 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 } }; } }