I'm trying to fudge together an image grid. Given that there isn't a bindable grid control at the minute, our "fudged" solution was to come up with a simple wrapper model to display 3 sequential images in a row within a ListView.
But I'm having some trouble getting the images to display in the dimensions I want.
Each image in the collection is a landscape 400x300px Jpeg.
Below is the code for the 3 images within the row template. No matter what I do for the WidthRequest/HeightRequest, I cannot get it to display as a square thumbnail image. I've tried tweaking the Aspect to all 3 values (AFit, AFill & Fill) but the image will always be 400px wide.
Any idea what I'm doing wrong ?
ThumbnailList.ItemTemplate = new DataTemplate(
() =>
{
var device = Resolver.Resolve<IDevice>();
var width = 640; //assume 640px min display default
if (device != null && device.Display != null)
{
width = device.Display.Width; //returns 720 for a samsung s3
}
var thumbwidth = ((width / 10) * 3); //216 px on 720 wide.
Image imgCol1 = new Image();
imgCol1.WidthRequest = thumbwidth;
imgCol1.HeightRequest = thumbwidth;
imgCol1.Aspect = Aspect.AspectFit;
imgCol1.HorizontalOptions = LayoutOptions.Start;
imgCol1.VerticalOptions = LayoutOptions.Start;
imgCol1.SetBinding(Image.SourceProperty, "UIPhotoCol1.Source");
var commandImg1 = new TapGestureRecognizer()
{
Command = viewModel.DeletePhoto,
NumberOfTapsRequired = 1
};
commandImg1.SetBinding(TapGestureRecognizer.CommandParameterProperty, "UIPhotoCol1.InternalTrackingId");
imgCol1.GestureRecognizers.Add(commandImg1);
//Repeat block for imgCol2
//Repeat block for imgCol3
return new ViewCell
{
View =
new StackLayout
{
HorizontalOptions = LayoutOptions.Start,
//Padding = new Thickness(0, 5),
Orientation = StackOrientation.Horizontal,
//Spacing = 5,
Children = { imgCol1, imgCol2, imgCol3 }
}
};
});