如何创建带有框架和stackLayout的左边框粗的xamarin容器

时间:2018-10-09 02:11:15

标签: xamarin.forms

我正在尝试创建一个xamarin表单用户界面,如下面的快照所示。

enter image description here

我正在尝试以下代码,

var reviewLabel = new Label
            {
                TextColor = Constants.MMSGAlertColor,
                Text = "Select the benefit to findout more",
                FontSize = 12
            };

            var alertLayout = new StackLayout
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = Constants.MMSGAlertBackgroundColor,

            };

            var alertContentLayout = new StackLayout
            {
                Margin = new Thickness(8, 0, 0, 0),
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = Constants.MMSGAlertBackgroundColor
            };

            var warningBoxView = new BoxView
            {
                BackgroundColor = Constants.MMSGAlertColor
            };

            alertLayout.Children.Add(warningBoxView);
            alertLayout.Children.Add(alertContentLayout);
            alertContentLayout.Children.Add(reviewLabel);


            var frame = new Frame
            {
                Padding = 16,
                OutlineColor = Constants.MMSGAlertBorderColor,
                BackgroundColor = Constants.MMSGAlertBackgroundColor,
                HasShadow = false,
                Content = alertLayout,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            frame.SetBinding(IsVisibleProperty, "IsPaymentPlanEnding");

            var rowLayout = new StackLayout
            {

            };

            rowLayout.Children.Add(frame);
            rowLayout.Children.Add(rowGrid);

但是当前的用户界面如下所示,

enter image description here

结果输出的边框较粗,框架内有填充。

但是我试图生成一个UI容器,该UI的容器左侧有8px厚的条带。

有没有一种方法可以创建边框,边框的左侧厚度为8px,其余为1px。

1 个答案:

答案 0 :(得分:1)

请参见下面的XAML代码。添加所需的正确颜色,因为我使用了自己的颜色。同样,如果需要,您可以在后面的代码中重写相同的内容。


    Angular CLI: 6.1.3
    Node: 8.12.0
    OS: win32 ia32
    Angular:
    ...
    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.7.3
    @angular-devkit/core         0.7.3
    @angular-devkit/schematics   0.7.3
    @schematics/angular          0.7.3
    @schematics/update           0.7.3
    rxjs                         6.2.2
    typescript                   2.9.2