This is a migrated thread and some comments may be shown as answers.

RadListView not fitting on iOS

2 Answers 146 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Namek
Top achievements
Rank 1
Namek asked on 22 Sep 2016, 08:08 AM

I'm using RadListView for my Xamarin.Forms project, which is targetted to iOS and Android.
The problem is, that on some views, I'm not able to enforce *RadListView* looks "UI fit" on iOS, even using *FillAndExpand* VerticalOptions, packing list to StackLayouts/Grids (also with *FillAndExpand*).

I haven't met anything like that on Android, the problem is only iOS.

When I'm jumping to "standard" Xamarin.Forms *ListView*, list is fitting to the screen on both - iOS and Android.

I'm using latest release of Telerik for Xamarin.Forms - 2016.3.914.

Android:
http://s15.postimg.org/4zvsivh4r/Android.png

iOS:
http://s22.postimg.org/n1cpwstf5/i_OS.png

In short, how the UI is build:

At *app.xaml* side, I've feature called *ContentPresenter* in order to have custom toolbar on top of the screen:

<ControlTemplate x:Key="PageHeaderMenuTemplate">
    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- ###### -->
        <!-- Header -->
        <!-- ###### -->
        <StackLayout Grid.Row="0" HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Orientation="Horizontal" BackgroundColor="Blue">
            <!-- Header components here -->
        </StackLayout>
        <!-- ########### -->
        <!-- Custom View -->
        <!-- ########### -->
        <StackLayout Grid.Row="1">
            <ContentPresenter HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
        </StackLayout>
    </Grid>
</ControlTemplate>

Then, I'm using ContentPresenter - *PageHeaderMenuTemplate* on all views, like:

<ContentView ControlTemplate="{StaticResource PageHeaderMenuTemplate}">
  <Grid RowSpacing="0">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="50"/>
      <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
 
    <!-- ######################### -->
    <!-- Page Details View Content -->
    <!-- ######################### -->
    <StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" x:Name="PageDetailsViewContent"/>
 
    <!-- ################### -->
    <!-- Details Footer -->
    <!-- ################### -->
    <Grid Grid.Row="1" HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="End" ColumnSpacing="0" BackgroundColor="Aqua">
      <!-- Details Footer components here -->
    </Grid>
 
    <!-- ###### -->
    <!-- Footer -->
    <!-- ###### -->
    <StackLayout Grid.Row="2" HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="Blue">
      <!-- Footer components here -->
  </Grid>
</ContentView>

Then in code behind, I'm replacing *PageDetailsViewContent* component, like:
PageDetailsViewContent.Children.Clear();
PageDetailsViewContent.Children.Add(content);

And the content, is build based on below view:

<ContentView
    xmlns:myapp="clr-namespace:Myapp;assembly=Myapp"
    xmlns:dataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
    xmlns:listView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             x:Class="Myapp.Views.PageDetailsTab.PageDetailsTabAttachmentsView"
             x:Name="PageDetailsTabAttachmentsPage">
    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- Given Page Additional Header Tab -->
        <StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Orientation="Vertical">
            <!-- Given Page Additional Header Tab components here -->
        </StackLayout>
        <!-- ########### -->
        <!-- RadListView -->
        <!-- ########### -->
        <dataControls:RadListView x:Name="List" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemsSource="{Binding MyItemsCollection}" BackgroundColor="#ffffff">
            <dataControls:RadListView.ItemTemplate>
                <DataTemplate>
                    <listView:ListViewTemplateCell>
                        <listView:ListViewTemplateCell.View>
                            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,10,10,10">
                                <!-- List Item View Cell components here -->
                            </Grid>
                        </listView:ListViewTemplateCell.View>
                    </listView:ListViewTemplateCell>
                </DataTemplate>
            </dataControls:RadListView.ItemTemplate>
        </dataControls:RadListView>
    </Grid>
</ContentView>

Indeed for this is an issue at iOS, but any workaround for now?

Thanks a lot.

2 Answers, 1 is accepted

Sort by
0
Namek
Top achievements
Rank 1
answered on 22 Sep 2016, 10:28 AM

I've found some really ugly/crappy/shitty workaround, to set **HeightRequest** to any "big" number, like:

Device.OnPlatform(iOS: () => List.HeightRequest = 10000);

Any more beauty solution?

Thanks
0
Pavel R. Pavlov
Telerik team
answered on 26 Sep 2016, 07:23 AM
Hello Namek,

I tried to reproduce the reported behavior on our side with our latest official release and the code seems to be working as expected. I tried the attached project and the results on iOS are the same as the results on Android. Could you please take a look at it and let us know if the results are the same on your side? We would appreciate if you can change the code in a way the issue is reproduced and send it over. This will help us to investigate the reasons behind.

Regards,
Pavel R. Pavlov
Telerik by Progress
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
Tags
ListView
Asked by
Namek
Top achievements
Rank 1
Answers by
Namek
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or