I have a ListView
item template that contains a grid with 3 columns: an image, a label and another image. All items are have their VerticalOptions
set to LayoutOptions.Center
. However, the list displays the items vertically aligned to the top, as shown in this image:
ravib.com/download/item.template.vcenter.png
The item template is defined in code as follows:
// Create list view item template
this._listOrgs.ItemTemplate = new DataTemplate (() => {
// Selected indicators
Image imgSelected = new Image() {
Aspect = Aspect.AspectFill,
WidthRequest = 24,
VerticalOptions = LayoutOptions.Center,
Source = ImageSource.FromResource("check_yellow_24.png"),
};
imgSelected.SetBinding (Image.IsVisibleProperty, "IsSelected");
imgSelected.SetValue (Grid.ColumnProperty, 0);
// Label
Label lblOrgName = new Label() {
VerticalOptions = LayoutOptions.Center,
Font = Font.SystemFontOfSize (NamedSize.Large),
HorizontalOptions = LayoutOptions.StartAndExpand,
};
lblOrgName.SetBinding (Label.TextProperty, "Name");
lblOrgName.SetValue (Grid.ColumnProperty, 1);
// "Has children" indicator
Image imgHasChildren = new Image() {
Aspect = Aspect.AspectFill,
WidthRequest = 24,
VerticalOptions = LayoutOptions.Center,
Source = ImageSource.FromResource("arrow_right_blue_24.png"),
};
imgHasChildren.SetBinding (Image.IsVisibleProperty, "HasChildren");
imgHasChildren.SetValue (Grid.ColumnProperty, 2);
// Compose view cell
return new ViewCell {
View = new Grid {
Padding = new Thickness (25.0f, 0, 0, 0),
ColumnDefinitions = new ColumnDefinitionCollection() {
new ColumnDefinition() { Width=24 },
new ColumnDefinition() { Width=GridLength.Auto },
new ColumnDefinition() { Width=24 },
},
Children = { imgSelected, lblOrgName, imgHasChildren }
}
};
});
How do I get the items to display vertically centered? Thanks.