Listview using IOS Safearea

[Rhys Gordon]

Hello,

Is there a way to disable the way that the ListView always allows for the safe area on newer IOS devices.

In the below example the image (headerImage) doesn't line up with the partially transparent boxview in the listview's header template in IOS, but it does on Android. I believe this is due to the IOSSafeArea, is there a way to disable this functionality.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             mc:Ignorable="d"

             x:Class="TakeawayApp.Views.ItemsPage"

             Title="{Binding Title}"

             Shell.NavBarIsVisible="False"

             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 

             ios:Page.UseSafeArea="False"

             x:Name="BrowseItemsPage">

    <Grid BackgroundColor="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="200"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Image x:Name="headerImage" Source="burgertable.jpg" VerticalOptions="FillAndExpand" Aspect="AspectFill" />

        <syncfusion:SfListView x:Name="ItemsListView"

                               Grid.Row="0"

                               Grid.RowSpan="2"

                               ItemSize="100"

                               ItemsSource="{Binding Items}"

                               VerticalOptions="FillAndExpand"

                               AutoFitMode="DynamicHeight"

                               HeaderSize="200">

            <syncfusion:SfListView.HeaderTemplate>

                <DataTemplate>

                    <BoxView BackgroundColor="Blue" Opacity="0.3" HeightRequest="200"/>

                </DataTemplate>

            </syncfusion:SfListView.HeaderTemplate>

            <syncfusion:SfListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <Grid Margin="0,10,0,10" BackgroundColor="White">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto"/>

                                <RowDefinition Height="Auto"/>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"/>

                                <ColumnDefinition Width="3*"/>

                            </Grid.ColumnDefinitions>

                            <Frame Grid.RowSpan="2" 

                                   Grid.Column="0" 

                                   CornerRadius="15" 

                                   Padding="0"

                                   IsClippedToBounds="True"

                                   Margin="5,0,0,0"

                                   VerticalOptions="FillAndExpand">

                            <Image Source="{Binding ImageUrl}"

                                    VerticalOptions="FillAndExpand"

                                    Aspect="AspectFill"

                                    HeightRequest="70"/>

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" TextColor="Black" FontAttributes="Bold"/>

                            <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}"/>

                        </Grid>

                    </ViewCell>

                </DataTemplate>

            </syncfusion:SfListView.ItemTemplate>

        </syncfusion:SfListView>

    </Grid>

</ContentPage>

[Lakshmi Natarajan]

Hi Rhys, 

 

Thank you for using Syncfusion projects. 

 

We have checked the reported query “ListView using iOS SafeArea” from our end. Based on the code snippet provided, we could able to reproduce the scenario at our side. We would like to inform you that ListView will be layout in the SafeArea as expected. But, when UseSafeArea is false, the padding will not be added to the Image. The reported issue can be resolved in two ways, 

 

You can set UseSafeArea as True to overcome the reported issue.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"               xmlns:local="clr-namespace:ListViewXamarin"               xmlns:d="http://xamarin.com/schemas/2014/forms/design"               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"               xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"               mc:Ignorable="d"               x:Class="ListViewXamarin.MainPage"               Title="ListView"               Shell.NavBarIsVisible="False"               xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"               ios:Page.UseSafeArea="True"               x:Name="BrowseItemsPage">

Set page padding in OnAppearing override method.

protected override void OnAppearing()  {      base.OnAppearing();        var safeInsets = On<iOS>().SafeAreaInsets();      safeInsets.Top = 50;      Padding = safeInsets;  }

 

You can also refer the following documentation regarding the same for more reference, 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout 

 

We hope this helps. Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan