如何在包含图像和标签的网格内创建一个框

Question

如何创建一个网格，我可以在其中使用xamarin.forms放置包含图像和标签的结构框。

我发布了显示我需要的图片

“我”是指图像 “N”表示数字 “W”指的是文本

Answer 1

这里有两个独立的组件。

首先是创建图像，数字和文本所需的自定义布局。

第二个是你如何在页面中显示自定义布局。

网格肯定是第二个组件的可能性，但你真的不需要第一个组件。特别是因为Xamarin.Forms中的嵌套网格会破坏布局性能。

因此，请使用两个堆栈布局或相对布局。

对于前者

StackLayout box = new StackLayout {
Orientation = Vertical
};

StackLayout firstRow = new StackLayout {
Orientation = Horizontal
};
firstRow.Children.Add(new Image {Source="FileName.png"});
firstRow.Children.Add(new Label {Text="1", HorizontalOptions = LayoutOptions.End});
box.Children.Add(firstRow);
box.Children.Add(new Label { Text = "This is the text" });

或者对于后者，类似

RelativeLayout rl = new RelativeLayout();
var image = new Image {Source="FileName.png"};
var numberLabel = new Label {Text="1"};
var textLabel = new Label{Text="This is the text"};

rl.Children.Add(image,Constraint.Constant(0),Constraint.Constant(0)); //Add image at 0,0 = top left
rl.Children.Add(numberLabel,Constraint.RelativeToParrent(parent=>parent.Width - numberLabel.Width),Constraint.Constant(0)); // add numberLabel at the top right corner of the relative layout
rl.Children.Add(textLabel,Constraint.RelativeToView(image,(sibling,parent) => sibling.Y + sibling.Height + 20),Constraint.Constant(0)); // Add text label below the image, on the left side of the relative layout