Как создать ящик внутри сетки, содержащей изображение и метки

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