Develop Reference

Vertically centralize if content fits, scroll otherwise

Here is what my layout looks like:
<template>
<GridLayout rows="auto,*,auto">
<GridLayout row="0" id="topBar" columns="*,*,*">
<!-- my top bar -->
</GridLayout>
<GridLayout rows="*,auto,*" height="100%">
<StackLayout row="0" />
<ScrollView row="1" orientation="vertical">
<StackLayout>
<slot />
</StackLayout>
</ScrollView>
<StackLayout row="2" />
</GridLayout>
<StackLayout row="2">
<!-- my navigation bar -->
</StackLayout>
</GridLayout>
</template>
I want my top bar and navigation bar to take as much height as they need so they can fit their content properly. I want the main content which is a scrollview to take the rest of the height of the page.
Now depending on the screen size, my content either fully fits in the page in which case I want it to be vertically centralized within it's container which is the scrollview taking all the space between the top bar and navigation bar. So in this case there will be some empty space above and below the content, within the scrollview.
or, the content doesn't fully fit within the boundaries of the scrollview in which case The empty space above or below my content within the scrollview should disappear and the content should be scrollable naturally.
This works if the content fits, otherwise it doesn't scroll I think because it sets the height of the scrollview large enough to contain its content so it doesn't overflow anymore. How can I fix this?

Xamarin webview does not fill screen

I am currently creating a Xamarin Forms app that features a webview which has to cover my whole device screen.
Unfortunately I can not figure out how to do it, I always have a white bar underneath, is this a bug? I switched off my navbar, as I do not wan to show that.
I used the hybrid webview as explained here
I already tried using grid, stacklayout and absolute layout,
Update
Already tried ti set padding and margin to 0 in the layout and the webview, does not work either..
my current layout looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:EatyAndroidApp.Controls"
mc:Ignorable="d"
x:Class="EatyAndroidApp.CustomWebViewPage"
NavigationPage.HasNavigationBar="False"
NavigationPage.HasBackButton="False"
BackgroundColor="#313131">
<ContentPage.Content>
<StackLayout HorizontalOptions="Fill" VerticalOptions="Center">
<controls:HybridWebView
x:Name="hybridWebView"
BackgroundColor="#313131"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
which produces me this: (I blurred out the content)
Image
Thank you in advance

Ok, I figured it out, somehow, the webview was not aware of its height and width, I had to manually access it via Javascript and set the new Layout:
Inside
public override async void OnPageFinished(Android.Webkit.WebView view, string url)
just execute
view.EvaluateJavascript("document.documentElement.style.height = screen.height + 'px';", null);

Scroll to the bottom of the view of ScrollView programmatically in Nativescript

I am developing an app where when user click on cardview layout, detail of that view is opened on that card view layout. I have used nativescript ScrollView for scrolling the views. But, when user click on last cardview layout it should scroll to show detail of cardview layout. It does not automatically scrolls to the last card view detail, due to this the detail of the card view is hidden and user have to scroll manually.
I found this Nativescript scroll to bottom of ScrollView programmatically but i am not able to solve my problem. Below is my code for layout.
<ScrollView id="scrollView" #scrollView orientation="vertical" #scrollView (scroll)="onScroll($event)">
<StackLayout row="0" col="0">
<StackLayout *ngFor="let item of items" class="card-view" id="cardViewLayout">
<GridLayout columns="auto, *, auto" rows="auto,auto,auto" (tap)="toggleDetail(#event)">
</GridLayout>
<GridLayout row="3" col="0" colSpan="3" columns=" *, *" rows="auto,auto" id="detailedData" visibility="hidden" class="cardDetail">
<StackLayout row="0" col="0" class="detailDataStack">
</StackLayout>
</GridLayout>
</StackLayout>
</StackLayout>
</ScrollView>
toggleDetail(args){
var scrollView = this.page.getViewById("scrollView")
var offset = this.scrollView.nativeElement.scrollableHeight;
this.scrollView.nativeElement.scrollToVerticalOffset( this.scrollView.nativeElement.offset+ 120, false);
}
As shown in above when user click on card-view class layout, it is toggling cardDetail class. When there is last item in card-view it should scroll automatically to show the details but it don't automatically scrolls.
In toggleDetail() method i tried to get scrollableHeight, add 120 to that height and make it scroll when user in last item but nothing happened.
Playground Sample app for this
ScrollView Sample app Nativescript Playground
Thank you in advance :)

You are suppose to use verticalOffset not just offset.
this.scrollView.nativeElement.scrollToVerticalOffset(this.scrollView.nativeElement.verticalOffset + 120, false);

just use scrollToVerticalOffset and scrollableHeight
const scrollView = page.getViewById('scroll-view');
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);

Layout in ScrollView is updated incorrectly when soft keyboard shows/hides

I have a simple layout which consists of Entry and the Button. The goal is to place Button at the bottom and the Entry in the center of the remaining space. Everything works at start. Here are layout and screenshot.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="ParentAdda.Pages.Test">
<ScrollView x:Name="Qq" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout x:Name="Ww" Orientation="Vertical" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Aquamarine" />
<Entry
FontSize="Medium"
Placeholder="+111111111"
HorizontalOptions="FillAndExpand"
Keyboard="Telephone" />
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Coral" />
<Button Text="Update" Clicked="Button_OnClicked"
HorizontalOptions="Fill"
BorderRadius="20"
BackgroundColor="Lime"
TextColor="White"
FontSize="Large"
FontAttributes="Bold" />
</StackLayout>
</ScrollView>
</ContentPage>
I am also setting WindowSoftInputMode to resize in Android project (in the code, taking into account the bug in Xamarin.Forms when the tag is reset to Pan when set in manifest when using FormsAppCompatActivity)
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
//Remove the status bar underlay in API 21+
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
Window.DecorView.SystemUiVisibility = 0;
var statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
statusBarHeightInfo?.SetValue(this, 0);
Window.SetStatusBarColor(Android.Graphics.Color.Black);
}
}
When Entry gains focus, the page is not resized (though I can scroll to the very bottom when soft keyboard is visible)
When soft keyboard hides the content is resized incorrectly, and occupies just part of the screen.
It looks like the layout process is performed based on bounds before soft keyboard becomes visible/invisible. However, it seems that all Bounds properties (of the Page, ScrollView and StackLayout) as well as ContentSize property of ScrollView has correct numeric values (i traced them in button clicked handler). I tried to call ForceLayout() on different elements in same button clicked handler without luck.
Does anyone know how to fix this issue?

I do think it's how FillAndExpand of VerticalOptions is designed, it is for
element layout when there is excess space available along the Y axis from the parent layout. If multiple children of a layout are set to expand, the extra space is distributed proportionally.
Since you don't have any fixed size, when the keyboard is disappearing, the layout is resized, I guess FillAndExpand will first measure how many extra space along the axis and then distributes the space for the children.
A very simple workaround to solve your issue is to give a fixed size to your StackLayout, but you said
The goal is to place Button at the bottom and the Entry in the center of the remaining space.
If you want to keep the original size here, you can set the height to StackLayout when it is appearing, means override the OnAppearing() method in code behind, for example:
protected override void OnAppearing()
{
base.OnAppearing();
Ww.HeightRequest = Ww.Height;
}

Best Way to add footer view in Xamarin forms list view?

I noticed that Xamarin forms ListView doesn't have a method similar to addFooterView in Android.
I want to add a submit button at the bottom the list.
Whats the best way to achieve this?

You could write your own custom renderer for Xamarin.Forms ListView, and add in the ability to expose the addFooterView in Android perhaps?
This would be the simplest way of extending the support for this on the Android platform specifically.
Update 1
To achieve something that is applicable across all platforms you could customize the cell appearance based on the data it represents.
In Xamarin.Forms you are able to write your own custom Cell implementations that can be used in a ListView or TableView.
Therefore to achieve the 'Load More' effect at the bottom of the ListView, you could add an extra Model item into your collection, with some flag indicating that it is this type of display to be shown, rather than the normal Cell representation of a real Model item.
Evaluating this flag, you would be able to determine whether you should show the 'Load More' custom view or not.
When you are going to add more data, naturally you would remove this item, prior to adding new items, and then also add this 'special case' Model item afterwards.

you can do it the way Pete described or in a non ListView related way. If i had to implement a fixed footer i would put a ListView and a StackLayout into a grid with two rows. The ListView's row has a *asterisk height and the StackLayout an Auto sized height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="1">
<Label Text="Your fixed footer"/>
</StackLayout>
</Grid>
Update
If you need a customizable cell on the bottom of the ListView then you can simply use the Footer property of the ListView.
<ListView ItemsSource="{Binding Items}" HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="Some Titles"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<StackLayout>
<Label Text="Footer of the ListView"/>
</StackLayout>
</ListView.Footer>
</ListView>