Xamarin Community toolkit : TabViewItem content not rendering inside TabView - xamarin.forms

I am using Xamarin forms version (5.0.0.2515) and Xamarin community toolkit (2.0.4). I have tried to set TabViewItem content a normal label as well as a sample content view but none of them is rendering. Am I missing something or may be doing something wrong or anybody else recently faced similar issue with Xamarin community toolkit TabView.
Emulator Screenshot
Sample code :
<ContentPage.Content>
<ScrollView>
<Grid RowDefinitions="220,Auto,auto,Auto,Auto,150" RowSpacing="5">
<Image
Aspect="Fill"
Source="ocean.jpeg"
HeightRequest="190"
VerticalOptions="Fill"
HorizontalOptions="Fill"/>
<Label
Margin="0,15,20,0"
VerticalOptions="Start"
HorizontalOptions="End"
WidthRequest="30"
FontSize="30"
TextColor="White"
FontFamily="Material"
Text=""/>
<pancakeview:PancakeView Grid.Row="1" Margin="0,-20,0,0" CornerRadius="30,30,0,00">
<Grid RowDefinitions="Auto,Auto,auto,Auto,10,Auto" BackgroundColor="white">
<Label Margin="9,10,6,0" HorizontalOptions="StartAndExpand">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Delhi"
TextColor="Black" />
<Span Text=" " FontSize="14"/>
<Span
FontSize="16"
FontFamily="Material"
Text=""
TextColor="Black" />
<Span
Text=" "
FontSize="Medium"/>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Kasol, Haridwar, Rishikesh"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
Margin="9,0,5,0"
Grid.Row="1"
Text="Monday, 25 July 2022 To Friday, 25 July 2022"
FontSize="11"
TextColor="Black"
HorizontalTextAlignment="Center"
HorizontalOptions="Start"/>
<Label
Margin="9,0,5,0"
Grid.Row="2"
FontSize="Caption"
Text="Safar Partner Id: Safar2022"/>
<StackLayout
Margin="9,0,5,0"
Grid.Row="3"
Orientation="Horizontal"
Spacing="15"
HorizontalOptions="Start"
Padding="5">
<Label
FontFamily="Material"
FontSize="26"
TextColor="Black"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
Text=""
FontSize="26"/>
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
</StackLayout>
<StackLayout Grid.Row="3"
Margin="0,-20,5,5"
HorizontalOptions="End"
Orientation="Vertical"
Spacing="10">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="14"
Text="Rating"
TextColor="Black" />
<Span Text=" 5" FontSize="14"/>
<Span Text=" *" FontSize="15" TextColor="Gold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<pancakeview:PancakeView CornerRadius="10">
<Label Text="View review" BackgroundColor="LightGreen"/>
</pancakeview:PancakeView>
</StackLayout>
<Label Grid.Row="4" BackgroundColor="LightGreen" Opacity="0.7"/>
<Grid Grid.Row="5">
<xct:TabView
TabStripPlacement="Top"
TabStripBackgroundColor="White"
TabStripHeight="40"
TabIndicatorColor="Green"
TabContentBackgroundColor="White">
<xct:TabViewItem
Text="Overview"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Itineary"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Safety and Security"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Terms/Conditions"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</Grid>
</pancakeview:PancakeView>
<pancakeview:PancakeView
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="End"
CornerRadius="10,0,0,10"
HeightRequest="60"
WidthRequest="150"
Margin="0,-70,18,-10">
<StackLayout
BackgroundColor="{AppThemeBinding Dark=Gray,Light=black}" >
<Label Margin="5,5,0,3">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="12"
Text="Rs 4000"
TextColor="White" />
<Span
Text=" 50 % Off"
FontSize="10"
TextColor="Red"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Margin="5,-5,0,0">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="15"
Text="Rs 2000/"
TextColor="White" />
<Span
Text=" Per Person"
TextColor="White"
FontSize="Caption"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</pancakeview:PancakeView>
</Grid>
</ScrollView>
</ContentPage.Content>

Related

CollectionView: EmptyView content not shown

I have a bug in the page display using a listview so I started migrating from listview to collectionview, but...
This is the XAML code with the collection View, I dont know why when the ItemSource dont have any data, the empty view is not shown.
<StackLayout Style="{StaticResource PageLayout}">
<StackLayout VerticalOptions="CenterAndExpand" IsVisible="{Binding LoadingIndicator}">
<ActivityIndicator IsRunning="True" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand" IsVisible="{Binding ShowContent}">
<CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" Style="{StaticResource CollectionViewChecklistDefault}">
<CollectionView.Header>
<StackLayout HeightRequest="5">
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Margin="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="25" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="33*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding APP_ID}" IsVisible="False"/>
<BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="8" Grid.ColumnSpan="3" Style="{StaticResource ListBox}"/>
<Image Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Style="{StaticResource ListImage}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#343a40"></FontImageSource>
</Image.Source>
</Image>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding OBSERVATION_TYPE_NAME}" Style="{StaticResource ListLabelBold}"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DATE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:'}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DATE, StringFormat=' \{0:dd MMM yyyy}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[COMPANY], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding COMPANY_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[WORKPLACE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding WORKPLACE_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[SECTOR], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding SECTOR_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[FOLLOW_UP_DEPARTMENT], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding FOLLOW_DEPARTMENT_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DESCRIPTION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DESCRIPTION, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Traductions[CLOSE_OBSERVATION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListValueGreenEnd}" />
<Image Grid.Row="7" Grid.Column="2" Aspect="AspectFit" Style="{StaticResource ListImageArrow}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#7ca04b"></FontImageSource>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="{Binding Traductions[THERE_ARE_NO_OBSERVATIONS], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListNotItemsFound}"/>
<Label Text="TEST"/>
</StackLayout>
</CollectionView.EmptyView>
</CollectionView>
</StackLayout>
</StackLayout>
This is how it shows with collection view (empty). I put an extra label with TEST
This is how it has to be
The root cause of the issue you faced lays in usage of CollectionView.Header. But that's not your mistake. It is a bug of CollectionView: EmptyView does not appear when Header is used.
It had been already reported to Xamarin.Forms developers. You can track the progress here.
I did some experiments. The only way I can get this symptom to happen is if {Binding ShowContent} fails to return True.
I believe the problem isn't the CollectionView. Its the visibility of the surrounding StackLayout.
To verify:
Replace IsVisible="{Binding ShowContent}" with IsVisible="True".
If that makes EmptyView show up, then check these possible causes:
BindingContext. (In a comment, you show what looks like correct code. Double-check.)
Proper declaration of ShowContent, to inform XAML of changes:
// Start "true", so InitializeComponent will begin with it there.
private bool _showContent = true;
public bool ShowContent {
get => _showContent;
set {
_showContent = value;
OnPropertyChanged();
}
}
If you have code that sets ShowContent, verify that you have set it to true.

How to only let ONE row expand?

I'm currently have this list that shows the title on the left and the information on the right of the list and i have a total of 4 columns going ("title" "info" "title" "info"). However I want only ONE row of the info to span from the second column to the fourth column but doing Grid.Columnspan="3" on that particular row did not work as it messed up the grid. Any fix for this?
Code:
<Grid Grid.Column="0"
ColumnDefinitions="0.6*,0.7*,0.5*,0.5*">
<!--Title-->
<Grid Grid.Column="0"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<Label Grid.Row="3" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="MACHINE NO"/>
<Label Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SERIAL NO"/>
<Label Grid.Row="5" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CUSTOMER NO"/>
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL 1"/>
<Label Grid.Row="7" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="ADD ADDRESS"/>
<Label Grid.Row="8" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="NOTE"/>
<Label Grid.Row="9" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="RECEIVE BY"/>
<Label Grid.Row="10" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="CONTACT NO"/>
</Grid>
<!--info-->
<Grid Grid.Column="1"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
<Label Grid.Row="3" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="MACHINE AB"/>
<Label Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SN0000-002"/>
<Label Grid.Row="5" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="P02000054"/>
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL NOTE 1"/>
<Label Grid.Row="7" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text=""/>
<!--Span Grid.Row="8" row to the 4th col-->
<Label Grid.Row="8" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="THIS IS FOR TESTING MC ONLY"/>
<Frame Grid.Row="9" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="SITI"/>
</OnPlatform.Android>
</OnPlatform>
</Frame>
<Frame Grid.Row="10" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="0163456789"/>
</OnPlatform.Android>
</OnPlatform>
</Frame>
</Grid>
<Grid Grid.Column="2"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL 2"/>
<Label Text="CURRENCY SIGN" Grid.Row="9" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</Grid>
<Grid Grid.Column="3"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL NOTE 2"/>
<Frame Grid.Row="9" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="$" />
</OnPlatform.Android>
</OnPlatform>
</Frame>
</Grid>
</Grid>
You've defined "a grid inside a grid". The OUTER grid has columns. The INNER grid has rows. Then you tried to make an INNER ROW span COLUMNS. This won't work, because the INNER grid doesn't have columns.
What you want instead is a SINGLE grid, that is two-dimensional (has rows and columns):
<Grid ColumnDefinitions="0.6*,0.7*,0.5*,0.5*" RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<!--Title-->
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Column="0" Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Column="0" Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<!--info-->
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Column="1" Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
</Grid>
Now you can use Grid.ColumnSpan on a single row.
NOTE: Given that you are using ColumnSpan, on certain row(s), it MIGHT be sensible to organize the lines of XAML differently. This will have the exact same result, it just may make it easier to see what is happening in each row:
<Grid ColumnDefinitions="0.6*,0.7*,0.5*,0.5*" RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<Label Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
</Grid>
Entirely up to you which arrangement makes more sense.

Xamarin forms design looks compressed in iphone 5s

I have xamarin forms app.I have a screen which looks nice on iphone 6.But in Iphone 5 , it look like compressed.How to solve this design issue? In bigger devices the design works fine.
My XAML
<Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,2">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="invoiceby.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Invoice Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<Grid.RowDefinitions>
<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 Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoice No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="InvoiceNumber" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Customer" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="CustomerName" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="SoldBy" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold On" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="SoldOn" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoiced By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="InvoicedBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand"
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Referred By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="ReferredBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Current Carrier" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="CurrentCarrier" MaxLines="1" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Grid Grid.Row="1">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,7">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="tracking.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Tracking Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Tracking No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding TrackingNo}" x:Name="TrackingNo" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Product Name" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding ProductName}" x:Name="ProductName" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Comments" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding InvoiceComments}" x:Name="Comments" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Refund" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Refund}" x:Name="Refund" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Quantity" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Qty}" x:Name="Quantity" TextColor="White" VerticalTextAlignment="Center" MaxLines="1" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Frame Grid.Row="2" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" HasShadow="False" CornerRadius="7" BackgroundColor="Transparent" BorderColor="Transparent" Margin="10,2,10,2" Padding="5">
<Frame BackgroundColor="Transparent" HasShadow="False" HorizontalOptions="FillAndExpand" BorderColor="Green" IsClippedToBounds="True" Padding="0" Margin="10,0,10,0">
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS" Value="35" />
<On Platform="Android" Value="40" />
</OnPlatform>
</Frame.CornerRadius>
<Grid >
<Image Source="dialerbg2.png" Aspect="AspectFill" HeightRequest="30"></Image>
<Grid BackgroundColor="Transparent" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<Image Source="cellphone.png" HorizontalOptions="Start" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Grid.Column="0" Text="Phone" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="LightBlue" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Label Grid.Column="1" Text=":" VerticalTextAlignment="Center" TextColor="White" FontSize="Small">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Label x:Name="PhoneNumber" Grid.Column="2" Text="+919605209575" VerticalTextAlignment="Center" TextColor="White" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Image Source="caller.png" HorizontalOptions="EndAndExpand" Grid.Column="3"></Image>
</Grid>
</Grid>
</Frame>
</Frame>
</Grid>
How to make this similar on every screen size? Should I add scrollview? Iam bit confused. Any help is appreciated.
You should wrap your design within a ScrollView.
In smaller devices your list will not have sufficient space to display all elements, so it will resize and adjust to fill the available space.
can you give me some guidlines about setting diffrent text sizes
according to device screen size? I think that will solve my problem
For example:
nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;
// 5, 5s, SE, 5C 320 * 568
nfloat iphone5sHeight = 568;
if (screenSize <= iphone5sHeight)
{
//set the fontSize
}
else {
//set the fontSize for higher screen
}
You can have a look at these two threads for more idea: different-uifont-sizes-for-different-ios-devices-in-swift and how-to-ios-item-and-font-sizes-scaling-as-screen-size

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.

Autosizing images in xamarin forms layouts

i'm very new to xamarin forms so, sorry if i ask obvious question.
I need to build a frame with labels and pictures within. It should look like the following
By now i tried this:
<Frame OutlineColor="#2e5982"
BackgroundColor="#2e5982"
HorizontalOptions="Fill"
Grid.Column="0"
Margin="0">
<Frame.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label x:Name="LbSecsHead" Font="Arial" TextColor="White" Text="Status" HorizontalOptions="Center"/>
<Grid HorizontalOptions="Fill" VerticalOptions="Fill">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="0">
<StackLayout Orientation="Horizontal" BackgroundColor="Accent">
<Image x:Name="SignalSec6" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOff.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
<Label Font="Arial" TextColor="White" Text="6" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="1">
<StackLayout Orientation="Horizontal">
<Image x:Name="SignalSec5" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOn.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
<Label Font="Arial" TextColor="White" Text="5" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</Frame.Content>
</Frame>
The frame is inside a grid column of an outer layout, and here i just limited to the first two icons since result is the same for multiple identical items stacked vertically. Regardless of many tryouts i've done with Horizontal and Vertical options i always obtain this:
The frame sizing with respect to outer layout is correct but not the elements inside. Strange think (at least to me) is that picture looks like being outside of the stacklayout as can be seen by the pink background of the layout. Basically i need the pictures to autofit the layout.
Any hint would be appreciated
Thanks
You'll need to use Span :
Spans – configure elements to span across multiple rows or columns.
<Label Text="SEC" FontSize="40" HorizontalOptions="CenterAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="6" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="4" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="2" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="0" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="5" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="3" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="1" FontSize="30" TextColor="Gray" />
</StackLayout>
</Grid>

Resources