How to partially cut ViewCell separator line in Xamarin Forms?

Question

I am using ViewCell to create rows in my table settings page. I have a setting to select a Light or Dark theme.

<ViewCell Height="50">
    <StackLayout x:Name="darkTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
            <Label Text="Dark" XAlign="Center" FontSize="15"/>
            <Label x:Name="darkThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12" HorizontalOptions="EndAndExpand"/
        </StackLayout>
    </StackLayout>
</ViewCell>
<ViewCell Height="50">
    <StackLayout x:Name="lightTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
            <Label Text="Light" XAlign="Center" FontSize="15"/>
            <Label x:Name="lightThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12"/>
        </StackLayout>
    </StackLayout>
</ViewCell>

Whenever I switch from dark to light theme, there is faint light line on the left side between my rows that I can't seem to get rid of. Please refer to the images below:

In my renderer I have set the following:

tableView.LayoutMargins = new UIEdgeInsets() { Left = 20 };
cell.SeparatorInset = new UIEdgeInsets() { Left = 20 };
cell.LayoutMargins = new UIEdgeInsets() { Left = 20 };

Anyone knows how to get rid of this line?

Edit:

I wanted it to look like below:

score 3 · Answer 1 · edited May 23 '17 at 10:31

3

I am novice to xamarin but, According to this post you need to do this on the UITableView and on your UITableViewCell subclasses.

I hope this will help you. :)

edited May 23 '17 at 10:31

Community

1
1

answered May 09 '17 at 13:06

Tapas Thakkar

845
8
19

JoeTomks · Answer 2 · 2017-05-04T14:21:08.913

0

Apologies in advance incase you have already considered this but I believe what you're looking for is 'TableView.SeparatorInset' this would apply to your renderer rather than the xaml your using in your PCL. You can find the documentation around styling the tableviews at this link.

E.G.

TableView.SeparatorInset.InsetRect(new CGRect(4, 4, 150, 2));

Moving the inset of the seperator will get around the problem I saw you mention in the comments of the other answer about the whole table shifting. Please let me know if you've tried this already, it's the simplest solution but there are other options available to you. (They just aren't as nice).

Edit: Example of a way of achieving your goals by creating your own seperators, not my favourite but would also resolve the issue you've highlighted as you'd have complete control over the styling of a seperator. Refer to this Link

edited May 04 '17 at 14:21

answered May 04 '17 at 13:41

JoeTomks

3,243
1
18
42

Thanks. I have tried this already but what it does to my table is just shift the `TableSection` Title. – May 04 '17 at 14:03
@iamsophia sorry just to confirm you've tried 'TableView.SeparatorInset.InsetRect(new CGRect(4, 4, 150, 2));' for example? I only ask because, that shouldn't effect the tablesection title in anyway. – JoeTomks May 04 '17 at 14:05
Not that one. I have tried this: `tableView.SeparatorInset = new UIEdgeInsets() { Left = 10; };` – May 04 '17 at 14:13
Ah I see, could you try the insetRect property of the seperator inset please, as that should do what your trying to achieve. If not I think you may have to create your own seperators and just set the inbuilt ones visibility to hidden. – JoeTomks May 04 '17 at 14:16

How to partially cut ViewCell separator line in Xamarin Forms?

2 Answers2