Xamarin.Forms 中的分隔符答案

【问题标题】：Separators in Xamarin.FormsXamarin.Forms 中的分隔符
【发布时间】：2014-07-28 22:06:09
【问题描述】：

我想在表单中使用水平分隔符行。据我所知，Xamarin.Forms 没有提供。

有人可以为分隔符提供一个 sn-p 吗？

更新 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  },

呈现以下分隔线：

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

您可以尝试使用BoxView

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

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

【讨论】：

谢谢！那成功了。也不尊重这里的 WidthRequest。
谢谢！宽度很烦人，但对我有用！
为什么不用stacklayout的spacing属性呢？只是让包含控件具有不同的背景颜色？
我相信宽度请求没有得到尊重，因为它被默认的HorizontalOptions覆盖，即Fill。为了获得所需的 100 宽度，您需要将 HorizontalOptions 设置为任何其他值，例如 "Start"、"Center" 或 "End"。

【解决方案2】：

Xamarin.Forms 中其实有一种显示分隔符的方法：

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

并隐藏：

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

希望对你有帮助！

【讨论】：

谢谢你，虽然这不是他想要的，但这正是我想要的！

【解决方案3】：

@杰森除了 Jason 的回答之外，您还应该设置 VerticalOptions 以能够使用 HeightRequest，并设置 HorizontalOptions 以能够使用 WidthRequest。默认值是填充，这就是它不响应的原因。示例输出

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

【讨论】：

优秀。 WidthRequest 控制行长。

【解决方案4】：

您可以在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>

并将其用作样式。

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

【讨论】：

我认为这是这里最好、最干净的解决方案。谢谢。

【解决方案5】：

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

应该这样做

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

【讨论】：

【解决方案6】：

添加 1 像素堆栈对我有用（在垂直堆栈中）：

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

【讨论】：

【解决方案7】：

您可以通过 StackLayout 实现这一点。定义一个高度为 1 px，宽度为 320 px（iPhone 屏幕大小）的 StackLayout，然后将其添加到父布局中会有所帮助。

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

【讨论】：

【解决方案8】：

您还可以使用 NuGet 包 Xamarin.Forms.Lab，其中包含许多有助于编码的自定义控件。

同样在这个包中，有一个带有分隔符的控件名称可以帮助你。

您可以从此链接下载该软件包： https://www.nuget.org/packages/XLabs.Forms/

【讨论】：