Xamarin: Tutorial - Page 06

The Layout Grid

The Grid is a layout tool designed to organize the widgets/controls on the screen. It organizes its children into rows and columns of cells. It functions much like an HTML table. The StackLayout can also be used to organize children in a similar fashion however if trying to organize them into a grid like patter then use Grid.

The Grid squeezes its children into smaller spaces truncating them to fit on the screen.

When the width of the columns is set to * (star) it means that they share the width of the screen equally with one another as in the example below.

The height of the Grid below is the height of the page less the Padding for iOS. The stars in the row height means they share the height equally with one another.

The Grid.ColumnSpan and Grid.RowSpan are self explanatory. They basically combine cells destroying the border between them.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="Gray">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
	</ContentPage.Padding>

	<Grid>

		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>

		<Label Text="Silver" BackgroundColor="Silver"
			Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />

		<Label Text="Grid" TextColor="White"
			FontSize="Large"
			Grid.Row="1" Grid.Column="0"
			HorizontalOptions="End" />

		<Label Text="Demonstration" TextColor="White"
			FontSize="Small"
			Grid.Row="1" Grid.Column="1"
			HorizontalOptions="End"
			VerticalOptions="End" />

		<Label Text="Lime" BackgroundColor="Lime"
			Grid.Row="2" Grid.Column="0" />
					
		<Label Text="Fuchsia" BackgroundColor="Fuchsia"
			Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" />

		<Label Text="Red" BackgroundColor="Red"
			Grid.Row="3" Grid.Column="0" />

	</Grid>

</ContentPage>

In this Grid example, the 200, 100 and 100 height values are in device-independent units. The 2* height is twice as high as the * (or 1*). The height of * (or 1*) is the total height of the screen (minus the padding for iOS) minus 400 device-independent units (200 + 100 + 100) minus the height of the Auto height row minus two times the height of itself to account for the 2* height row. The Auto height value is automatically calculated based on the height of all the child elements in that row.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="Gray">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
	</ContentPage.Padding>

	<Grid>

		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<Grid.RowDefinitions>
			<RowDefinition Height="2*" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
			<RowDefinition Height="1*" />
			<RowDefinition Height="200" />
			<RowDefinition Height="100" />
			<RowDefinition Height="100" />
		</Grid.RowDefinitions>

		<Label Text="Silver" BackgroundColor="Silver"
			Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />

		<Label Text="Grid" TextColor="White"
			FontSize="Large"
			Grid.Row="1" Grid.Column="0"
			HorizontalOptions="End" />

		<Label Text="Demonstration" TextColor="White"
			FontSize="Small"
			Grid.Row="1" Grid.Column="1"
			HorizontalOptions="End"
			VerticalOptions="End" />

		<Label Text="Lime" BackgroundColor="Lime"
			Grid.Row="2" Grid.Column="0" />
					
		<Label Text="Fuchsia" BackgroundColor="Fuchsia"
			Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" />

		<Label Text="Red" BackgroundColor="Red"
			Grid.Row="3" Grid.Column="0" />

		<Label Text="Aqua" BackgroundColor="Aqua"
			Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" />

		<Label Text="Purple" BackgroundColor="Purple"
			Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" />

		<Label Text="Blue" BackgroundColor="Blue"
			Grid.Row="6" Grid.Column="0" />

		<Label Text="Green" BackgroundColor="Green"
			Grid.Row="6" Grid.Column="1" />

	</Grid>

</ContentPage>

Creating a Bar Chart using the Grid

With the Grid, a bar chart can be created. It requires some C# coding but it is very simple.

Review the AbsoluteLayout element already covered by this tutorial.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
	</ContentPage.Padding>

	<AbsoluteLayout>

		<!-- Grid occupying entire page. -->
		<Grid x:Name="grid"
				ColumnSpacing="1"
				AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
				AbsoluteLayout.LayoutFlags="All" />

		<!-- Overlay in center of screen. -->
		<Frame x:Name="overlay"
				 OutlineColor="#CCCCCC"
				 BackgroundColor="#404040"
				 Opacity="0"
				 AbsoluteLayout.LayoutBounds="0.5, 0.5, AutoSize, AutoSize"
				 AbsoluteLayout.LayoutFlags="PositionProportional">

			<Label x:Name="label" TextColor="White" FontSize="Large" />

		</Frame>

	</AbsoluteLayout>
 
</ContentPage>

Now the C# code behind file...

In the class constructor, a List of View objects is created and then populated (in a for loop) with 25 BoxView objects. Then the grid.Children.AddHorizontal() method is invoked to add the List of BoxView objects to the grid. The last thing the constructor does is to create a timer to slowly set the opacity of the overlay object. overlay is the x:Name of the Frame.

using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		Random rand = new Random();

		public MainPageXaml()
		{
			InitializeComponent();

			List<BoxView> boxViews = new List<BoxView>();

			TapGestureRecognizer tapGesture = new TapGestureRecognizer();
			tapGesture.Tapped += OnBoxViewTapped;

			//create 25 BoxViews and add them to the List object
			for (int i = 0; i < 25; i++)
			{
				BoxView boxView = new BoxView
				{
					StyleId = (i + 1).ToString(),
					Color = Color.FromRgb(rand.NextDouble(), rand.NextDouble(), rand.NextDouble()),
					HeightRequest = rand.Next(3, 300),
					VerticalOptions = LayoutOptions.End
				};
				boxView.GestureRecognizers.Add(tapGesture);
				boxViews.Add(boxView);
			}

			// Add list of BoxViews to the Grid
			grid.Children.AddHorizontal(boxViews);

			Device.StartTimer(TimeSpan.FromMilliseconds(15), () =>
			{
				overlay.Opacity = Math.Max(0, overlay.Opacity - 0.0025);
				return true;
			});
		}

		void OnBoxViewTapped(object sender, EventArgs args)
		{
			BoxView boxView = (BoxView)sender;
			label.Text = "You tapped on BoxView #" + boxView.StyleId;
			overlay.Opacity = 1;
		}
	}
}

Comment