CODEWITHSUNDEEP
xamarinxamarin.iosxamarin.forms
David Barrie
David Barrie

Reputation: 71

Xamarin Forms always get 1px

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.

Upvotes: 1

Views: 526

Answers (2)

David Barrie
David Barrie

Reputation: 71

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.

Upvotes: 2

Gerald Versluis
Gerald Versluis

Reputation: 33993

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.

Upvotes: 2

Related Questions