Add Grids control gallery page

Dreamescaper · May 19, 2022 · 8f40f3a · 8f40f3a
1 parent 128e9ac
commit 8f40f3a
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git a/samples/ControlGallery/Views/Grids.razor b/samples/ControlGallery/Views/Grids.razor
@@ -0,0 +1,67 @@
+@page "/grids"
+
+<ContentPage Title="Grids">
+    <ScrollView>
+        <VerticalStackLayout Spacing="12">
+            <Label Text="Grid with GridCells:" />
+
+            <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,*,*" HorizontalOptions="LayoutOptions.Center" WidthRequest="300">
+                <GridCell Row="0" Column="0" ColumnSpan="2" RowSpan="2">
+                    <Frame BackgroundColor="Colors.DarkRed">
+                        <Label Text="1" HorizontalOptions="LayoutOptions.Center" />
+                    </Frame>
+                </GridCell>
+                <GridCell Row="0" Column="2">
+                    <Frame BackgroundColor="Colors.DarkSeaGreen">
+                        <Label Text="2" HorizontalOptions="LayoutOptions.Center" />
+                    </Frame>
+                </GridCell>
+                <GridCell Row="1" Column="2">
+                    <Frame BackgroundColor="Colors.LightCyan">
+                        <Label Text="3" HorizontalOptions="LayoutOptions.Center" />
+                    </Frame>
+                </GridCell>
+                <GridCell Row="2" Column="0">
+                    <Frame BackgroundColor="Colors.DarkGreen">
+                        <Label Text="4" HorizontalOptions="LayoutOptions.Center" />
+                    </Frame>
+                </GridCell>
+                <GridCell Row="2" Column="1" ColumnSpan="2">
+                    <Frame BackgroundColor="Colors.DarkViolet">
+                        <Label Text="5" HorizontalOptions="LayoutOptions.Center" />
+                    </Frame>
+                </GridCell>
+            </Grid>
+
+            <Label Text="Grid with attached properties:" />
+
+
+            <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,*,*" HorizontalOptions="LayoutOptions.Center" WidthRequest="300">
+                <Frame BackgroundColor="Colors.DarkViolet" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
+                    <Label Text="1" HorizontalOptions="LayoutOptions.Center" />
+                </Frame>
+
+                <Frame BackgroundColor="Colors.DarkRed" Grid.Row="0" Grid.Column="1">
+                    <Label Text="2" HorizontalOptions="LayoutOptions.Center" />
+                </Frame>
+
+                <Frame BackgroundColor="Colors.DarkSeaGreen" Grid.Row="0" Grid.Column="3">
+                    <Label Text="3" HorizontalOptions="LayoutOptions.Center" />
+                </Frame>
+
+                <Frame BackgroundColor="Colors.LightCyan" Grid.Row="@(1)" Grid.Column=@(1) Grid.ColumnSpan="2" Grid.RowSpan="2">
+                    <Label Text="4" HorizontalOptions="LayoutOptions.Center" />
+                </Frame>
+
+                <Frame BackgroundColor="Colors.DarkGreen" Grid.Row="2" Grid.Column="0">
+                    <Label Text="5" HorizontalOptions="LayoutOptions.Center" />
+                </Frame>
+            </Grid>
+
+        </VerticalStackLayout>
+    </ScrollView>
+</ContentPage>
+
+@code {
+
+}
diff --git a/samples/ControlGallery/Views/PlaygroundList.razor b/samples/ControlGallery/Views/PlaygroundList.razor
@@ -4,14 +4,15 @@
     <ScrollView>
         <StackLayout Padding="10" Spacing="12">
             <Label Text="Select a playground..." FontSize="30" FontAttributes="FontAttributes.Bold" />
-            <BoxView Margin="10" HeightRequest="2" Color="Colors.DarkGray" HorizontalOptions="LayoutOptions.FillAndExpand" />
-            <Button Text="Common controls" OnClick="@(async () => await NavigationManager.NavigateToAsync("/commoncontrols"))"></Button>
-            <Button Text="Navigation playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/navigation"))"></Button>
-            <Button Text="Gesture playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/gestureplayground"))"></Button>
-            <Button Text="Skia Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/skia"))"></Button>
-            <Button Text="Picker Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/pickerplayground"))"></Button>
-            <Button Text="Editor Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/editorplayground"))"></Button>
-            <Button Text="CollectionView Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/collectionviewplayground"))"></Button>
+            <BoxView Margin="10" HeightRequest="2" Color="Colors.DarkGray" HorizontalOptions="LayoutOptions.Fill" />
+            <Button Text="Common controls" OnClick="@(async () => await NavigationManager.NavigateToAsync("/commoncontrols"))" />
+            <Button Text="Navigation playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/navigation"))" />
+            <Button Text="Gesture playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/gestureplayground"))" />
+            <Button Text="Skia Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/skia"))" />
+            <Button Text="Picker Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/pickerplayground"))" />
+            <Button Text="Editor Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/editorplayground"))" />
+            <Button Text="CollectionView Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/collectionviewplayground"))" />
+            <Button Text="Grids" OnClick="@(async () => await NavigationManager.NavigateToAsync("/grids"))" />
         </StackLayout>
     </ScrollView>
 </ContentPage>