Grid System in Xamarin - xamarin

I am really new to Xamarin and I want to create 4 rows and the first one covers the whole screen, the second one has 5 columns, the third one has 4 columns and the last one has 2 columns. Currently, it looks like this:
So how can I make this screen proper with the grid system? Is there an efficient way to do it? Here is my code:
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0"
Grid.ColumnSpan="5"
Color="Red" />
<Label Grid.Row="0"
Grid.ColumnSpan="5"
Text="Table"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Color="CornflowerBlue" />
<Label Grid.Row="1"
Text="1x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="1"
Grid.Column="1"
Text="2x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="2"
Text="3x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="3"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="3"
Text="4x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="4"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="4"
Text="+"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Color="CornflowerBlue" />
<Label Grid.Row="2"
Text="Page 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Page 2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="2"
Grid.Column="2"
Text="Page 3"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="3"
Color="DarkSlateBlue" />
<Label Grid.Row="2"
Grid.Column="3"
Text="Page 4"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="3"
Grid.ColumnSpan="2"
Color="Red" />
<Button Grid.Row="3" Text="Cancel"
Grid.ColumnSpan="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Background="Red"/>
<BoxView Grid.Row="3"
Grid.Column="2"
Grid.ColumnSpan="2"
Color="Green" />
<Button Grid.Row="3" Text="Place Order"
Grid.Column="2"
Grid.ColumnSpan="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Background="Green"/>
</Grid>

There are many ways to achieve this ,we can use Grid,RelativeLayout etc to contain our controls.
Of course, Grid is a good layout to achieve this just as you have used, and we can also use inner layouts simplify the codes in the external grid.
For example, we can use the following code to replace Label 1x ,Page 1 and two BoxView with property :Color="CornflowerBlue". This way the code looks less scattered and simpler.
<StackLayout Grid.Row="1" Grid.RowSpan="2" BackgroundColor="Yellow" >
<Label
HeightRequest="50"
VerticalTextAlignment="Center"
Text="1x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label
HeightRequest="50"
VerticalTextAlignment="Center"
Text="Page 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
Note:
Of course, there's more than one way. Use internal layouts to make code leaner. Depending on your idea, you can modify your code as much as you like.

Related

Xamarin, How can i contain the first batch of list of rows and columns with a border, like group them together?

I've been trying to put border on these text and the only way i can is taking off grid on every row so now it has borders but then the grid frame is off. I can't differentiate which part is from row1 or the beginning of list.
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" >
<ListView.ItemTemplate>
<!-- from the post.cs -->
<DataTemplate>
<ViewCell >
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions > <!-- 8 rows -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<!-- endrow1 -->
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- endrow1 -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
what i want
If you want to separate out your item as like group than you can use SeparatorColor and its visibility.
Instead of 2 boxview you can also use one grid as wrapper and using ColumnSpacing and RowSpacing.
<ListView x:Name="postListView" SeparatorVisibility="Default" HasUnevenRows="True" ItemsSource="{Binding Items}" SeparatorColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" Padding="1,2,1,0">
<Grid HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Yes, you can use BoxView to achieve this function, try the following code :
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="2" RowSpacing="0" BackgroundColor="Black">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<!-- thin separator -->
<BoxView Color="Black" Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- thick separator -->
<BoxView Color="Black" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
The effect is as follows:
use a BoxView overlaid on your Grid to simulate a separator
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<! thin separator -->
<BoxView Color="Black" Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<! thick separator -->
<BoxView Color="Black" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>

Xamarin forms create table

I need to create a table, using list view in xamarin forms. I am able to create list view with five columns. But I can't able to give header for the columns and lines. If anyone know how to create the table structure with headers please help me. Thanks in advance.
This is my source code for table[Header and Listview]
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Padding="40,10,10,40" Spacing="0">
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
<StackLayout Orientation="Horizontal" Spacing="40">
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<controls:CheckBox></controls:CheckBox>
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
<StackLayout Padding="40,10,10,40" HeightRequest="200" Grid.Row="1" Spacing="0">
<ListView ItemsSource="{Binding ChildRecords}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<!-- <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>-->
<StackLayout Orientation="Horizontal">
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15"/>
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Typically what I like to do is create a Grid above the ListView for a Header, and then create ViewCells containing Grids within the ListView with the same column widths.
As an example:
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Heading 1" />
<Label Grid.Column="1" Text="Heading 2" />
<Label Grid.Column="2" Text="Heading 3" />
</Grid>
<ListView ItemsSource="{}" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0" Text="{Binding data1}" />
<Label Grid.Column="1" Margin="0" Text="{Binding data2}" />
<Label Grid.Column="2" Margin="0" Text="{Binding data3}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Note also the ListView comes with a Header, which is useful if you want the header to scroll with the items in the ListView. Have a look at this documentation: Customizing ListView Appearance
If you want a quick/professional looking way, you can try Synfucion DataGrid custom control for Xamarin. They are free to use if your company earn less than 1 millions.
you can use Grid for that purpose make the first row of the grid as the header, you can easily change the style on the header only. Here is the sample yo create 3 rows and two column
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ContentPage.Content>
<ScrollView VerticalOptions="Fill" HorizontalOptions="Fill">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" RowSpacing="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Entry Name" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="1" Text="Entry Date" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="2" Text="Enty Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="3" Text="Transaction Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="4" Text="Cashflow " BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="5" Text="Particular" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="6" Text="VoucherNumber" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="7" Text="LedgerFolio" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="8" Text="Amount" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="9" Text="PurchaseInvoice" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="10" Text="Credit Or Debit" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<ListView x:Name="ContentListview" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="11" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Label Grid.Column="0" Text="{Binding EntryName}" TextColor="Black" />
<Label Grid.Column="1" Text="{Binding EntryDate}" TextColor="Black" />
<Label Grid.Column="2" Text="{Binding EntyType}" TextColor="Black" />
<Label Grid.Column="3" Text="{Binding TransactionType}" TextColor="Black" />
<Label Grid.Column="4" Text="{Binding Cashflow}" TextColor="Black" />
<Label Grid.Column="5" Text="{Binding Particular}" TextColor="Black" />
<Label Grid.Column="6" Text="{Binding VoucherNumber}" TextColor="Black" />
<Label Grid.Column="7" Text="{Binding LedgerFolio}" TextColor="Black" />
<Label Grid.Column="8" Text="{Binding Amount}" TextColor="Black" />
<Label Grid.Column="9" Text="{Binding PurchaseInvoice}" TextColor="Black" />
<Label Grid.Column="10" Text="{Binding CreditOrDebit}" TextColor="Black" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ScrollView>
</ContentPage.Content>
This is what I did, and the picture below is its outcome.Xamarin form result. Sorry, cannot show my code behind.

Grid rows overlap on Android but not on iOS

I am using a Grid Layout to make a registration form. I have a Grid which contains two rows. The first row is an image, the second row is another Grid and has the problem that on Android the entries (which are in a StackLayout) overlap the button, but this doesn't make sense because the grid should never overlap its other rows. Indeed, it works on iOS.
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
My suggestion to fix your issue would be to start by simplifying your layout because you have extra nested views inside of grids when one single Grid could probably be used for the entire thing. For example:
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.ColumnSpan="2" Source="blue_background.png" Aspect="Fill" />
<Image Grid.ColumnSpan="2" Source="icon.png" VerticalOptions="Center" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="Unisciti a Youni!" FontSize="Large" FontAttributes="Bold" TextColor="#174668" VerticalOptions="Center" HorizontalOptions="Center"/>
<Entry Grid.Row="2" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegName}" Placeholder="Nome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="3" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegSurname}" Placeholder="Cognome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="4" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegEmail}" Placeholder="Email" Keyboard="Email" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="5" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPassword}" Placeholder="Password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="6" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPasswordConfirm}" Placeholder="Conferma password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Button Grid.Row="7" Grid.ColumnSpan="2" Command="{Binding RegisterCommand}" Text=" Registrati " TextColor="White" BackgroundColor="#3A8FDA" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Grid.Row="8" Text="Sei già registrato?" FontSize="Small" VerticalOptions="Center" HorizontalOptions="End" />
<Button Grid.Row="8" Grid.Column="1" x:Name="LoginSwitchButton" Command="{Binding LoginSwitchCommand}" Text="Passa al login" VerticalOptions="Center" HorizontalOptions="Start" FontSize="Small" TextColor="#45BFEE" BackgroundColor="Transparent" />
</Grid>
Then from there I'd adjust the row heights and spacing to match your designs accordingly.
Just change your root container layout to ScrollView
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
</ScrollView>
Put your Grid in ScrollView

How can I stop my labels going on top of one another?

Here is my XAML:
<Grid x:Name="emptyGrid" Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80*" />
<RowDefinition Height="20*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
<Label x:Name="emptyLabel1" FontSize="18" XAlign="Center" TextColor="Gray" />
<Label x:Name="emptyLabel2" FontSize="18" XAlign="Center" TextColor="Gray" />
<Label x:Name="emptyLabel3" FontSize="18" XAlign="Center" TextColor="Gray" />
</Grid>
All my 2-5 line labels appear on top of each other but what I would like is for them to evenly fill out the space given to them:
Use a StackLayout which will lay them down next to each other horizontally or vertically and set VerticalOptions so that they fill the space they're given:
<Grid Grid.Row="0" Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout>
<Label x:Name="emptyLabel1" FontSize="18" XAlign="Center" TextColor="Gray" VerticalOptions="FillAndExpand" />
<Label x:Name="emptyLabel2" FontSize="18" XAlign="Center" TextColor="Gray" VerticalOptions="FillAndExpand" />
<Label x:Name="emptyLabel3" FontSize="18" XAlign="Center" TextColor="Gray" VerticalOptions="FillAndExpand" />
</StackLayout>
</Grid>

show datePicker in Xamarin.Forms when click Frame Layout

I am doing an application using Xamarin.Forms. There I need to show a datePicker when clicks on a Frame layout. For that purpose I have done this.
xaml part
<Frame Margin="15,0,15,5" HasShadow="false" OutlineColor="{StaticResource TextColorBlue}" BackgroundColor="White" x:Name="selectDate" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<DatePicker x:Name="datePicker" IsVisible="false" DateSelected="Handle_DateSelected" TextColor="Maroon" />
<Label Text="Date" FontAttributes="Bold" FontSize="20" HorizontalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<BoxView HorizontalOptions="FillAndExpand" BackgroundColor="Silver" HeightRequest="1" />
<Grid RowSpacing="1" ColumnSpacing="1" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Saturday" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="May" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="20" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="2017" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
</Grid>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped_DatePicker" />
</Frame.GestureRecognizers>
</Frame>
cs part
void Handle_Tapped_DatePicker(object sender, System.EventArgs e)
{
Debug.WriteLine("Handle_Tapped_DatePicker");
if (datePicker.IsFocused)
{
Debug.WriteLine("Yes, datePicker is focused");
datePicker.Unfocus();
}
datePicker.Focus();
}
void Handle_DateSelected(object sender, Xamarin.Forms.DateChangedEventArgs e)
{
Debug.WriteLine("e.NewDate: " + e.NewDate.ToString());
}
But nothing happening here. The datePicker is not showing. I am testing on iOS simulator. Please help me on this.
Thankfully I got the answer after some searches.
The thing is that, You need to bring the focus of datePicker through the device main UI thread. I have changed my code like this.
Device.BeginInvokeOnMainThread(() =>
{
if (datePicker.IsFocused)
datePicker.Unfocus();
datePicker.Focus();
});

Resources