Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering Layout With Padding - rounding error

Nested layouts in xamarin seem to be biased to the left of the screen. I'm assuming this is a dp to pixel rounding bias or something?

Can anyone confirm, is there a work around or solution?

Although my example uses Absolute layout the problem seems to be on all layouts.

using System;
using Xamarin.Forms;

namespace XamarinTest
{
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
            AbsoluteLayout child = layout;
            AbsoluteLayout.SetLayoutFlags(child, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(child, new Rectangle(0, 0, 1, 1));
            Random rand = new Random();
            for (int i =0;i<100; i++)
            {
                child = addLayout(child, rand) ;
            }

            AbsoluteLayout abs = new AbsoluteLayout();
            AbsoluteLayout.SetLayoutFlags(abs, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(abs, new Rectangle(0, 0, 0.5, 0.5));
            abs.BackgroundColor = Color.Black;
            layout.Children.Add(abs);
        }

        private AbsoluteLayout addLayout(AbsoluteLayout parent, Random rand)
        {
            AbsoluteLayout abs = new AbsoluteLayout();
            AbsoluteLayout.SetLayoutFlags(abs, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(abs, new Rectangle(0,0,1,1));
            abs.Padding = new Thickness(2.0);
            abs.BackgroundColor = new Color(rand.NextDouble(), rand.NextDouble(), rand.NextDouble());
            parent.Children.Add(abs);

            return abs;
        }
    }
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinTest.Page1">
  <AbsoluteLayout BackgroundColor="White" x:Name="layout">

  </AbsoluteLayout>
</ContentPage>

Screen shot (if it uploads):

layout centering problem

like image 770
Ewan Avatar asked Oct 19 '22 09:10

Ewan


1 Answers

I think you are seeing differences in the emulator's rendering vs. an issue with the Forms code running on Android as the DPI of the simulate screen can throw offsets into the mix. ​

iOS Simulator does a great job at rendering at a 1:1 based upon the actual devices' DPI and then down-sampling the display based upon your view settings and your code will always render those StackLayout at the requested position.

If you look at the your code running on two (OS-X-based) emulators using a DPI that divides "cleanly" to the pixels on the physical screen of the emulator:

enter image description here

enter image description here

Versus one that does not:

enter image description here

If you have the paid-version of GenyMotion's emulator, there is a one-2-one scaling option that provides a similar experience as the iOS simulator.

Moral of the story, use physical devices for final checks of your layouts. A great way is to use Xamarin's Test Cloud and add a screenshot capture to each of your app's Form pages

like image 132
SushiHangover Avatar answered Nov 13 '22 03:11

SushiHangover