Separators in Xamarin.Forms

Question

I'd like to use horizontal separator lines in a form. As far as I found out, Xamarin.Forms doesn't provide one.

Could someone provide a snippet for separators?

UPDATE 1

According to Jason's proposal, this looks fine:

// draws a separator line and space of 5 above and below the separator    
new BoxView() { Color = Color.White, HeightRequest = 5  },
new BoxView() { Color = Color.Gray, HeightRequest = 1, Opacity = 0.5  },
new BoxView() { Color = Color.White, HeightRequest = 5  },

Renders the below separator line:

enter image description here

score 62 · Accepted Answer · edited Jun 08 '14 at 05:38

62

You might try using BoxView

// sl is a StackLayout
sl.Children.Add(new BoxView() { Color = Color.Black, WidthRequest = 100, HeightRequest = 2 });

although in my test, the width request is not being followed. This may be a bug, or other settings might be interfering with it.

edited Jun 08 '14 at 05:38

Stephane Delcroix

16,134
5
57
85

answered Jun 08 '14 at 01:46

Jason

86,222
15
131
146

Thx! That did the trick. Doesn't respect the WidthRequest over here too. – SteAp Jun 08 '14 at 02:33
Thanks! Width is annoying but otherwise works for me! – Rexxo Aug 17 '16 at 15:07
3

Why not use the spacing property of the stacklayout? Just have the containing control have a different background color? – Matt Jan 27 '17 at 05:21
2

I believe the width request is not being respected because it's overridden by the default `HorizontalOptions`, which is `Fill`. In order to get the desired width of 100, you'd need to set `HorizontalOptions` to any other value, like `"Start"`, `"Center"`, or `"End"`. – jbyrd Oct 13 '17 at 21:10

score 14 · Answer 2 · answered Jun 21 '19 at 06:43

You can define your own separator line in the app.xaml file.

<Style x:Key="Separator" TargetType="BoxView">
            <Setter Property="HeightRequest" Value="1" />
            <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            <Setter Property="Color" Value="Gray" />
            <Setter Property="Margin" Value="0, 5, 0, 5" />
            <Setter Property="Opacity" Value="0.5" />
</Style>

And use it as Style.

<BoxView Style="{StaticResource Separator}" />

I think this is the best and most clean solution here. Thanks. — Vasil Popov, Jan 24 '20 at 21:19

score 12 · Answer 3 · answered Mar 24 '15 at 10:09

12

There is actually a method to display the separators in Xamarin.Forms:

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.Default;
myListView.SeparatorColor = Color.FromHex("C8C7CC");

And to hide:

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.None;

Hope it helps!

answered Mar 24 '15 at 10:09

barrast

1,791
1
16
27

Thanks for this, while this wasn't exactly what he wanted, it was what I was looking for! – Jon Jun 10 '16 at 16:25

score 11 · Answer 4 · answered Feb 20 '17 at 07:04

11

@Jason In addition to Jason answer you should set VerticalOptions to be able to use HeightRequest, and set HorizontalOptions to be able to use WidthRequest. default values are fill so that is why it does not respond. Example output

<BoxView   VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="1"
           WidthRequest="50"  
           Color="#5b5d68"></BoxView>

answered Feb 20 '17 at 07:04

Umit

305
2
5

Excellent. WidthRequest controls line length. – pollaris Dec 03 '17 at 14:28

score 6 · Answer 5 · answered May 08 '18 at 15:17

Another way of implementing BoxView in a StackLayout using Xaml.

This should do it

<StackLayout Orientation="Vertical">
       <Label HorizontalTextAlignment="Center" Text="Header" />
       <BoxView HeightRequest="1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" />
</StackLayout>

score 4 · Answer 6 · answered Aug 12 '16 at 14:35

Adding a 1pixel stack works for me (in a vertical stack):

// Add a black line
MyVerticalStackLayout.Children.Add(
    new StackLayout { 
        HeightRequest = 1, 
        BackgroundColor = Color.Black, 
        HorizontalOptions = LayoutOptions.FillAndExpand
     }    
);

score 3 · Answer 7 · answered Nov 25 '14 at 06:07

you can achieve this through StackLayout. Define a StackLayout having height 1 px and width 320 px(size of the screen of iPhone), then add it into the parent layout will help you.

StackLayout myLayout = new StackLayout();
myLayout.HeightRequest=1;
myLayout.WidthRequest=320;
myLayout.BackgroundColor= Color.Black;
parentLayout.Children.Add("myLayout");

score 0 · Answer 8 · edited Nov 13 '18 at 05:31

0

You also can use a NuGet package Xamarin.Forms.Lab which contains so many custom controls which helps while coding.

Also in this package, there is a control name with a separator which may help you.

You can download the package from this link: https://www.nuget.org/packages/XLabs.Forms/

edited Nov 13 '18 at 05:31

Marcello B.

4,177
11
45
65

answered Oct 11 '14 at 06:58

vishal bagdai

56
1

Separators in Xamarin.Forms

8 Answers8

Linked