Hey there,
I'm currently trying to show Images of People with their Name below the image and their skill.
All this should be displayed in a grid like layout. Attached an image how it should look like.
I'm currently trying to do this with the following code, using a relativeLayout and putting a stackLayout inside, which stacks the image and the label and the skill.
`
var picture = new ImageCircle () {
Source = ImageSource.FromFile("Girl.jpg"),
};
var name = new Label {
Text = "Vangelis Threecups",
//TextColor = Color.FromRgb(255,128,0),
XAlign = TextAlignment.Center,
YAlign = TextAlignment.Center
};
var skills = new Label {
Text = "#Designer",
TextColor = Color.FromRgb(255,128,0),
XAlign = TextAlignment.Center,
YAlign = TextAlignment.Center
};
var box1 = new StackLayout {
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {picture, name, skills},
};
double padding = 30;
layout.Children.Add( box1, () => new Rectangle(((layout.Width + padding) % 60) / 2, padding, 90, 90));
var last = box1;
for (int i = 0; i < 200; i++)
{
var relativeTo = last; // local copy
var box = new StackLayout {
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {picture, name, skills},
};
Func<View, bool> pastBounds = view => relativeTo.Bounds.Right + padding + view.Width > layout.Width;
layout.Children.Add(box, () => new Rectangle(pastBounds(relativeTo) ? box1.X : relativeTo.Bounds.Right + padding,
pastBounds(relativeTo) ? relativeTo.Bounds.Bottom + padding : relativeTo.Y,
relativeTo.Width,
relativeTo.Height));
last = box;
}`