Xamarin.Forms Entry Text is added but not showing - xamarin.forms

I'm making a Pin Validator when starting the Application. This is my code:
<ContentPage.Content>
<StackLayout Spacing="10" VerticalOptions="Center" Margin="10,0,10,0" >
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="1.3*" />
<RowDefinition Height="*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowSpacing>
<OnPlatform x:TypeArguments="x:Double" Android="20" iOS="20" />
</Grid.RowSpacing>
<Grid.ColumnSpacing>
<OnPlatform x:TypeArguments="x:Double" Android="20" iOS="20" />
</Grid.ColumnSpacing>
<Frame BorderColor="#006BE6" BackgroundColor="WhiteSmoke" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" >
<Entry TextColor="#006BE6" FontSize="48" IsPassword="True" x:Name="Output" Text="{Binding Pin}" HorizontalOptions="Center" VerticalOptions="Center" IsReadOnly="True">
<Entry.Behaviors>
<behaviors:EntryLengthValidatorBehavior MaxLength="4" />
</Entry.Behaviors>
</Entry>
</Frame>
<Button TextColor="#006BE6" Text="1" Grid.Row="3" Grid.Column="1" Command="{Binding LoadNumberCommand}" CommandParameter="1" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke" />
<Button TextColor="#006BE6" Text="2" Grid.Row="3" Grid.Column="2" Command="{Binding LoadNumberCommand}" CommandParameter="2" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="3" Grid.Row="3" Grid.Column="3" Command="{Binding LoadNumberCommand}" CommandParameter="3" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="4" Grid.Row="4" Grid.Column="1" Command="{Binding LoadNumberCommand}" CommandParameter="4" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="5" Grid.Row="4" Grid.Column="2" Command="{Binding LoadNumberCommand}" CommandParameter="5" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="6" Grid.Row="4" Grid.Column="3" Command="{Binding LoadNumberCommand}" CommandParameter="6" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="7" Grid.Row="5" Grid.Column="1" Command="{Binding LoadNumberCommand}" CommandParameter="7" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="8" Grid.Row="5" Grid.Column="2" Command="{Binding LoadNumberCommand}" CommandParameter="8" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="9" Grid.Row="5" Grid.Column="3" Command="{Binding LoadNumberCommand}" CommandParameter="9" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="C" Grid.Row="6" Grid.Column="1" Command="{Binding LoadNumberCommand}" CommandParameter="C" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="0" Grid.Row="6" Grid.Column="2" Command="{Binding LoadNumberCommand}" CommandParameter="0" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
<Button TextColor="#006BE6" Text="OK" Grid.Row="6" Grid.Column="3" Command="{Binding LoadNumberCommand}" CommandParameter="OK" BorderColor="#006BE6" BorderWidth="1" BackgroundColor="WhiteSmoke"/>
</Grid>
</StackLayout>
</ContentPage.Content>
Everything is working fine just text in the Entry is not showing. My idea is add 4 digit pin . Binding Pin get values from the numbers but not showing in the Entry. I don't know what is the problem. Someone help?
In the ViewModel in added Pin and Command
public string pin;
public string Pin
{
get { return pin; }
set
{
if (pin != value)
{
pin = value;
SetProperty(ref pin, value);
OnPropertyChanged("Pin");
}
}
}
and the Command
LoadNumberCommand = new Command(execute: async (value) => await ExecutePinElement(value));

Set your Entry's IsReadOnlyproperty to false
or
chage the HorizontalOptions to "FillAndExpand" and Add HorizontalTextAlignment="Center"

Related

scrollview doesn't scroll up enough to see the rest of views xamarin.forms

i wrote this code for a registration page. in some phones, the screen doesn't fit for all the views so i used a scrollview so that the user could scroll down through them. the problem i'm facing is that the scrollview doesn't scroll enough upwards. the button at the end doesn't appear. here is my xaml code:
<?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="ALNahrainAlphaApp.RegisterPage"
xmlns:controls="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp"
>
<ContentPage.Content>
<ScrollView Orientation="Vertical">
<ScrollView.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#0d98ba"
Offset="0.2" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</ScrollView.Background>
<StackLayout>
<Grid>
<StackLayout>
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,160">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="20" Margin="0,5" />
<controls:CustomEntry
Grid.Row="0"
x:Name="id"
HorizontalOptions="FillAndExpand"
Margin="10,5"
TextColor="Black"
Placeholder="ID"
FontSize="16"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="1" Margin="0,5"/>
<controls:CustomEntry
Grid.Row="1"
x:Name="firstname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
FontSize="16"
Placeholder="First Name"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="2" Margin="0,5"/>
<controls:CustomEntry
Grid.Row="2"
x:Name="lastname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Last Name"
PlaceholderColor="Gray"
FontSize="16"
/>
<Frame CornerRadius="20" Grid.Row="3" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="3"
x:Name="role"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Role"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="4" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="4"
x:Name="user_name"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Username"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="5" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="5"
x:Name="password"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Password"
PlaceholderColor="Gray"
/>
<StackLayout Orientation="Horizontal" Grid.Row="6">
<Label Text="Allow Access" TextColor="Black" FontSize="16" HorizontalOptions="Center" VerticalOptions="Center" Margin="15,5"/>
<Switch
ThumbColor="Black"
OnColor="White"
x:Name="appaccess"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="40,0"
/>
</StackLayout>
</Grid>
</Frame>
<Button CornerRadius="50" Text="Submit" FontSize="Medium" BackgroundColor="White" TextColor="Black" FontFamily="audiofont" x:Name="save" HeightRequest="60" WidthRequest="140" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,-85" Clicked="save_Clicked"/>
</StackLayout>
<Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Start" Padding="-2" BorderColor="White" Margin="20,5,20,0">
<Image HeightRequest="150" WidthRequest="150" x:Name="userprofile" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Frame>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
i tried different things, i put the scrollview inside a contentview but i didn't work. what am i doing wrong?
You can try to add property RowDefinitions and define two row for the outer grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<!--other code-->
<Grid>
You can refer to the following code:
<ContentPage.Content>
<ScrollView Orientation="Vertical">
<ScrollView.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#0d98ba"
Offset="0.2" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</ScrollView.Background>
<StackLayout>
<Grid>
<!--add two row here-->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<StackLayout>
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,160">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="20" Margin="0,5" />
<Entry
Grid.Row="0"
x:Name="id"
HorizontalOptions="FillAndExpand"
Margin="10,5"
TextColor="Black"
Placeholder="ID"
FontSize="16"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="1" Margin="0,5"/>
<Entry
Grid.Row="1"
x:Name="firstname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
FontSize="16"
Placeholder="First Name"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="2" Margin="0,5"/>
<Entry
Grid.Row="2"
x:Name="lastname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Last Name"
PlaceholderColor="Gray"
FontSize="16"
/>
<Frame CornerRadius="20" Grid.Row="3" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="3"
x:Name="role"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Role"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="4" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="4"
x:Name="user_name"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Username"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="5" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="5"
x:Name="password"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Password"
PlaceholderColor="Gray"
/>
<StackLayout Orientation="Horizontal" Grid.Row="6">
<Label Text="Allow Access" TextColor="Black" FontSize="16" HorizontalOptions="Center" VerticalOptions="Center" Margin="15,5"/>
<Switch
ThumbColor="Black"
OnColor="White"
x:Name="appaccess"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="40,0"
/>
</StackLayout>
</Grid>
</Frame>
<Button CornerRadius="50" Text="Submit" FontSize="Medium" BackgroundColor="White" TextColor="Black" FontFamily="audiofont" x:Name="save" HeightRequest="60" WidthRequest="140" HorizontalOptions="Center" Margin="0,-85" />
</StackLayout>
<Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Start" Padding="-2" BorderColor="White" Margin="20,5,20,0">
<Image HeightRequest="150" WidthRequest="150" x:Name="userprofile" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="grass.png"/>
</Frame>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Change the Margin
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,90">

Move buttons on the bottom and give more space for editor

I am struggling with two things in xamarin forms layout. As shown on the picture i need to make more space for edidor control (highlited as 1) as this will be the place for user's comment. I would like to extend it to the right (max width). Second thing is i need to move buttons to the bottom which i thought i could solve that by settiung VerticalOptions="End" in the <Grid Grid.Row ="4" (higlighted as 2). How can i solve both things up? Below also full xaml code.
Xaml:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MobileAppXamarinForms.Views.Order.OrderHatModifyPage"
Title="{Binding SelectedHatOrder.OrderId, StringFormat='Numer zamówienia: {0}'}">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row ="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedHatOrder.OrderId, StringFormat='NUMER ZAMÓWIENIA: {0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="2"
FontSize="15"
HorizontalOptions="Start"
Text="KLIENT:"
VerticalOptions="Center" />
<Label
Grid.Column="3"
Padding="5,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedClient.Value, StringFormat='{0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="4"
HorizontalOptions="StartAndExpand"
Text="NA DZIEŃ:"
VerticalOptions="Center" />
<DatePicker
Grid.Column="5"
Date="{Binding SelectedTargetDate, Mode=TwoWay}"
Format="dd.MM.yyyy"
HorizontalOptions="StartAndExpand" />
</Grid>
<Grid Grid.Row ="1" Margin="5" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<!--szerokosc, aby zmiescila sie nazwa butli-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="KWOTA:"
TextColor="Gray"
VerticalOptions="Center" />
<Entry
Grid.Column="1"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Kwota"
Text="{Binding SelectedPrice, Mode=TwoWay}" />
<Label
Grid.Column="2"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="3"
FontSize="15"
HorizontalOptions="Start"
Text="ILOŚĆ:"
VerticalOptions="Center" />
<Entry
Grid.Column="4"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość"
Text="{Binding SelectedAmount, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row ="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Komentarz:"
TextColor="Gray"
VerticalOptions="Center" />
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
</Grid>
</Grid>
<Grid Grid.Row ="3" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Typ płatności:"
TextColor="Gray"
VerticalOptions="Center" />
<Picker
Grid.Column="1"
Title="Typ płatności"
FontSize="15"
HorizontalOptions="FillAndExpand"
ItemDisplayBinding="{Binding Value}"
ItemsSource="{Binding PaymentTypes}"
SelectedIndex="{Binding Id}"
SelectedItem="{Binding SelectedPaymentType, Mode=TwoWay}"
VerticalOptions="Center" />
<Label
Grid.Column="2"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Ilość dni:"
TextColor="Gray"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
VerticalOptions="Center" />
<Entry
Grid.Column="3"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość dni"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
Text="{Binding SelectedDaysCount, Mode=TwoWay}" />
</Grid>
<!-- Buttons section -->
<Grid Grid.Row ="4" VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
BackgroundColor="DarkMagenta"
Command="{Binding SaveOrderCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Zatwierdz"
TextColor="White"
HorizontalOptions="FillAndExpand" />
<Button
Grid.Column="1"
BackgroundColor="MediumVioletRed"
Command="{Binding ExitCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Anuluj"
TextColor="White"
HorizontalOptions="FillAndExpand" />
</Grid>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So, as #Jason said in the comments, you have to remove the <StackLayout /> because it prevents the Grid to fill the page.
Thus, for your other issue, I tried to reproduce it.
I've found that if you change the HorizontalOptions of your <Editor /> from CenterAndExpand to FillAndExpand this solves the issue (you can also remove the HorizontalOptions altogether).
So, instead of:
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Try:
<Editor
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Or:
<Editor Grid.Column="1"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
For more about this: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
For good measure, you can also remove Keyboard="Text" since Keyboard's default value is already Text 😉
I hope this solved your issue.
However, if you've got any concerns with my Answer please let me know 🙂

Adding a Frame into a grid from a c# Function that iterates through my data source (Observable collection)

Simply - my binding data will dictate what col / row to put it in..
I dont want to write multiple frame layout code into XAML - but rather write the fame once in page level or app level resource, then generate an instance of this - populate it - and put into the grid specified in the binding.
The bit where it says TASK 1 is the repeating element frame.
<Grid Margin="0" Padding="0" ColumnSpacing="2" RowSpacing="2" IsVisible="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- TASK 1-->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
<!-- TASK 2 -->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="1"
BackgroundColor="LightBlue"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
</Grid>
</grid>
So, from the advisement of Sparsha Bhattarai, I created the frame template that i want to reuse.
FrameTemplate.Xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MMPTaskStats.Views.FrameTemplate">
<ContentView.Content>
<Frame CornerRadius="5" x:Name="task_color"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
<RowDefinition Height="25" />
<RowDefinition Height="1" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Label Text="/ of 12"
x:Name="task_locale"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="Start" />
<Image x:Name="task_icon"
Source="tbt_logo.png"
HeightRequest="60" WidthRequest="50"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0"
VerticalOptions="Center" />
<Label Text="16"
x:Name="task_headline"
Grid.Row="1" Grid.Column="1"
TextColor="White"
FontSize="27"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End" />
<Label Text="/ of 12"
x:Name="task_subline"
Grid.Row="2" Grid.Column="1"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="End"
VerticalOptions="End" />
<Label Text="Files sent"
x:Name="task_status"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End" />
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="White" Margin="0,1,0,-1"></BoxView>
<Label Text="View Info"
Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
VerticalOptions="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="5" Grid.Column="1"
/>
</Grid>
</Frame>
</ContentView.Content>
</ContentView>
Then the codeBehind for it looked like this.
namespace Project.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class FrameTemplate : ContentView
{
public FrameTemplate(string locale,string headline, string subHeadline, string icon, Color bgcolor, string status) : this()
{
//Here i have initialized the view from constructor, but you can simply set the binding of the view and set the properties. Do look into it. You can just as easily use the view in xaml but it will require a parameterless constructor. So, binding is important.
task_locale.Text = locale;
task_headline.Text = headline;
task_subline.Text = subHeadline;
task_icon.Source = icon;
task_color.BackgroundColor = bgcolor;
task_status.Text = status;
}
public FrameTemplate()
{
InitializeComponent();
}
}
}
THEN, in the page / view I want this to appear
var frame = new FrameTemplate("UK TP Stats", "999999", "/ of 999999", "tick.png", Color.Green, "Sent");
Grid.SetColumn(frame, 0);
Grid.SetRow(frame, 0);
MainGrid.Children.Add(frame);
This worked for me, which was great, I can now replicate this to do similar layouts etc as needed.
My Xamarin.Forms project is a Master/Detail template too, just in case anybody wanted to know :)

Xamarin Forms: Not able to create a left aligned 2 column grid

I'm trying to create a xamarin form using the grid and stackLayout as below. On both the scenarios the second column control is not starting uniformly aligned vertically.
XAML using GRID control:
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
<Label Text="MANAGE PROFILE" Style="{StaticResource labelTitle}"></Label>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<Grid BackgroundColor="{StaticResource whiteBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="0" Grid.Column="0" Text="AddressLine1" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="2" Grid.Column="0" Text="AddressLine2" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="3" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="4" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="4" Grid.Column="0" Text="Suburb" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="4" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="5" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="6" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="6" Grid.Column="0" Text="State" Style="{StaticResource labelStandard}" ></Label>
<Picker Grid.Row="6" Grid.Column="1" HorizontalOptions="FillAndExpand"
Title="Select" SelectedItem="{Binding State.Value}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>NSW</x:String>
<x:String>WA</x:String>
<x:String>QLD</x:String>
<x:String>SA</x:String>
<x:String>VIC</x:String>
<x:String>TAS</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<BoxView Grid.Row="7" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="8" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="8" Grid.Column="0" Text="Post Code" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="8" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="9" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
</Grid>
XAML using StackLayout,
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}" BackgroundColor="#EFEFF4">
<Label Text="MANAGE PROFILE" Style="{StaticResource labelTitle}"></Label>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="AddressLine1" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="AddressLine1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="AddressLine2" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="AddressLine2" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="Suburb" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="Suburb" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label x:Name="State" Text="State" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Picker x:Name="pickerState" HorizontalOptions="FillAndExpand"
Title="Select" SelectedItem="{Binding State.Value}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>NSW</x:String>
<x:String>WA</x:String>
<x:String>QLD</x:String>
<x:String>SA</x:String>
<x:String>VIC</x:String>
<x:String>TAS</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="Post Code" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="PostCode" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
On both the scenarios the second column is starting based on the text value. Even if I add HorizontalOptions="StartAndExpand", I'm not able to get the all the form controls vertically aligned in the second column to start with.
Getting the UI as below,
I have added both the controls as fo now in XAML. The top section of form is using GRID control. The below repeated section is using the StackLayout control
Please let me know what am I doing wrong here
you have set the column width as "". if you want to vertically align your controls you need to set the column with size like "50" , "50*" or "60*" ,"40*" . it will set the width in %.

Xamarin Forms - IsClipedToBounds on a Grid does not work. Children views are still clipping

I am building a simple keypad for an application and I want to use floating action buttons for the keys. I am laying them in a Grid with a label sitting over them to get the bellow affect.
As you can see, the grid is clipping the shadows despite having the IsClippedToBounds property set to false. I have searched around online and not found much about this. Is it a bug or am I doing something wrong?
Below is the XAML layout.
<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl"
x:Class="CauseMobileWalletMerchant.Views.KeypadView">
<ContentView.Content>
<Grid
BackgroundColor="Transparent"
Margin="0"
IsClippedToBounds="false"
HorizontalOptions="Center"
VerticalOptions="Center"
RowSpacing="0"
ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="75" />
<ColumnDefinition
Width="75" />
<ColumnDefinition
Width="75" />
<ColumnDefinition
Width="75" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="75" />
<RowDefinition
Height="75" />
<RowDefinition
Height="75" />
<RowDefinition
Height="75" />
</Grid.RowDefinitions>
<fab:FloatingActionButtonView
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
Grid.Column="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="7"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="0"
Grid.Column="1"
Margin="0"
ColorNormal="{DynamicResource Primary}"
IsEnabled="true"
HasShadow="true"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="8"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="0"
Grid.Column="2"
Margin="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="9"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="0"
Grid.Column="2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="0"
Grid.Column="3"
Margin="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="CLEAR"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="12"
Grid.Row="0"
Grid.Column="3"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="1"
Grid.Column="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="4"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="1"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="1"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="5"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="1"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="1"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="6"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="1"
Grid.Column="2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="1"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="QR"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="12"
Grid.Row="1"
Grid.Column="3"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="2"
Grid.Column="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="1"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="2"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="2"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="2"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="2"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="3"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="2"
Grid.Column="2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="2"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="FACE"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="12"
Grid.Row="2"
Grid.Column="3"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="3"
Grid.Column="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="0"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="3"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="3"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="00"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="3"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="3"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="-"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="22"
Grid.Row="3"
Grid.Column="2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<fab:FloatingActionButtonView
Grid.Row="3"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<Label
Text="TOTAL"
InputTransparent="true"
FontAttributes="Bold"
TextColor="White"
FontSize="12"
Grid.Row="3"
Grid.Column="3"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</ContentView.Content>
Your are drawing your shadowed buttons inside the Grid canvas. And every button is drawn inside its cell canvas. Its obvious that child wouldn't normally be drawn outside parent canvas.
The solution to you problem, without saying a usual "create a custom renderer" for the grid, is to draw every child over previous children. Then shadows will overlap like you want. So you would need to simulate cells: create a grid for being a container, every button will reside in cell 0,0, but with an appropriate Margin x,y - offsets for not overlapping other buttons. Create offsets at runtime, update them when parent size is changing and you will get it.

Resources