›

Add separator/divider between rows in a ListView

SarthakDattSarthakDatt USMember ✭
edited August 2014 in Xamarin.Forms

I know there exists a solution for IOS(using ExtendedViewCell from Xamarin forms labs), but I am looking for a way to do the same for Android.
This is how I am solving it for now, looking if someone has come up with other approach(s):

<ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <StackLayout>
                                <StackLayout 
                                    Orientation="Horizontal"
                                    Padding="20">
                                    <Image Source="{Binding MyImageSource}"/>
                                    <StackLayout 
                                        Orientation="Vertical"
                                        HorizontalOptions="FillAndExpand">
                                        <Label Text="{Binding MyLabel1}"></Label>
                    <Label Text="{Binding MyLabel2}"></Label>
                                    </StackLayout>
                                </StackLayout>
                                <StackLayout 
                                    BackgroundColor="MySeparatorColor"
                                    HeightRequest="1"
                                    HorizontalOptions="FillAndExpand"
                                    VerticalOptions="EndAndExpand"/>
                            </StackLayout>
                        </ViewCell.View>
                    </ViewCell>
        </DataTemplate>
</ListView.ItemTemplate>

Posts

  • KlausKrapfenbauerKlausKrapfenbauer ATMember ✭✭

    I have exactly the same issue. I made a workaround with a Frame element around my StackLayout in the ViewCell. Anyone there to come up with an answer which is not a workaround? Is there a proper solution for this?

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Which platform are you referring to (Windows Phone)? By default iOS and Android do have a dividing line between rows as you can see in the todo sample screenshot...

  • SarthakDattSarthakDatt USMember ✭

    This is for Android.
    I think the problem might be using a light theme for Android. To support that theme, the background color of my page is white. If I use the default theme, it works fine.

  • DanielNunesdaSilvaDanielNunesdaSilva BRMember ✭

    And to separate columns? How to insert an edge in each cell horizontally?

  • GeorgeCookGeorgeCook PEUniversity ✭✭✭

    I just put a 1 pixel high box in my view cell.

  • SapienDeveloperSapienDeveloper USMember ✭✭

    On a list view there are also properties for a separator called
    SeparatorVisibility and SeparatorColor

  • batmacibatmaci DEMember ✭✭✭✭✭

    @SapienDeveloper said:
    On a list view there are also properties for a separator called
    SeparatorVisibility and SeparatorColor

    but can you adjust the thickness?

  • SapienDeveloperSapienDeveloper USMember ✭✭

    @batmaci unfortunately no.
    the easiest approach would be to add a separator boxview as mentioned above

Sign In or Register to comment.