Forum Xamarin.Forms

Listview on iOS 9 not filling screen width - issue with custom ViewCell

RogerHardimanRogerHardiman GBMember ✭✭
edited September 2015 in Xamarin.Forms

In iOS8 a simple Listview would have separator lines that filled the width (especially in landscape mode)
In iOS9 the Listview separator lines no longer fill the full width on a landscape iPad mini.

(first attached image is a simple list view with the ItemsSource set to an array of 3 strings)

This causes me a problem as I have custom ViewCells and they are left aligned on the screen and so appear out of alignment with the separator lines.

(see second attached image. I've used the code fragment below to have a custom ViewCell)

Here is a very short sample program.
Note in the custom ViewCell I don't bother to get the proper list contents. For now I just hard code a label which is enough for now.

Any ideas on how to fix this layout so it looks like iOS8 did with seperators filling the screen.

Thanks

UPDATE... Tried XamStudio Alpha (with Xam.iOS 8.13.xx) and Beta (with Xam.iOS 9.xx) and XamForms 1.4.4 and 1.5.0. Nothing helped.

    using System;

    using Xamarin.Forms;

    namespace ListViewBug2
    {
        public class App : Application
        {
            public App ()
            {

                ListView listview = new ListView();
                listview.ItemsSource = new String[]{"one","two","three"};
                listview.ItemTemplate = new DataTemplate(typeof (CustomCell));


                // The root page of your application
                MainPage = new ContentPage {
                    Content = new StackLayout {
                        VerticalOptions = LayoutOptions.Center,
                        Children = {
                            new Label {
                                XAlign = TextAlignment.Center,
                                Text = "Welcome to Xamarin Forms!"
                            },
                            listview,
                        },
                        Padding = new Thickness(0,20,0,0),
                    }
                };
            }

        }

        public class CustomCell : ViewCell {
            // Constructor
            public CustomCell() {
                Label myLabel = new Label();
                myLabel.Text = "custom list item";  // Hard code for now
                View = myLabel;
            }
        }
    }

Posts

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    +1 this happens to me as well, same code to iOS 9 and this happens

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    As a workaround for now you could play with a custom renderer for the ListView and implement something like this;

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
            Control.SeparatorInset = UIEdgeInsets.Zero;
        }
    

    My time to play with this is up, but maybe you can make something of it! :)

  • NMackayNMackay GBInsider, University admin

    Weird.

    I updated both Apps to Forms 1.5.0, they use a ViewCellRenderer and aLlistview with a Data template and it works fine on the hardware on iPhone5 & 6.

    <ListView Grid.Row="1"
                      ItemsSource="{Binding Orders}"
                      VerticalOptions="Fill"
                      x:Name="ListviewOrder">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Image Source="{Binding OrderStatus, Converter={StaticResource OrderStatusToImage}}"
                                       Grid.Column="0"
                                       Grid.Row="0"
                                       Grid.RowSpan="2" />
                                <Label Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" FontSize="16" FontAttributes="Bold"
                                       Text="{Binding CustomerName}" />
                                <Label Grid.Row="1" Grid.Column="1" VerticalOptions="Start" FontSize="12"
                                       Text="{Binding OrderNo}"
                                       TextColor="{Binding OrderStatus, Converter={StaticResource OrderStatusToColor}}" />
                                <Label Grid.Row="1" Grid.Column="2" VerticalOptions="Start" FontSize="12"
                                       Text="{Binding AccountId}" />
                            </Grid>
                            <b:Interaction.Behaviors>
                                <b:BehaviorCollection>
                                    <b:EventToCommand CommandNameContext="{b:RelativeContext Home}"
                                                      EventName="Tapped"
                                                      CommandName="SelectCommand"
                                                      CommandParameter="{Binding .}" />
                                </b:BehaviorCollection>
                            </b:Interaction.Behaviors>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    

    I know that doesn't really help....

  • RogerHardimanRogerHardiman GBMember ✭✭
    edited September 2015

    I should have said that this only happens on iPads in landscape mode.
    I'm not seeing the problem on a 4s.

    To recap, on iOS 8 a listview looked like this

    Item1
    -------------------
    Item 2
    -------------------
    Item 3
    -------------------
    

    On iOS9 + iPads + Landscape (you need those three conditions - hardware or simulator will do)

    Item1
              -------------------
    Item 2
              -------------------
    Item 3
              -------------------
    

    If the Listview is just a simple string list, the layout is fine. When you use ItemTemplate to call a custom ViewCell then it renders incorrectly.

  • NMackayNMackay GBInsider, University admin

    @RogerHardiman

    I tested again in the iPad air sim in landscape and am seeing the problem you describe.

    I will feedback this back issue to our customer success engineer to try and get it pushed up in urgency.

    Thanks for highlighting this :+1:

  • Same issue here. Both in the sim and physical device. Please let us know if you hear anything regarding this issue. Thx

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Did anyone successfully create a workaround for this yet?

  • ChristianFischerChristianFischer DEMember ✭✭

    Hi,
    I have the same issue described above BUT :smile: I deployed our app to the apple AppStore to test it on real device via Testflight. After installing the app the described issue is gone. So it seems to be a problem in the simulator or direct deploy to a device or Apple is doing some modifications inside the code!?

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    @ChristianFischer that's not the case for me unfortunately..

  • ChristianFischerChristianFischer DEMember ✭✭

    @GeraldVersluis sorry, to hear... I only described what we've done. In Simulator/local Device the ListView is not filling correctly but after uploading the appstore and installing the app via Testflight it renders correctly.

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    @MiniyahilArekew.2902 you sir, are awesome!

    Thank you very much for this! Works like a charm!

  • Miny2902Miny2902 ETUniversity

    @GeraldVersluis Glad it helps

  • RaymondKellyRaymondKelly USMember ✭✭✭

    I was hoping there would be an update to fix this issue. I just updated to latest everything and the same issue still exists.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @RaymondKelly This is an "enhancement" which Apple added in iOS9. There won't be any fixes.

    I use the same workaround in my custom ListViewRenderer and TableViewRenderer although I also check the iOS version first. You may get an exception on older OS versions otherwise.

    if (UIDevice.CurrentDevice.CheckSystemVersion(9, 0))
        Control.CellLayoutMarginsFollowReadableWidth = false;
    
  • SheemuSheemu USMember ✭✭✭

    Hi @GeraldVersluis thanks, its work for me. I reduce extra space in view cell left side.

    @GeraldVersluis said:
    As a workaround for now you could play with a custom renderer for the ListView and implement something like this;

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
    base.OnElementPropertyChanged(sender, e);

    Control.SeparatorInset = UIEdgeInsets.Zero;
    }

    My time to play with this is up, but maybe you can make something of it! :)

  • CharwakaCharwaka INMember ✭✭✭✭✭

    Hi All

    From Xamarin Forms 3.4 you can use following code

    <ContentPage ...
                 xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
        <StackLayout Margin="20">
            <ListView ... ios:ListView.SeparatorStyle="FullWidth">
                ...
            </ListView>
        </StackLayout>
    </ContentPage>
    
Sign In or Register to comment.