RadListView not fitting on iOS

3 posts, 0 answers
  1. Namek
    Namek avatar
    4 posts
    Member since:
    Jul 2016

    Posted 22 Sep Link to this post

    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. Namek
    Namek avatar
    4 posts
    Member since:
    Jul 2016

    Posted 22 Sep Link to this post

    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
  3. DevCraft banner
  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 26 Sep Link to this post

    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
Back to Top