CODEWITHSUNDEEP
xamlxamarin.ios
Joseph2302
Joseph2302

Reputation: 11

Xamarin forms label positioning

Newbie here. Am adding a label on the top of a page using XAML & Xamarin, but the label is too near the top of the page, so it's obscured by the iPad current time.

XAML code being used is:

    <?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="XamlSamples.HelloXamlPage"
                 Title="XAML + Code Page">
      <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">

        <Label Text="Text here"
               Font="Large"
               TextColor="White"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Style="{DynamicResource TitleStyle}"/>

</StackLayout>

</ContentPage>

Upvotes: 1

Views: 3138

Answers (2)

Timothy James
Timothy James

Reputation: 1102

Change your padding to 

Padding="x, 20, y, z"

In iOS, the height of the status bar is 20 pixels and is included when determining the position on the page (meaning a y location of y is at the top of the status bar and similarly the page). Windows and Android do not include the height of the status bar when determining the location on the page (meaning a y location of 0 is at the bottom of the status bar). It should also be noted that in some situations the status bar may actually be 40 pixels tall (in a call from what I've read).

Suggested use for a cross-platform option is to do something like this:

< ContentPage.Padding >
    <!-- set platform - specific padding
                     iOS needs an additional
                     20px top padding to account for
                     iPhone status bar -->

 < OnPlatform x:TypeArguments ="Thickness"
                   iOS ="0, 20, 0, 0"
                   Android ="0, 0, 0, 0"
                   WinPhone ="0, 0, 0, 0" />
</ ContentPage.Padding >

Note: this padding is being added to your ContentPage tag rather than the StackLayout tag. Code retrieved from here.

Upvotes: 0

Nicollas Braga
Nicollas Braga

Reputation: 821

Take a look on you Stack Padding (Padding="-300,-1,-300,29") it's a little weird, Also, you can add some layout with a padding before

   <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">
<Grid Padding="20 "/>
    <Label Text="Text here"
           Font="Large"
           TextColor="White"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           Style="{DynamicResource TitleStyle}"/>

Upvotes: 1

Related Questions