Xamarin Forms always get 1px

Question

As pointed out in this documentation - https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter05/, specifying a height of 1 will give you 1, 2 or 3 pixels depending on the iOS device.

I want to put a separator into my view similar to a hr in HTML. I've done this by adding either a BoxView or StackLayout with a height of 1 and the necessary width.

This means that depending on the device, the separator will not always render at 1px. Is there something I can do to ensure that I will always get 1px for any device?

At the moment all I can think of is to place my content into ListView cells and leverage the native separators provided.

score 2 · Answer 1 · answered Apr 29 '17 at 08:15

2

I think you are interpreting it wrong. Although you might actually get 1, 2 or 3 pixels, the user will see the same thing. This is due to the retina screens. Density will be higher, but the end result will be the same.

This is the same reason that you need to supply all images with the @2x and @3x suffix. The images will physically be bigger, but on iOS they will appear the same.

answered Apr 29 '17 at 08:15

Gerald Versluis

30,492
6
73
100

Proportionally it looks the same, but it's not the thinnest possible line on retina devices. Yes it will always render out a 1 "point" line, but I want a 1 pixel line. I think my question parallels this one for native iOS development - http://stackoverflow.com/questions/23666209/how-do-i-create-a-1px-line-in-interface-builder/34766567#34766567 – David Barrie Apr 30 '17 at 04:33
So, recreate that answer with an effect or custom renderer? :) – Gerald Versluis Apr 30 '17 at 08:34

score 2 · Accepted Answer · edited May 23 '17 at 11:33

Following similar steps to the answer here https://stackoverflow.com/a/26570933/2931055 I ended up defining a global style that uses a static variable set up in the startup of iOS and Android, then defined in my stylekit to programmatically determine the fraction of a point I need for any given device.

In my portable project App.xaml.cs I defined

public static double ScreenDensity { get; set; }

Which needs to get populated independently for iOS and Android.

For iOS, in AppDelegate.cs in FinishedLaunching()

App.ScreenDensity = UIScreen.MainScreen.Scale;

Then for Android, in MainActivity.cs in OnCreate()

App.ScreenDensity = Resources.DisplayMetrics.Density;

UIScreen.MainScreen.Scale and Resources.DisplayMetrics.Density will evaluate to 1.0, 2.0 or 3.0 depending on the device.

In my portable project StyleKit (myApp\Helpers\StyleKit\SytyleKit.cs) I created a static variable to later use in a global style

using Xamarin.Forms;

namespace myApp.Helpers.StyleKit
{
    public class Sizes
    {
        public static double Hairline = 1 / App.ScreenDensity;
    }
}

Then in my global styles (myApp\App.xaml) I create the global style

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myApp.App"
             xmlns:stylekit="clr-myApp.Helpers.StyleKit;assembly=myApp">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="hairlineSeparator" TargetType="StackLayout">
                <Setter Property="BackgroundColor" Value="#ddd" />
                <Setter Property="HeightRequest" Value="{x:Static stylekit:Sizes.Hairline}" />
                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

And finally when I want to use one in a xaml page

<!-- some content -->
<StackLayout Style="{StaticResource hairlineSeparator}"></StackLayout>
<!-- some content -->

Successfully tested on iOS and Android.

Xamarin Forms always get 1px

2 Answers2