Xamarin - lower half of view cut off - xaml

Some times when loading a View, it does not fully load on Iphone.. see the screenshot.. (Images are blurred on purpose..) At least, it does not load with proper dimensions. it is usually fixed by rotating the phone to landscape and back.. is there a way to avoid this?
here is my view:
<?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:vm="clr-namespace:GalShare.ViewModel"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:forms="clr-namespace:RedCorners.Forms;assembly=RedCorners.Forms"
mc:Ignorable="d"
x:Class="GalShare.Views.Gallery">
<NavigationPage.TitleView>
<Grid Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="Back" x:Name="Backbutton" Clicked="Backbutton_Clicked"></Button>
<Button Grid.Row="0" Grid.Column="2" Text="Ph. contact info" x:Name="PhInfo" Clicked="PhInfo_Clicked"></Button>
</Grid>
</NavigationPage.TitleView>
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<ContentView x:Name="Messagecontainer" Padding="5">
<forms:Frame2 CornerRadius="8"
HasShadow="True"
ShadowRadius="8"
ShadowColor="Black"
Padding="5"
BackgroundColor="LightGray">
<Label x:Name="Messagefield"></Label>
</forms:Frame2>
</ContentView>
<CollectionView ItemsSource="{Binding Galleries}" Margin="0" x:Name="MyCollection" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="8">
<forms:Frame2 CornerRadius="15"
HasShadow="True"
ShadowRadius="5"
HeightRequest="190"
BackgroundColor="LightGray"
Padding="1">
<StackLayout HorizontalOptions="Start" VerticalOptions="Start" Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage Grid.Row="0" Grid.Column="0" x:Name="myImage" Source="{Binding ThumbUrl}" Aspect="AspectFit" CacheDuration="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" DownsampleToViewSize="False"></ffimageloading:CachedImage>
<StackLayout Padding="0" Margin="0" Spacing="0" Grid.Column="0" Grid.Row="1">
<StackLayout Spacing="0" Margin="0" Padding="5,0,5,0">
<ImageButton HorizontalOptions="Center" Padding="0" WidthRequest="28" Aspect="AspectFit" HeightRequest="28" Margin="0" Source="{Binding likeImg}" x:Name="Favoriteimage" Clicked="LikeButton_Clicked" ></ImageButton>
<!-- <Button CharacterSpacing="0" HorizontalOptions="Center" Padding="0" WidthRequest="50" HeightRequest="28" Margin="0" Text="Like" x:Name="Favoriteimage" Clicked="Button_Clicked" ></Button>-->
</StackLayout>
<Label x:Name="Picname" Text="{Binding ImageName}" IsVisible="{Binding showname}" FontSize="Micro" VerticalOptions="End" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
</StackLayout>
</Grid>
</StackLayout>
</forms:Frame2>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

Because you used AbsoluteLayout as root layout of the ContentPage . If you want to put the ActivityIndicator on the CollectionView , you could use Grid and put them in the same cell .
<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="Red" x:Name="LoadingLayout" Padding="12">
//...
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</Grid>
If the problem still exists, you could share your sample so that I can test it on my side .

Related

xamarin.forms: Images just dont seem to scale up to their container

Someone please help me out here!!
This image is inside a stacklayout, which is inside a scrollview. Thats basically it.
Watch this:
<Image BackgroundColor="Green" x:Name="img_mainPic"/>
Great, my picture is shown in its original size I guess, but left and right there a big green bars - empty space.
Lets add:
VerticalOptions="FillAndExpand"
We get:
Wtf is it doing?? Why are the green bars now at the bottom??
Ok, lets try to add:
Aspect="AspectFill"
Great, thats just so much better. Excatly what I wanted.
Ok but now for realsis:
How hard can it be to scale my image without giving it a fixed height? (because then it would work, but other pictures in others formats wont anymore...)
FULLCODE:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="White"
xmlns:helpers="clr-namespace:Khaled.Helpers"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:abstractions="clr-namespace:Plugin.CrossPlatformTintedImage.Abstractions;assembly=Plugin.CrossPlatformTintedImage.Abstractions"
x:Class="Khaled.Views.Page_FullAd">
<NavigationPage.TitleView>
<Grid>
</Grid>
</NavigationPage.TitleView>
<ContentPage.Content>
<RefreshView IsRefreshing="False" x:Name="refreshview_view" Refreshing="RefreshView_Refreshing">
<ScrollView>
<StackLayout Spacing="0">
<Image Aspect="AspectFill" VerticalOptions="FillAndExpand" x:Name="img_mainPic"/>
<BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
<Grid HeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame x:Name="frame_telephone" Padding="10" HasShadow="False">
<Image Source="btn_telephone" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_gps" Grid.Column="1" Padding="10" HasShadow="False">
<Image Source="btn_gps" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_mail" Margin="2" Grid.Column="2" Padding="10" HasShadow="False">
<Image Source="btn_mail" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_share" Grid.Column="3" Padding="10" HasShadow="False">
<Image Source="btn_share" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" x:Name="frame_heart" Grid.Column="4" Padding="10" HasShadow="False">
<abstractions:TintedImage TintColor="Transparent"
VerticalOptions="Center"
HorizontalOptions="Center"
Source="img_fav"
x:Name="img_heart"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame CornerRadius="0" Padding="5,10,5,5" x:Name="tab1" HasShadow="False" BackgroundColor="White">
<Label FontSize="13"
FontAttributes="Bold"
VerticalOptions="Center"
TextColor="{StaticResource TextBlack}"
HorizontalOptions="Center"
Text="{helpers:Translate DESCRIPTION}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" Padding="5" x:Name="tab2" HasShadow="False" BackgroundColor="{StaticResource TabGray}" Grid.Column="1">
<Label FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource TextBlack}"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="{helpers:Translate ACTIONS}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" Padding="5" x:Name="tab3" HasShadow="False" BackgroundColor="{StaticResource TabGray}" Grid.Column="2" >
<Label FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource TextBlack}"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="{helpers:Translate BOOKSLOT}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
<!--changeable layouts-->
<StackLayout Margin="0,10,0,0" BackgroundColor="White" Padding="15" x:Name="layout1">
<Label TextColor="{StaticResource TextBlack}" x:Name="label_description"/>
<Grid Margin="0,30,0,0" RowSpacing="15" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label_adresse"
VerticalOptions="Center"
FontSize="14"
Grid.Row="0" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_hours"
VerticalOptions="Center"
FontSize="14"
Grid.Row="1" Grid.Column="1"/>
<Label x:Name="label_telephone"
VerticalOptions="Center"
FontSize="14"
Grid.Row="2" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_email"
VerticalOptions="Center"
FontSize="14"
Grid.Row="3" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_web"
VerticalOptions="Center"
FontSize="14"
Grid.Row="4" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Image Source="btn_gps"
Grid.Row="0" Grid.Column="0"/>
<Image Source="btn_clock"
Grid.Row="1" Grid.Column="0"/>
<Image Source="btn_telephone"
Grid.Row="2" Grid.Column="0"/>
<Image Source="btn_mail"
Margin="3"
Grid.Row="3" Grid.Column="0"/>
<Image Source="btn_web"
Grid.Row="4" Grid.Column="0"/>
</Grid>
</StackLayout>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
</ContentPage>
To scale up the image to its container, you can use a frame and binding its height to the image height and then set Aspect="AspectFill".
Below is the XAMl code for your reference:
<ScrollView>
<StackLayout Spacing="0">
<Grid HorizontalOptions="Center" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Padding="0" Margin="0" HeightRequest="{Binding Source={x:Reference image}, Path=Height}" HasShadow="False" Grid.Row="0" Grid.Column="0" VerticalOptions="Start" >
<Image x:Name="image" Source="uk.png" Aspect="AspectFill" HeightRequest="70" />
</Frame>
</Grid>
</StackLayout>
</ScrollView>
Update:
You may need to set the HeightRequest="70" of the image.

xamarin forms - listview - picker - wont align with rows in listview

I have a listview inside a stacklayout...everything appears find on screen... apart from the picker which is about a cm out from the rest of the row...i have tried changing the height of the rows but to no avail...does anyone know why the picker... '0' isnt on the same horizontal alignment as the rest of the rows such as brandName, size and Price.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<ListView x:Name="WineLV" IsVisible="True" VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding WineL}" HeightRequest="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" HorizontalOptions="StartAndExpand" Padding="5">
<Frame OutlineColor="Black" Padding="10" BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="19*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="0" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Img}"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding BrandName}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Grapes}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Sizes}" VerticalOptions="Start" FontSize="Medium"/>
<Picker Grid.Column="3" Grid.Row="0" Title=" 0" x:Name="pPicker" HorizontalOptions="EndAndExpand" ItemsSource="{Binding ListQ}" ItemDisplayBinding="{Binding Value}" SelectedIndexChanged="QuantityC" SelectedItem ="{Binding Selected}"/>
<Label Grid.Column="4" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="EndAndExpand" Text="{Binding Price, StringFormat='£{0:0.00}'}" FontSize="Medium"/>
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
all the others have VerticalOptions="Start" - try changing them to Center, and possibly setting VerticalTextAlignment also

Xamarin Listview cannot scroll to bottm

I modify the sample https://learn.microsoft.com/zh-tw/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/ ,
replace the collectionview with listview . after replacing I found the listview cannot scroll to bottom (there are total 17 items , but only show 6 items)
This error only happen on Android,but it works well on IOS.
How to solve this problem?
<?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:controls="clr-namespace:Xaminals.Controls"
xmlns:data="clr-namespace:Xaminals.Data"
x:Class="Xaminals.Views.MonkeysPage"
Title="Monkeys">
<RelativeLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Grid.RowSpan="2"
Aspect="AspectFill"
HeightRequest="60"
Source="{Binding ImageUrl}"
WidthRequest="60" />
<Label
Grid.Row="0"
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Price}"
VerticalOptions="End" />
<Image Grid.Row="2" Grid.Column="0" Source="bear.png" HeightRequest="25" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator x:Name="activityIndicator" Color="Red" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.33}" />
</RelativeLayout>
</ContentPage>
The solution is change the RelativeLayout to Stacklayout:
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
.....
</ListView>
</StackLayout>
</StackLayout>
If you want to use RelativeLayout, you need to use XConstraint, YConstraint,WidthConstraint,HeightConstraint to layout the child view instead of VerticalOptions="FillAndExpand", HorizontalOptions="FillAndExpand".

xamarin forms - how to tidy up layout - to the bottom right of a listView

the following code shows the following image:
<?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:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
x:Class="TestProjectXamarin.Views.ShoppingCart">
<ContentPage.Content>
<StackLayout>
<ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
<Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
<Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
<Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
<Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label x:Name="TotalForItems" HorizontalTextAlignment="End" VerticalTextAlignment="Start" Margin="20,20" FontSize="Large" FontAttributes="Bold"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I would like the total at the bottom moved to directly below the last subtotal of £50, so there is no gap, i have tried VerticalTextAlignment="Start" but to no avail
Thanks
First off, you should never ever put a ListView in StackLayout. You are just asking for more trouble in terms of layout cycles and redraw timings.
As #Jason has mentioned, you can solve the current problem with ListView's Footer
<?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:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
x:Class="TestProjectXamarin.Views.ShoppingCart">
<ContentPage.Content>
<ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
<Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
<Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
<Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
<Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Label x:Name="TotalForItems" HorizontalAlignment="End" FontSize="Large" FontAttributes="Bold"/>
</ListView.Footer>
</ListView>
</ContentPage.Content>
</ContentPage>
Also don't use TextAlignment properties unless absolutely necessary!

xamarin forms: the page becomes extremely large and I am not sure why

<ContentPage.Content>
<ScrollView>
<StackLayout HorizontalOptions="FillAndExpand" Padding="0">
<Label FontSize="Large" Margin="6" HorizontalTextAlignment="Center" Text="Revisión Técnica" HorizontalOptions="Center"></Label>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="3" Color="Black"></BoxView>
<StackLayout IsVisible="True" Orientation="Horizontal" Padding="0" x:Name="ContainerSec" HorizontalOptions="FillAndExpand">
<StackLayout Padding="0" Spacing="0">
<StackLayout BackgroundColor="LightGray" Padding="0">
<Label Margin="8" VerticalOptions="Center" VerticalTextAlignment="Center" Text="Lista de detalles"></Label>
</StackLayout>
<StackLayout Padding="0" Spacing="0" x:Name="VisualColumnWRP" WidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}" MinimumWidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}">
</StackLayout>
</StackLayout>
<BoxView WidthRequest="3" VerticalOptions="FillAndExpand" Color="{StaticResource type2-color}"></BoxView>
<StackLayout Padding="0" Spacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid x:Name="ElGrid" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition x:Name="row1" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row2" Height="Auto"/>
<RowDefinition x:Name="row3" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row4" Height="Auto"/>
<RowDefinition x:Name="row5" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row6" Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Garantía"></Label>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Garantia"></Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Descripción"></Label>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Description"></Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Detalle"></Label>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Detail"></Label>
<StackLayout Orientation="Horizontal" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Estado"></Label>
<suave:MaterialPicker x:Name="Picker" HorizontalOptions="FillAndExpand" Margin="5"></suave:MaterialPicker>
</StackLayout>
<StackLayout Orientation="Horizontal" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Nota"></Label>
<Editor x:Name="EditorWRP" HeightRequest="100" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="5">
<suave:MaterialButton Clicked="MaterialButton_Clicked" BackgroundColor="LightGray" Text="Agregar evidencia" Margin="5"></suave:MaterialButton>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
<Image x:Name="GalleryImage"></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
the previous code generate the next screen but is height is a lot bigger than the height of the tablet emulator and I don't know why.
The only way that I solved it was declaring the grid with fix height, but even when the window is big and I checked its height value, turns out to be small. Thank you for your help
You can put your scroll view into absolute layout and set bounds and flags - it should work