CODEWITHSUNDEEP
c#iosuser-interfacexamarinxamarin.forms
Ali123
Ali123

Reputation: 797

xamarin forms stretched views in tablets and big screens

What is the optimal solution to design big screens and tablets? the view looks good on phones but when on tablets or big screens, the buttons and text entries looks stretched and unprofessional.

I can add padding but is there a better solution than that?

I see that the new pre-release of Xamarin forms version 3 doesn't support @medai. But does it account for this issue in another way?

enter image description here

enter image description here

Upvotes: 1

Views: 346

Answers (2)

ColeX
ColeX

Reputation: 14475

The Xamarin.Forms Page class has a SizeChanged event we can use to determine the available screen-size at runtime. We can adjust the UI based on the Width or Height of the screen.

public partial class MainPage : ContentPage
{
   public MainPage()
   {
      InitializeComponent();
     SizeChanged += MainPageSizeChanged;
   }

   void MainPageSizeChanged(object sender, EventArgs e)
   {
      imgMonkey.WidthRequest = Math.Min(this.Width, 400);
   }
}

And Xamarin.Forms provides a static Idiom property on the Device class that we can use to check the device type. 

if (Device.Idiom == TargetIdiom.Phone)
{
    buttonAbout.HeightRequest = 25;
    buttonAbout.WidthRequest = 40;
}
else
{
    buttonAbout.HeightRequest = 40;
    buttonAbout.WidthRequest = 70;
}

Detail refer to Adaptive UI with Xamarin.Forms.

Upvotes: 2

Dara Oladapo
Dara Oladapo

Reputation: 596

You can use VisualStateManager to achieve this task. Find more information on how to get started at https://xamarinhelp.com/visualstatemanager-xamarin-forms-phase-1/

Upvotes: 0

Related Questions