Xamarin.Forms中的分隔符

Ste*_*eAp 34 xamarin xamarin.forms

我想在表单中使用水平分隔线.据我所知,Xamarin.Forms没有提供.

有人可以为分隔符提供一个片段吗?

更新1

根据Jason的提议,这看起来很好:

// 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  },
Run Code Online (Sandbox Code Playgroud)

呈现以下分隔线:

在此输入图像描述

Jas*_*son 43

你可以尝试使用 BoxView

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

虽然在我的测试中,没有遵循宽度请求.这可能是一个错误,或其他设置可能会干扰它.

  • 为什么不使用stacklayout的spacing属性?只是让包含控件有不同的背景颜色? (2认同)
  • 我相信宽度请求没有被尊重,因为它被默认的`Horizo​​ntalOptions`覆盖,即'Fill`.为了获得所需的宽度100,你需要将`Horizo​​ntalOptions`设置为任何其他值,例如``Start"`,``Center``或``End``. (2认同)

bar*_*ast 9

实际上有一种方法可以在Xamarin.Forms中显示分隔符:

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.Default;
myListView.SeparatorColor = Color.FromHex("C8C7CC");
Run Code Online (Sandbox Code Playgroud)

隐藏:

myListView.SeparatorVisibility = Xamarin.Forms.SeparatorVisibility.None;
Run Code Online (Sandbox Code Playgroud)

希望能帮助到你!


Umi*_*mit 9

@Jason除了Jason的回答,你应该设置VerticalOptions以便能够使用HeightRequest,并设置Horizo​​ntalOptions以便能够使用WidthRequest.默认值是填充,这就是它没有响应的原因.示例输出

<BoxView   VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="1"
           WidthRequest="50"  
           Color="#5b5d68"></BoxView>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述


小智 8

您可以在app.xaml文件中定义自己的分隔线。

<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>
Run Code Online (Sandbox Code Playgroud)

并将其用作样式。

<BoxView Style="{StaticResource Separator}" />
Run Code Online (Sandbox Code Playgroud)


Olu*_*ola 5

使用 Xaml 在 StackLayout 中实现 BoxView 的另一种方法。

这应该做

<StackLayout Orientation="Vertical">
       <Label HorizontalTextAlignment="Center" Text="Header" />
       <BoxView HeightRequest="1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" />
</StackLayout>
Run Code Online (Sandbox Code Playgroud)