How to set the perfect corner radius for the image inside a XfxCardView in xamarin forms? - image

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.
This is the UI I need and I have marked the Image
This is the result I'm getting
.
This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" Margin="0" Padding="0" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Source="restaurantimage1.jpg" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output
There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>


Try setting the is clipped to bounds property as true in your Grid's xaml
<Grid RowSpacing="0" IsClippedToBounds="True">


I fixed it by changing the margin of my frame. This is my code now
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>

Related

Parts of UI vanishing when debugging xamarin project on own device

I am building an app, and the debugging works fine when I use the emulator and it all looks the way I want it to.
Because I am using a barcode scanner, I started debugging on my own android device instead, but then most of my UI in one of some of the pages vanishes. (see pics)
I can't find any similar problems when I google (although that might be my poor google skills).
Here is on my device when its all vanished
Here is what it is suppose to look like
<?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="TergeoAppUI.Views.RegisterInventoryPage"
xmlns:vm="clr-namespace:TergeoAppUI.ViewModels"
xmlns:ZXing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms" xmlns:model="clr-namespace:Tergeo.Models;assembly=Tergeo.Models"
x:DataType="vm:RegisterInventoryViewModel"
Title="{Binding Title}">
<StackLayout>
<Grid Padding="0,5,0,0" ColumnSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button
ImageSource="barcode.png"
Text="Scanna"
BackgroundColor="#AAC0AA"
BorderColor="Black"
BorderWidth="3"
HeightRequest="200"
Grid.Row="1"
Grid.Column="2"
Grid.RowSpan="1"
Margin="70,10,10,10"
Command="{Binding GoToScanCommand}"
/>
<Entry
Grid.Row="1"
Grid.ColumnSpan="3"
Margin="20,30,160,5"
Placeholder="EAN, PLU..."
VerticalOptions="FillAndExpand"
Completed="{Binding OnEanEntryCompletionCommand}"
Text="{Binding Ean}"
Keyboard="Numeric"
/>
</Grid>
<Label Margin="30,2" FontSize="Medium" Text="{Binding ArticleName}"/>
<StackLayout HeightRequest="200">
<Grid Padding="2" VerticalOptions="Fill" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Row="1"
Margin="30,2"
FontSize="Medium"
Text="{Binding RetailPrice, StringFormat='Utpris: {0:N}'}"/>
<Entry
Placeholder="Antal"
Grid.Row="2"
Grid.ColumnSpan="2"
Grid.Column='0'
Margin="20,0,20,0"
FontSize="Medium"
Text="{Binding Quantity, StringFormat='Antal: {0:N}'}"/>
<Entry
Grid.ColumnSpan="2"
Margin="0,0,30,0"
Placeholder="Låda"
Grid.Row="2"
Grid.Column="2"
FontSize="Medium"
Text="{Binding Box, StringFormat='Låda: {0:S}'}"
Completed="{Binding OnRegistrationCompletedCommand}"/>
</Grid>
</StackLayout>
<!-- List with all the inventoryregistration for this specific list -->
<ListView
BackgroundColor="White"
ItemsSource="{Binding InventoryList}"
HasUnevenRows="True"
SelectionMode="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ArticleName -->
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="0"
Grid.Row="0">
<Label
TextColor="Black"
FontFamily="PTC55F.ttf#ptc55f"
Text="{Binding ArticleName}"
FontSize="Small"/>
</StackLayout>
<!-- Article Supplier -->
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="1"
Grid.Row="0"
Grid.ColumnSpan="2">
<Label
TextColor="Black"
FontFamily="PTC55F.ttf#ptc55f"
Text="{Binding Supplier}"
FontSize="Small"/>
</StackLayout>
<!-- Article Ean -->
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="0"
Grid.Row="1">
<Label
FontFamily="PTC55F.ttf#ptc55f"
Margin="0,5,0,5"
Text="{Binding Ean}"
FontSize="Small"/>
</StackLayout>
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="0"
Grid.Row="1">
<Label
FontFamily="PTC55F.ttf#ptc55f"
Margin="0,5,0,5"
Text="{Binding Plu}"
FontSize="Small"/>
</StackLayout>
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2">
<Label
FontFamily="PTC55F.ttf#ptc55f"
Margin="0,5,0,5"
Text="{Binding Quantity, StringFormat='Antal: {0:N}'}"
FontSize="Small"/>
</StackLayout>
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="4"
Grid.Row="0"
Grid.ColumnSpan="2">
<Label
FontFamily="PTC55F.ttf#ptc55f"
Margin="0,5,0,5"
Text="{Binding Box, StringFormat='Låda: {0:S}'}"
FontSize="Small"/>
</StackLayout>
<StackLayout
Padding="10,0"
x:DataType="model:InventoryInfoModel"
Grid.Column="4"
Grid.Row="1"
Grid.ColumnSpan="2">
<Label
FontFamily="PTC55F.ttf#ptc55f"
Margin="0,5,0,5"
Text="{Binding StorageName, StringFormat='Hyllplats: {0:S}'}"
FontSize="Small"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

Easy fix, apparently the default color on all text is white when you debug on an android device, so all I did was add PlaceholderColor or textcolor to all the labels/entries.

Xamarin.Forms: calculating listview height wrong?

Why is only half of the text being displayed in the labels at the bottom?
This is my xaml. The listview area is 300, and each listview row is 100 (set in <On Platform="Android">100</On>).
Each ViewCell has 4 rows, with each row being 25, for a total of 100 (the listview row height).
So I don't understand why only half of the text at the bottom is displayed, or why the space taken up by row 0 & 1 of column 2 isn't exactly half of the total height.
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="100"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1" x:Name="listSection" HeightRequest="300">
<ListView x:Name="ListView_Pets">
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="Android">100</On>
</OnPlatform>
</ListView.RowHeight>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Label Text="Name" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
<Label Text="Address" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
<Label Text="Price1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="2"/>
<Label Text="Price2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="2"/>
<Label Text="Tag1" Grid.Row="0" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<Label Text="Tag2" Grid.Row="1" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<StackLayout Grid.Row="3" Grid.Column="0">
<StackLayout Orientation="Horizontal" >
<Label Text="Text1" FontSize="10" VerticalTextAlignment="Start" TextColor="Black" />
<Label Text="Text2" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
<Label Text="Text3" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
</StackLayout>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Here's the screenshot:

This is because of the Grid inside your ViewCell has a RowSpacing and ColumnSpacing defaults. To override this, just set <Grid RowSpacing=0 ColumnSpacing=0>

Vertiical Scrollview not working in xamarin forms.?

I'm trying to scroll the xfxCardview in Xamarin Forms. But it is not scrolling. This is my code
<ScrollView Orientation = "Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Premera restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Pesto restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Bodhami Road, 6" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />
<Label Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="3" Text="No available" TextColor="Blue" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
<Label Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Hero" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
</StackLayout>
</ScrollView>
I don't know what is wrong with my code I'm setting orientation as vertical also I'm setting VerticalOptions as fill and expand. Will the scroll view work or should I put the XfxCardview inside a Listview. This is the how my current UI looks like
and the UI doesn't scroll to the bottom.

In Android, the issue is due to the card height. Three cardviews are aligned perfectly with the screen. That's the reason, you are not seeing scrollview in Android. Scrollview functionality will be available only if the the content inside scrollview is greater than scrollview height. To solve this, try the below solution. Add add more cardviews, you will see the scrollview. Another solution is, I've added height as 300 to the scrollview. You can test and modify based on your requirement.
<ScrollView HeightRequest="300" Orientation = "Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Premera restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Pesto restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Bodhami Road, 6" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />
<Label Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="3" Text="No available" TextColor="Blue" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
<Label Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Hero" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
</StackLayout>
</ScrollView>

Your xaml looks ok, try check few things:
that you don't have a forgotten custom renderer for scrollview with disabled scroll included in android project
check that it scrolls without elevations set, might be a bug
another "bug" i can imagine: looks at the last card: it is possible that it just didn't take its 160 height but just filled the parent with VerticalOptions="FillAndExpand" so there's nothing to scroll. And card's content was clipped with IsClippedToBounds="True" so it didn't Expand the card.

xamarin Forms scrollview

I am trying to create a page in Xamarin forms with two columns and five rows.
Both the columns have images with a label at the bottom and a white background. The image and label need to be in the same stack layout.
Basically each stack layout is a thumbnail redirecting to other pages.
Here is what I've tried:
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
<Image Source="My_concern.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Raise A Concern"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="0">
<Image Source="img_leave_plan.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Leave Plan" ></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="1">
<Image Source="My_Checklist.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Leave Plan"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="1">
<Image Source="img_facilities.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Facilities"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
<Image Source="My_buddies.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="My Buddies"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="2">
<Image Source="SapphireArticles.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Articles"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="3">
<Image Source="policy.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Policies"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="3">
<Image Source="SapphireNews.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="News"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="4">
<Image Source="Compass.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Compass"></Label>
</StackLayout>
</StackLayout>
</Grid>
</ScrollView>
I am getting the error
No property, bindable property, or event found for 'Children'.
What am I doing wrong?

Your stacklayout that is the direct child of grid does not have row or column specified. You are specifying it at a level deeper in which grid is not the parent.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
Also the layout does not looks optimal. You may want to think about refactoring this.
Code without the extra stack layout :
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
<Image Source="My_concern.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Raise A Concern"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="0">
<Image Source="img_leave_plan.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Leave Plan" ></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="1">
<Image Source="My_Checklist.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Leave Plan"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="1">
<Image Source="img_facilities.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Facilities"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
<Image Source="My_buddies.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="My Buddies"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="2">
<Image Source="SapphireArticles.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Articles"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="3">
<Image Source="policy.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Policies"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="3">
<Image Source="SapphireNews.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="News"></Label>
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="4">
<Image Source="Compass.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
<Label Text="Compass"></Label>
</StackLayout>
</Grid>
</ScrollView>

How to expand StackLayout inside Grid in Xamarin Forms?

I have Xamarin Forms app. My page bottom should look like this:
Currently it looks like this:
Problem is that StackLayout doesn't expand to fill space. Here is my xaml:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
How can I expand StackLayout inside Grid? I would like that blue and red backgrounds touch in the middle.

You set the StackLayouts to CenterAndExpand, which means they will only take up as much room as they need. You should FillAndExpand them like:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>

I know its an old thread - just stumbled on this as part of trying to solve the same problem.
"FillAndExpand" isn't the magic bullet however. You can see in this code that every nested element including the Grid is set to FillAndExpand, yet there's not expanding taking place.
<ScrollView
x:Name="rightScroll"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Yellow">
<FlexLayout
Margin="0"
Padding="0"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
Direction="Column"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceBetween"
VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition x:Name="textColumn"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Aspect="Fill"
HeightRequest="{StaticResource IconSize}"
Source="{Binding Photo.Source}"
VerticalOptions="CenterAndExpand"
WidthRequest="{StaticResource IconSize}" />
<!-- The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around -->
<Frame
Grid.Column="1"
Margin="0"
Padding="3"
BorderColor="Red"
HeightRequest="{StaticResource IconSize}"
HorizontalOptions="FillAndExpand">
<Frame.Triggers>
<DataTrigger
Binding="{Binding HasValidDescription}"
TargetType="Frame"
Value="True">
<Setter Property="BorderColor" Value="Transparent" />
</DataTrigger>
</Frame.Triggers>
<controls:CustomEditor
x:Name="descEditor"
Margin="0,4,0,4"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="Enter description of photo"
PlaceholderColor="Gray"
Text="{Binding Description, Mode=TwoWay}"
TextColor="Black"
Unfocused="CustomEditor_Unfocused" />
</Frame>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>

Resources