Dave Friedel
01270c6938
Complete ShellDemo application demonstrating all MAUI controls: - App/AppShell: Shell navigation with flyout menu - HomePage: Feature cards, theme toggle, quick actions - ButtonsPage: Button styles, states, variations, event logging - TextInputPage: Entry, Editor, SearchBar with keyboard shortcuts - SelectionPage: CheckBox, Switch, Slider with colored variants - PickersPage: Picker, DatePicker, TimePicker demos - ListsPage: CollectionView with fruits, colors, contacts - ProgressPage: ProgressBar, ActivityIndicator, interactive demo - GridsPage: Grid layouts - auto/star/absolute sizing, spans, nesting - AboutPage: OpenMaui Linux information - DetailPage: Push/pop navigation demo All pages use proper XAML with code-behind following MAUI patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
196 lines
13 KiB
XML
196 lines
13 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
|
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
|
x:Class="ShellDemo.Pages.GridsPage"
|
|
Title="Grids"
|
|
BackgroundColor="{StaticResource PageBackground}">
|
|
|
|
<ScrollView Orientation="Both">
|
|
<VerticalStackLayout Spacing="25" Padding="20">
|
|
|
|
<!-- Basic Grid -->
|
|
<Label Text="Basic Grid (2x2)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="Equal columns using Star sizing" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" BackgroundColor="#F5F5F5">
|
|
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Row 0, Col 0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Row 0, Col 1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Row 1, Col 0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Row 1, Col 1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Column Definitions -->
|
|
<Label Text="Column Definitions" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
|
|
<Label Text="Auto: Sizes to content" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="Auto,Auto,Auto" BackgroundColor="#F5F5F5">
|
|
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Auto" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Auto Width" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="A" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<Label Text="Absolute: Fixed pixel widths (50, 100, 150)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
|
|
<Grid ColumnDefinitions="50,100,150" BackgroundColor="#F5F5F5">
|
|
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="50px" HorizontalTextAlignment="Center" FontSize="10" />
|
|
</Border>
|
|
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="100px" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="150px" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Star Sizing -->
|
|
<Label Text="Star Sizing (Proportional)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
<Label Text="Star proportions: 1* | 2* | 1* = 25% | 50% | 25%" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="*,2*,*" BackgroundColor="#F5F5F5">
|
|
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1*" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="2* (double)" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1*" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Row & Column Spacing -->
|
|
<Label Text="Row & Column Spacing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
|
|
<Label Text="No spacing (RowSpacing=0, ColumnSpacing=0)" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="0" ColumnSpacing="0">
|
|
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="0,0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="0,1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1,0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1,1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<Label Text="With spacing (RowSpacing=10, ColumnSpacing=10)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
|
|
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10">
|
|
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="0,0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="0,1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1,0" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="1,1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Row & Column Span -->
|
|
<Label Text="Row & Column Span" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
<Label Text="Header spans 3 columns, Sidebar spans 2 rows" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto,Auto" RowSpacing="5" ColumnSpacing="5">
|
|
<!-- Header spanning 3 columns -->
|
|
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="#1976D2" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="ColumnSpan=3 (Header)" TextColor="White" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<!-- Sidebar spanning 2 rows -->
|
|
<Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="#388E3C" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="RowSpan=2 (Sidebar)" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
|
|
</Border>
|
|
<!-- Content cells -->
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Content 1" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="2" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Content 2" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="2" Grid.Column="1" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Content 3" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="2" Grid.Column="2" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Content 4" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Mixed Sizing -->
|
|
<Label Text="Mixed Sizing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
<Label Text="Mixed: 60px | Star | Auto | 60px" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="60,*,Auto,60" ColumnSpacing="5" BackgroundColor="#F5F5F5">
|
|
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
|
|
</Border>
|
|
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Star (fills remaining)" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="Auto" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Column="3" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
|
|
<Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Nested Grids -->
|
|
<Label Text="Nested Grids" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
|
|
<Label Text="Outer grid contains two nested 2x2 grids" FontSize="12" TextColor="{StaticResource TextSecondary}" />
|
|
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10" BackgroundColor="#E0E0E0" Padding="10">
|
|
<!-- Nested Grid 1 -->
|
|
<Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
|
|
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="8" StrokeThickness="0">
|
|
<Label Text="A" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#90CAF9" Padding="8" StrokeThickness="0">
|
|
<Label Text="B" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#64B5F6" Padding="8" StrokeThickness="0">
|
|
<Label Text="C" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#42A5F5" Padding="8" StrokeThickness="0">
|
|
<Label Text="D" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
<!-- Nested Grid 2 -->
|
|
<Grid Grid.Row="0" Grid.Column="1" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
|
|
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#C8E6C9" Padding="8" StrokeThickness="0">
|
|
<Label Text="1" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#A5D6A7" Padding="8" StrokeThickness="0">
|
|
<Label Text="2" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#81C784" Padding="8" StrokeThickness="0">
|
|
<Label Text="3" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#66BB6A" Padding="8" StrokeThickness="0">
|
|
<Label Text="4" FontSize="10" HorizontalTextAlignment="Center" />
|
|
</Border>
|
|
</Grid>
|
|
<Label Grid.Row="1" Grid.Column="0" Text="Outer Grid Row 1" HorizontalOptions="Center" />
|
|
<Label Grid.Row="1" Grid.Column="1" Text="Spans both columns" HorizontalOptions="Center" />
|
|
</Grid>
|
|
|
|
<BoxView HeightRequest="20" />
|
|
|
|
</VerticalStackLayout>
|
|
</ScrollView>
|
|
</ContentPage>
|