代码隐藏的 xamarin 屏幕设计

Question

我是 xamarin.i 的新手，我正在尝试在 xamarin 中创建手风琴控件 forms.i 已经创建了 also.in，在起始级别我只放置了这样的按钮和标签

对于演示 purpose.this 我是从代码 behind.like this

绑定的

 var vViewLayout1 = new StackLayout()
        {
            Children = {
                new Label { Text = "Regular Board Meeting",HorizontalOptions=LayoutOptions.Center },

                 new StackLayout
                {
                     Spacing = 5,
                     Orientation = StackOrientation.Horizontal,
                     VerticalOptions= LayoutOptions.Center,
                     HorizontalOptions= LayoutOptions.End,

                      Children =
                         {
                            new Image { Source = "Chat.png"},
                            new Button { Text ="Reject",BackgroundColor = Color.Red,TextColor = Color.White},
                            new Button { Text ="Approve",BackgroundColor = Color.Green,TextColor = Color.White}
                         }
                },
                //new Label { Text = "Name : S Ravi Kumar" },
                //new Label { Text = "Roles : Father,Trainer,Consultant,Architect" }
            }
        };
 var vFirstAccord = new AccordionSource()
        {
            HeaderText = "ReportToBoardJune 1,2016",
            HeaderTextColor = Color.White,
            HeaderBackGroundColor = Color.Red,
            ContentItems = vViewLayout1
        };

 return vResult;

但我想显示这样的数据

所以，我如何从代码 behind.and 创建这个，我应该将哪个控件用于我用红色 arrow.boxview 或 xamarine 中任何其他可用的框突出显示的框，如 table 或任何其他内容否则。

我刚开始xamarin.so我不知道它的controls.any建议或帮助是提前apriciated.thanks。

Answer 1

根据您将要使用网格的评论，您现在的问题基本上是如何在代码隐藏文件中围绕网格制作边框？

如您所见，网格没有特定的边框属性。我做过几次是创建一个简单的 3x3 网格，并在边缘放置 4 个框视图：

BoxView border()
{ 
    BoxView res = new BoxView
    {
        Color = Color.Black,
        HeightRequest = 4,
        WidthRequest = 4
    }
    return res;
}

Grid gridWithBorder = new Grid
{
    RowDefinitions =
        {
            new RowDefinition { Height = GridLength.Auto},
            new RowDefinition { Height = GridLength.Auto},
            new RowDefinition { Height = GridLength.Auto}
        },
   ColumnDefinitions =
        {
            new ColumnDefinition { Width = GridLength.Auto },
            new ColumnDefinition { Width = GridLength.Auto },
            new ColumnDefinition { Width = GridLength.Auto }
        }
};

gridWithBorder.Children.Add(border(), 0, 3, 0, 1);   //add top border
gridWithBorder.Children.Add(border(), 0, 1, 0, 3);   // left border
gridWithBorder.Children.Add(border(), 0, 3, 2, 3);   // bottom border
gridWithBorder.Children.Add(border(), 2, 3, 0, 3);   // right

在此之后，我将布局的其余部分添加到第 1 行第 1 列

代码隐藏的 xamarin 屏幕设计

xamarin screen design from code behind

code-behind

xamarin