Xamarin.Forms Scrolling Grid With Relative Sizes - xamarin

Question

I have managed to create a GridView inside a ScrollView that uses 8 rows of row height 250 (Absolute). This was fine until I realised it would not work on screens with different resolutions. How can I create a grid view where there are 8 rows, but each row takes up half the screen so you have to scroll down to see the rest? Using 8 rows of height "*" just puts 8 rows onto the view with no scrolling. I am using xaml but can use c# if necessary.

Answer 1

You can access the device's screen height, so calculate 0.5 * height and set this as row height:
Create a static variable in app.xaml.cs
static public int ScreenHeight;
Then you need to set the value of your variable for iOS and Android.
Android: MainActivity.cs
protected override void OnCreate(Bundle bundle)
{
base.OnCreate (bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
App MyApp = new App();
App.ScreenHeight = (int)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density);
}
iOS: AppDelegate.cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
Now, have a property in the view's ViewModel which accesses ScreenHeight and calculate it to your needs
public int HalfScreenHeight
{
get { return App.ScreenHeight / 2; }
}
Finally, you can your row's height to HalfScreenHeight.
Important: If you allow device rotation for Portrait and LandScape mode on your page, you might need to update the binding according to your needs. You can access the screen's width in the same way.