Ignore the safe area of the device for the SfListView content?

[Josh Southern]

I have an SfListView in a page where i'm wanting to extent it into the safe areas of the device, however i'm having issues with it.

If i add the the list view into a page, by default it respects the safe areas as shown below. We can see the background of the ListView thats set to pink, or the item template doesn't extend into the safe areas of the device.

<Grid RowDefinitions="*" HorizontalOptions="Fill" VerticalOptions="Fill"  IgnoreSafeArea="False">
        <lv:SfListView
            Background="Pink"
            Grid.Row="0"
            HorizontalOptions="Fill"
            VerticalOptions="Fill"
            ItemsSource="{Binding Countries}"
            Margin="1,0,1,0"
            ItemSpacing="0,8,0,8"
            AutoFitMode="Height">


            <lv:SfListView.ItemTemplate>

                <DataTemplate>
                    <Border StrokeShape="RoundRectangle 24" HeightRequest="700" Background="White" HorizontalOptions="Fill" Margin="12,0,12,12">


                    </Border>
                </DataTemplate>
            </lv:SfListView.ItemTemplate>
        </lv:SfListView >
    </Grid>

If i change the ignore safe area to, IgnoreSafeArea="True" on the parent grid, i expect that the listview would now extend into these safe areas. However what happens is only the background of the list extends (see pink now filling where safe area is), but the content is still cut off, despite the listview taking up all space on the device.

Is it possible to force the content to also extend into these safe areas?
We don't use a tab view in our application, so the bottom safe area is often exposed. It looks poor when the content of our SfListView is clipped at the bottom .

[Suthi Yuvaraj]

Hi Josh Southern,

We are currently validating the issue with comparing the behaviour at our end,We will update you with further details on or before February 22, 2024. We will appreciate your patience until then.

Regards,

Suthi Yuvaraj

[Suthi Yuvaraj]

Josh Southern,

We have checked the reported query “Ignore the safe area of the device for the SfListView content?”, we are able to reproduce the issue at our end. we will consider this cause and log a bug report at our end. we will fix this issue and the fix will be available in our weekly nuget release , which is planned to rolled out on March 19,2024. We will appreciate your patience until then.

you can follow the feedback for further updates.

Feedback link: https://www.syncfusion.com/feedback/51186/unable-to-use-safe-area-in-ios-in-sflistview

  

Note: The provided feedback link is private, you need to login to view this feedback. If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.  

[Suthi Yuvaraj]

Josh Southern,

Upon further analysis ,when we setting IgnoreSafeArea to true, it didn’t set through all the children and we have to manually need to wrap around with Grid and set IgnoreSafeArea to true. Already there is issue logged in framework regarding this

Issue : Safe Area not working for iOS · Issue #19720 · dotnet/maui (github.com)

For SfListView case, We have to set IgnoreSafeArea to true for listView also according to the above issue and workaround. We can be archive by setting IgnoreSafeArea for listview using System.Reflections since it is internal property. Please refer the below image

However if we set it, only the bottom navigation bar overlaps with the listViewItems, not the top bar. That’s because IgnoreSafeArea are Layout class property and is only used in the Layouts class (like Gird and stack layout) mentioned in the github issue below.

Not All Containers have IgnoreSafeArea Property · Issue #16360 · dotnet/maui (github.com)

Sflistview uses ScrollView as its child so we aren’t able to set IgnoreSafeArea to ScrollView, due to ListView behavior we didn’t wrap the scrollview with Gird. Thus it avoids the top and arranges the bottom only, if we scroll the listview it can overlap with the top status bar also.