Separators in Xamarin.Forms
Xamarinxamarin.formsXamarin Problem Overview
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:
Xamarin Solutions
Solution 1 - Xamarin
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 - Xamarin
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 3 - Xamarin
@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 4 - Xamarin
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 5 - Xamarin
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>
Solution 6 - Xamarin
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
}
);
Solution 7 - Xamarin
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");
Solution 8 - Xamarin
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/