Separators in Xamarin.Forms
Solution 1
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.
Solution 2
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}" />
Solution 3
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!
Solution 4
@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>
Solution 5
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>
SteAp
Fiddling around with Flutter. Writing Frog (spare-time project). Profile image: Please don't copy my painting.
Updated on July 09, 2022Comments
-
SteAp almost 2 years
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:
-
SteAp about 10 yearsThx! That did the trick. Doesn't respect the WidthRequest over here too.
-
Jon about 8 yearsThanks for this, while this wasn't exactly what he wanted, it was what I was looking for!
-
Rexxo almost 8 yearsThanks! Width is annoying but otherwise works for me!
-
Matt over 7 yearsWhy not use the spacing property of the stacklayout? Just have the containing control have a different background color?
-
jbyrd over 6 yearsI believe the width request is not being respected because it's overridden by the default
HorizontalOptions
, which isFill
. In order to get the desired width of 100, you'd need to setHorizontalOptions
to any other value, like"Start"
,"Center"
, or"End"
. -
pollaris over 6 yearsExcellent. WidthRequest controls line length.
-
Vasil Popov over 4 yearsI think this is the best and most clean solution here. Thanks.