kylecorver kylecorver - 3 months ago 9
C# Question

Page painting over titlebar in ios

Aloha,
I am having troubles with the way, my Xamarin Forms app is presented in iOS (phone and tablet). As the title says, the content of my page is painted over the top main titlebar:

ios example picture

The Root Page of the app is a TabbedPage. Inside the TabbedPage there is a ContentPage, that displays the overlapping content:

<?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="App.Page1"
<StackLayout HorizontalOptions="Center">
<Label FontSize="25"
HorizontalOptions="Center"
FontAttributes="Bold"
Text="Top Produkte" />
<More Content ... />
</StackLayout>
</ContentPage>


The Android and Windows Phone Versions are working properly.

What do I have to do, to avoid this?

Answer

Use Device.OnPlatform to alter per OS type:

Xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page"
             Padding="20, 0, 0">
             ~~~~~
</ContentPage>

Code:

// only add padding on top of page on iOS device 
page.Padding = new Thickness (0, Device.OnPlatform(20,0,0), 0, 0);

Ref: https://developer.xamarin.com/guides/xamarin-forms/platform-features/device/

Ref: https://developer.xamarin.com/api/member/Xamarin.Forms.Device.OnPlatform/

Comments