Telerik Forums / UI for Xamarin
This is a migrated thread and some comments may be shown as answers.
ListView is Blank on iPhone X
7 Answers 67 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 06 Dec 2017, 05:12 PM

When I set the ItemsSource of a ListView in the constructor of a new page, the ListView is completely invisible on an iPhone X. I'm using Xamarin Forms.

Here's what's really strange: if the app is not built for an iPhone X (meaning it runs with black bars at the top and bottom of the screen), the ListView will be visible. However, as soon as the app is setup for the iPhone X (meaning it uses the full screen height), the ListView is invisible.

How can I get around this?

7 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 06 Dec 2017, 07:42 PM
Hello Ron,

I attempted to replicate this, but was unsuccessful. You can try the approach yourself with my test app, it's here on GitHub.

I used the following Page attributes to configure for iPhone X:

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

and here is the result at run-time:




If you open a support ticket here and attach the code you're using, we'll be able to investigate further and see what might be going wrong in your app.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
answered on 07 Dec 2017, 08:14 PM

Thank you for responding. I have added the page attribute as you have it, but I am still getting an invisible ListView.

One more thing that might make this unique is that the page with the ListView is in a modal NavigationPage.

I would appreciate any help on how to resolve this.

0
Ron
Top achievements
Rank 1
answered on 07 Dec 2017, 09:17 PM

Ok my apologies, after getting the latest updates to Xamarin, doing a clean and rebuild, and adding the UseSafeArea attribute, it all works!

Thank you very much!

0
Gayan
Top achievements
Rank 1
answered on 21 Dec 2017, 12:29 PM

Greetings Support members,

I'm facing the same issue although it seems it isn't related to only iPhone X. I've tested both on iOs 7 and 8 and the view is still now being shown, although it works with the vanilla ListView from Xamarin.Forms.

 

While checking other threads I followed the idea of setting the RadListView within a Grid instead of StackLayout and it also failed to show any data on the page. The code is as shown below.

 

It's also worth noting that I'm using Xamarin.Forms with .net standard 2.0 (which gives me an alert of Telerik being restored with .net framework 4.6.1 instead of standard 2.0). My Telerik.UI.for.Xamarin is 2017.3.1214.2 and my Xamarin.Forms is 2.5.0.121934. I'm also using Prism library.

 

XAML:

<?xml version="1.0" encoding="utf-8" ?>
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="StudentLoungeApp.Views.HorarioSalaPage"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true"
             >
 
 
 
    <RelativeLayout
                AbsoluteLayout.LayoutBounds="1, 1, 1, 1"
                AbsoluteLayout.LayoutFlags="All">
        <BoxView
                x:Name="banner"
                BackgroundColor="{StaticResource magenta_2}"
             
                 RelativeLayout.HeightConstraint="{ConstraintExpression
                Type=RelativeToParent,
                Property=Height,
                Factor=0.25}"
                     
            RelativeLayout.WidthConstraint="{ConstraintExpression
                Type=RelativeToParent,
                Property=Width,
                Factor=1}"  />
 
 
        <!-- Icone de Notificações -->
        <Grid
                RelativeLayout.HeightConstraint="{ConstraintExpression
                Type=RelativeToParent,
                Property=Height,
                Factor=0.25}"
                     
            RelativeLayout.WidthConstraint="{ConstraintExpression
                Type=RelativeToParent,
                Property=Width,
                Factor=1}" >
 
            <Grid.ColumnDefinitions>
 
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
 
            </Grid.ColumnDefinitions>
 
            <Grid Grid.Column="2">
                <Image Source="alarmbell.png"
                       HeightRequest="20"
                       WidthRequest="20"/>
                <BoxView
                        x:Name="notificacoes"
                        BackgroundColor="Transparent"
                        HeightRequest="200"
                        WidthRequest="200"/>
            </Grid>
        </Grid>
 
 
        <StackLayout
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                Orientation="Horizontal"
                 
                RelativeLayout.WidthConstraint="{ConstraintExpression
                Type=RelativeToParent,
                Property=Width}"
                 
                 
            RelativeLayout.YConstraint="{ConstraintExpression
                Type=RelativeToView,
                ElementName=banner,
                Property=Height,
                Factor=1,
                Constant=0}">
 
 
            <telerikDataControls:RadListView
                x:Name="listViewAulas"
                ItemsSource="{Binding Aulas}"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="Fill"
                SelectionMode="Single"
                SelectionGesture="Tap"
                ItemTapped="OnItemTapped">
 
                <telerikDataControls:RadListView.ItemTemplate>
 
                    <DataTemplate>
                        <telerikListView:ListViewTemplateCell>
                            <telerikListView:ListViewTemplateCell.View>
                                <Grid>
 
 
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
 
                                    <Grid Grid.Column="0" Margin="15">
                                        <Label FontSize="Small" Text="{Binding Horario}"  />
                                    </Grid>
 
                                    <Grid  Grid.Column="1" Grid.ColumnSpan="4"  Margin="15">
                                        <StackLayout Orientation="Vertical">
                                            <Label  FontSize="Medium" FontAttributes="Bold" Text="{Binding Disciplina}" />
                                            <Label   Text="{Binding ProfessorSala }" />
                                            <Label   Text="{Binding TemaDaAula}" />
                                        </StackLayout>
                                    </Grid>
 
 
                                </Grid>
                            </telerikListView:ListViewTemplateCell.View>
                        </telerikListView:ListViewTemplateCell>
                    </DataTemplate>
 
                </telerikDataControls:RadListView.ItemTemplate>
 
                <telerikDataControls:RadListView.GroupDescriptors>
                    <telerikListView:PropertyGroupDescriptor PropertyName="Grupo"/>
                </telerikDataControls:RadListView.GroupDescriptors>
                <telerikDataControls:RadListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="#C1C1C1">
                            <Label Text="{Binding }" TextColor="#303030" FontSize="Medium" HorizontalOptions="Center"/>
                        </Grid>
                    </DataTemplate>
                </telerikDataControls:RadListView.GroupHeaderTemplate>
 
            </telerikDataControls:RadListView>
 
        </StackLayout>
    </RelativeLayout>
 
</ContentPage>

 

C#

using Prism.Navigation;
using Prism.Services;
using StudentLoungeApp.Interfaces.AppServices.Aulas;
using StudentLoungeApp.Models.Entidades.Aula;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
 
namespace StudentLoungeApp.ViewModels
{
    public class HorarioSalaPageViewModel : ViewModelBase
    {
        private readonly IPageDialogService _pageDialogService;
        private readonly IHorarioSalaAlunoAppService _horarioAulaAlunoAppService;
 
        public HorarioSalaPageViewModel(INavigationService navigationService,
            IPageDialogService pageDialogService,
            IHorarioSalaAlunoAppService horarioAulaAlunoAppService)
            : base(navigationService)
        {
            _pageDialogService = pageDialogService;
            _horarioAulaAlunoAppService = horarioAulaAlunoAppService;
            Aulas = Aulas ?? new ObservableCollection<HorarioAulaAluno>();
        }
 
        public override async void OnNavigatingTo(NavigationParameters parameters)
        {
            base.OnNavigatingTo(parameters);
 
            var aulas = await _horarioAulaAlunoAppService.ObterHorarioDoDia();
 
            foreach (var aula in aulas)
            {
                Aulas.Add(aula);
            }
        }
 
        private ObservableCollection<HorarioAulaAluno> _aulas;
        public ObservableCollection<HorarioAulaAluno> Aulas
        {
            get { return this._aulas ?? _aulas ; }
            set { SetProperty(ref _aulas, value); }
        }
 
        public async Task ObterDetalhesAula(HorarioAulaAluno model)
        {
            var navigationParams = new NavigationParameters();
            navigationParams.Add("model", model);
            await NavigationService.NavigateAsync("DetalheAulaAlunoPage", navigationParams, null, true);
        }
    }
}
0
Gayan
Top achievements
Rank 1
answered on 21 Dec 2017, 12:32 PM
Sorry for the double posting. I noticed the RelativeLayout came with AbsoluteLayout properties which was a later change in the xaml. Removing those also didn't fix the issue.
0
Lance | Manager Technical Support
Telerik team
answered on 22 Dec 2017, 06:06 PM
Test-iPhoneX.zip
Hello Gayan,

Looking at your XAML, you still have the RadListView inside a StackLayout. 

Demo

I'v built a demo based off your code, find it attached. Here is the relevant change I made:

<RelativeLayout
        AbsoluteLayout.LayoutBounds="1, 1, 1, 1"
        AbsoluteLayout.LayoutFlags="All">
 
    <BoxView
            x:Name="banner"
            BackgroundColor="{StaticResource magenta_2}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"  />
 
    <!-- Icone de Notificações -->
    <Grid
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
 
        <Grid Grid.Column="2">
            <Image Source="alarmbell.png"
                       HeightRequest="20"
                       WidthRequest="20"/>
            <BoxView
                        x:Name="notificacoes"
                        BackgroundColor="Transparent"
                        HeightRequest="200"
                        WidthRequest="200"/>
        </Grid>
    </Grid>
 
    <Grid
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=banner, Property=Height, Factor=1, Constant=0}">
 
        <telerikDataControls:RadListView
                x:Name="listViewAulas"
                ItemsSource="{Binding Aulas}"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="Fill"
                SelectionMode="Single"
                SelectionGesture="Tap"
                ItemTapped="OnItemTapped">
            <telerikDataControls:RadListView.ItemTemplate>
                <DataTemplate>
                    <telerikListView:ListViewTemplateCell>
                        <telerikListView:ListViewTemplateCell.View>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
 
                                <Grid Grid.Column="0" Margin="15">
                                    <Label FontSize="Small" Text="{Binding Horario}"  />
                                </Grid>
 
                                <Grid  Grid.Column="1" Grid.ColumnSpan="4"  Margin="15">
                                    <StackLayout Orientation="Vertical">
                                        <Label  FontSize="Medium" FontAttributes="Bold" Text="{Binding Disciplina}" />
                                        <Label   Text="{Binding ProfessorSala}" />
                                        <Label   Text="{Binding TemaDaAula}" />
                                    </StackLayout>
                                </Grid>
                            </Grid>
                        </telerikListView:ListViewTemplateCell.View>
                    </telerikListView:ListViewTemplateCell>
                </DataTemplate>
            </telerikDataControls:RadListView.ItemTemplate>
            <telerikDataControls:RadListView.GroupDescriptors>
                <telerikListView:PropertyGroupDescriptor PropertyName="Grupo"/>
            </telerikDataControls:RadListView.GroupDescriptors>
            <telerikDataControls:RadListView.GroupHeaderTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="#C1C1C1">
                        <Label Text="{Binding }" TextColor="#303030" FontSize="Medium" HorizontalOptions="Center"/>
                    </Grid>
                </DataTemplate>
            </telerikDataControls:RadListView.GroupHeaderTemplate>
        </telerikDataControls:RadListView>
    </Grid>
</RelativeLayout>

Here's the result I get at runtime with some sample data for your properties:




Tip for Testing

You can temporarily change the background color fo the RadListView to see where it's being render and how much height you're getting:

<telerikDataControls:RadListView BackgroundColor="Red">

Next Steps

If you're still having difficulty, please update my attached demo so that it replicates the issue. Then open a support ticket here and attach the demo with either a summary of the problem or link to your post in this public forum thread.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Gayan
Top achievements
Rank 1
answered on 03 Jan 2018, 01:30 PM

Hi Lance,

 

sorry for the late reply. It worked like a charm! Thank you very much! :)

Tags
ListView
Asked by
Ron
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Ron
Top achievements
Rank 1
Gayan
Top achievements
Rank 1
Share this question
or