title: Addressing Different Screen Resolutions In Xamarin.Forms? Scaling Elements?
body: <p>I'm new to Xamarin mobile development and I've been working on my first Xamarin.Forms cross platform application. </p>
  
  <p>At it's current state, the UI looks perfect on my Huawei Nexus, however, sadly there's a problem.</p>
  
  <p>During the development and testing, debugging process so far I've been <strong>only</strong> using iPhone 6 Plus and Nexus 7 emulators and Nexus 6P as a physical device <strong>assuming</strong> (to my mistake) that Xamarin will take care of scaling everything to devices with smaller screens, however, that turned out to be completely false.</p>
  
  <p>The moment I attempted to run the application on an emulator with smaller screen, say iPhone 4/5, the UI completely broke down and looked out of place (reference image: <a href="http://i.imgur.com/bSMQcuW.png" rel="nofollow">http://i.imgur.com/bSMQcuW.png</a> ), and now I'm left wondering, exactly what I did wrong.</p>
  
  <p>The idea of UI in given picture is the following: Grid which contains of Rows containing nested Grid which contains Label and ButtonGroup (XLabs).</p>
  
  <pre><code>var Grid = new Grid
  {
      HorizontalOptions = LayoutOptions.Fill,
      ColumnDefinitions =
      {
          new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
          new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) }
      }
  };
  
  var TextLabel = new Label 
  {
      VerticalOptions = LayoutOptions.CenterAndExpand, 
      HorizontalOptions = LayoutOptions.Start, 
      FontSize = 18, TextColor = Color.Black 
  };
  
  var VarButtonGroup = new ButtonGroup
  {
      IsNumber = true,
      Rounded = true,
      ViewBackgroundColor = Color.White,
      BorderColor = Color.White,
      OutlineColor = Color.White,
      BackgroundColor = Color.FromHex("#0099cc"),
      TextColor = Color.White,
      SelectedTextColor = Color.White,
      SelectedBackgroundColor = Color.Black,
      SelectedBorderColor = Color.White,
      SelectedFrameBackgroundColor = Color.White,
      HorizontalOptions = LayoutOptions.EndAndExpand,
      VerticalOptions = LayoutOptions.Center,
      Padding = new Thickness(10),
      Items = RadioButtonValues,
      Scale = 1,
      SelectedIndex = -1
   };
  </code></pre>
  
  <p>I know that you can customize the code to be platform specific using Device.OnPlatform() however that does not seem to appear to fix anything. </p>
  
  <p>Xamarin.Forms given documentation only shows the differences between platforms as far as the scaling goes (iOS/Android/WinPhone), however it does not explain how one goes on about addressing phones with multiple of different screen sizes/resolutions - or perhaps I've missed it.</p>