来自代码背后的 xamarin 屏幕设计答案

【问题标题】：xamarin screen design from code behind来自代码背后的 xamarin 屏幕设计
【发布时间】：2016-08-16 21:52:41
【问题描述】：

我是 xamarin 的新手。我正在尝试在 xamarin 表单中创建手风琴控件。我也创建了。在开始时我只放置了按钮和标签

用于演示目的。这是我从后面的代码绑定的。像这样

 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;

但我想显示这样的数据

那么，我怎样才能从后面的代码中创建它。以及我应该为我用红色箭头突出显示的框使用哪个控件。boxview 或 xamarine 中的任何其他可用的表格或其他任何东西。

我刚开始使用 xamarin。所以我对它的控件一无所知。任何建议或帮助都非常重要。提前致谢。

【问题讨论】：

我认为Grid 将满足您对突出显示的框的需求。您可以使用大小均匀的单元格配置 3x3 网格，并在需要的位置添加标签。该 API 文档包含一个从后面的代码中使用 Grid 的示例。
是的..我用过。 grid.but 如何从后面的代码中创建边框？
我找不到网格的边框属性
Xamarin.Forms 在每个视图中往往具有非常有限的属性。您可以自己添加属性，使用自定义渲染器或自定义控件，也可以将Grid 放在ContentView 中并设置BackgroundColor 和Padding 属性以获得所需的结果。
@Dylan：非常感谢您的建议和帮助...

标签： xamarin code-behind

【解决方案1】：

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

您发现网格没有特定的边框属性。我做了几次是创建一个简单的 3x3 网格，并在边缘放置 4 个 boxview：

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 列

【讨论】：

所以我不明白你的结构。你能简单地解释一下吗？
我应该在我的网格结构中增加 2 个额外的行定义和列定义，我应该放 boxview 吗？
@NeelamPrajapati 是的，创建的两个额外的列和行被 boxviews 占用。在“gridWithBorder.Children.Add”行中，它指定了您要添加的视图、列、行以及跨越的列或行数。
gridWithBorder.Children.Add(border(), 0, 3, 0, 1); //在这个0中添加上边框是第3行是列..thts right.but 之后的0和1是什么？
Children.Add(border() // 这是视图，0 // 这是列，3 // 这是视图要跨越的列数（即列 0、1 and 2) , 0 // 这是行 , 1); // 这是视图要跨越的行数