ListView separator full width iOS

Hi! Its possible to get a full width separator in iOS?

I implemented a custom renderer but not solved. When I debug CellLayoutMarginsFollowReadableWidth, its already false.

https://developer.xamarin.com/recipes/cross-platform/xamarin-forms/ios/ipad-listview/

https://forums.xamarin.com/discussion/comment/159290/#Comment_159290

My custom renderer is:

using CustomRenderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using ListViewRenderer = CustomRenderers.ListViewRenderer;

[assembly: ExportRenderer(typeof(ListView), typeof(ListViewRenderer))]
[assembly: ExportRenderer(typeof(TableView), typeof(UITableViewRenderer))]

// [HACK]: Needed because of a bug in Xamarin
namespace CustomRenderers
{
    public class ListViewRenderer : Xamarin.Forms.Platform.iOS.ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
                return;

            var tableView = Control as UITableView;

            tableView.CellLayoutMarginsFollowReadableWidth = false;
        }
    }

    public class UITableViewRenderer : Xamarin.Forms.Platform.iOS.TableViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
                return;

            var tableView = Control as UITableView;

            tableView.CellLayoutMarginsFollowReadableWidth = false;
        }
    }
}

Any ideas?

Xamarin Forms 2.3.5.256-pre6
iPhone 5 iOS 9.1

Tagged:

Posts

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @marciosouzajunior,
    I'm not sure, if your view container (content view + stack layout etc) has margin/padding.
    Removing the margin padding (i.e. setting them to 0), should help in this case, only then your listview item template needs to apply some padding, else it would look shrunk in too much and clinging to the view sides.

    Posting your view XAML should give more idea on the issue.
    Hope I am not making any confusion and it helps you sort this out.

    Regards,
    N Baua

  • SmeSme USMember ✭✭✭
    edited August 2017

    If you want a quick and dirty way to do it, you can just set your ListView's SeparatorVisibility property to None, and then create a contentview with a height of .5 that expands the page width, and add it to the bottom of each listview cell (essentially creating your own separator line).

  • marciosouzajuniormarciosouzajunior BRMember ✭✭
    edited August 2017

    @N_Baua said:
    Hi @marciosouzajunior,
    I'm not sure, if your view container (content view + stack layout etc) has margin/padding.
    Removing the margin padding (i.e. setting them to 0), should help in this case, only then your listview item template needs to apply some padding, else it would look shrunk in too much and clinging to the view sides.

    Posting your view XAML should give more idea on the issue.
    Hope I am not making any confusion and it helps you sort this out.

    Regards,
    N Baua

    Hi @N_Baua! My view hasnt margin/padding. Set it to zero too but no results:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="myapp.views.Test"
                 Title="Test">
    
        <ContentPage.Content>
    
            <StackLayout
                Margin="0"
                Padding="0">
    
                <ListView 
                    Margin="0"
                    x:Name="myList">
    
                </ListView>
    
            </StackLayout>
    
        </ContentPage.Content>
    
    </ContentPage>
    

    The code behind:

    namespace myapp.views
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Test : ContentPage
        {
    
            public Test ()
            {
                InitializeComponent ();        
                myList.ItemsSource = new[] {"teste a", "teste b", "teste c" };
            }
    
        }
    
    }
    

    I think its related to iOS, because working good on Android.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Well that's weird, I guess then only option remains is to check if you can turn off the separators and try adding the listview template with 1px BoxView in it to mimic the separator below you label or whatever control you wish to use.

    Hope you get this sorted out.

    N Baua

  • JohnHardmanJohnHardman GBUniversity mod
    edited August 2017

    @marciosouzajunior - In my own code, I implemented separators using a BoxView a long time ago, in order to work around problems that I would have thought were long fixed by now.

    However, during development, I keep one test page using standard Xamarin views, so that I can see whether issues are in my code or in Xamarin.Forms . Looking at that page, using XF 2.3.4.247, I am seeing the same indented separator on iOS (physical devices) that you describe. I suggest logging it as a bug at bugzilla.xamarin.com

  • marciosouzajuniormarciosouzajunior BRMember ✭✭

    Hi guys! Thanks for suggestions. I think that BoxView approach its not good due to performance issues, since my list have lots of items.

    @JohnHardman - There is a open bug:

    https://bugzilla.xamarin.com/show_bug.cgi?id=42117

    Although it is related to caching strategy, I found that its not work properly anyways (see my comment in bugzilla).

    For the moment I will leave as is it or set visibility to none. :/

  • JohnHardmanJohnHardman GBUniversity mod

    @marciosouzajunior - The 42117 bug report is a bit confused, but hopefully Xamarin will sort out the indent regardless of whether a custom renderer is used and regardless of which caching strategy is used.

  • mjromkamjromka Member ✭✭

    In my opinion, for now the most clean solution is using iOS custom renderer as suggested here: https://stackoverflow.com/a/45344478/2551398

  • Monika_MaliMonika_Mali Member ✭✭

    @VenkataSwamy
    Thank You. Solve my problem :smile:

  • hvaughanhvaughan USMember ✭✭✭
    edited October 2018

    Unfortunately ios:ListView.SeparatorStyle="FullWidth" only seems to work if the row has content in it. If you have a ListView with only 3 items in it, all the empty rows displayed still show partial width separators.

  • hvaughanhvaughan USMember ✭✭✭

    @hvaughan said:
    Unfortunately ios:ListView.SeparatorStyle="FullWidth" only seems to work if the row has content in it. If you have a ListView with only 3 items in it, all the empty rows displayed still show partial width separators.

    Found that mixing ios:ListView.SeparatorStyle="FullWidth" with the following custom render gives full width separators for empty rows and rows with content on iOS 9:
    https://stackoverflow.com/a/47191988/3850012

Sign In or Register to comment.