Grid Layout in Xamarin Forms

-

A layout containing views arranged in rows and columns.




This is a typical Grid definition in XAML.

<Grid> 
<Grid.RowDefinitions> 
 <RowDefinition Height="2*" />
   <RowDefinition Height="*" /> 
 <RowDefinition Height="200" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions> 
 <ColumnDefinition Width="Auto" />
   <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>   
 <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
 <ContentView Grid.Row="2" Grid.Column="0"/>
  <ContentView Grid.Row="0" Grid.Column="1"/>
 <ContentView Grid.Row="1" Grid.Column="1"/> 
<ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>

The same Grid defined in code looks like this:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
 grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });


 To add items to the grid: In XAML:

<Grid>   
   <--DEFINITIONS...--!> 
       <ContentView Grid.Row="0" Grid.Column="0"/> 
 <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>
   <ContentView Grid.Row="0" Grid.Column="1"/> 
 <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>

In C# code:

var grid = new Grid();
 //DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
 var topRight = new Label { Text = "Top Right" };
 var bottomLeft = new Label { Text = "Bottom Left" };
 var bottomRight = new Label { Text = "Bottom Right" };
 grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
 grid.Children.Add(bottomLeft, 1, 0);
 grid.Children.Add(bottomRight, 1, 1);

For Height and Width a number of units are available.



  • Auto – automatically sizes to fit content in the row or column. Specified as GridUnitType.Auto in C# or as Auto in XAML.
  • Proportional – sizes columns and rows as a proportion of the remaining space. Specified as a value and GridUnitType.Star in C# and as #* in XAML, with # being your desired value.Specifying one row/column with * will cause it to fill the available space.
  • Absolute – sizes columns and rows with specific, fixed height and width values.Specified as a value and GridUnitType.Absolute in C# and as # in XAML, with # being your desired value.



Note: The width values for columns are set as Auto by default in Xamarin.Forms, which means that the width is determined from the size of the children. Note that this differs from the implementation of XAML on Microsoft platforms, where the default width is *, which will fill the available space.

Comments

Post a Comment

Popular posts from this blog

ScrollView in xamarin forms

-
Image
An element capable of scrolling if it's Content requires. ScrollView contains layouts and enables them to scroll offscreen. ScrollView is also used to allow views to automatically move to the visible portion of the screen when the keyboard is showing. Note: ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView. A ScrollView is easy to define. In XAML: <ContentPage.Content> <ScrollView> <StackLayout> <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" /> <Entry /> </StackLayout> </ScrollView> </ContentPage.Content> The same definition in code: var scroll = new ScrollView(); Content = scroll; var stack = new StackLayout(); stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
Read more

Checkbox and RadioButon in xamarin forms

-
Image
Step 1: Install the following plugin : Xamarin.Forms.InputKit Step 2 : Add this line in page deceleration:    xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit" Step 3 : 1 . CheckBox you can use checkbox like that :              <input:CheckBox Text="Option 1" Type="Box" />             <input:CheckBox Text="Hello World I'm Option 2" Type="Check"/>             <input:CheckBox Text="Consetetur eum kasd eos dolore Option 3" Type="Cross"/>             <input:CheckBox Text="Sea sed justo" Type="Star"/> Result : ** checkbox have the following properties : CheckChanged: (Event) Invokes when check changed. CheckChangedCommand: (Command) Bindable Command, executed when check changed. Key: (int) A key you can set to define checkboxes as ID. Text: (string) Text to display description IsChecked: (boo
Read more

Navigation in Xamarin.Forms

-
NavigationPage flow with XAML App.xaml.cs file (App.xaml file is default, so skipped) using Xamrin.Forms namespace NavigationApp { public partial class App : Application { public static INavigation GlobalNavigation { get; private set; } public App() { InitializeComponent(); var rootPage = new NavigationPage(new FirstPage()); GlobalNavigation = rootPage.Navigation; MainPage = rootPage; } } } FirstPage.xaml file <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NavigationApp.FirstPage" Title="First page"> <ContentPage.Content> <StackLayout> <Label Text="This is the first page" /> <Button Text="Click to navigate to a new page" Clicked="GoToSecondPageButtonClicked"/> <Button Text="Click to open the new page
Read more