Asked by:
How to vertically center an item in a grid cell?

Question
-
User49472 posted
I have a
ListView
item template that contains a grid with 3 columns: an image, a label and another image. All items are have theirVerticalOptions
set toLayoutOptions.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.
Thursday, July 17, 2014 3:23 PM
All replies
-
User62552 posted
I have the same question,any one can help?
Thursday, September 11, 2014 6:35 AM -
User14 posted
Did you see the
Grid
api docs?The example uses
VerticalOptions = LayoutOptions.FillAndExpand
and then
HorizontalOptions = LayoutOptions.Center
on the
Label
s to get vertically centered text.Thursday, September 11, 2014 9:12 AM -
User51263 posted
I'm also having the same problem. The above suggestion did not work for me when the Grid is used to format an Item Template in a ListView. Any ideas?
Thursday, October 2, 2014 8:16 PM -
User25785 posted
Same issue here. Inconsistencies like this are pretty frustrating. Grid with custom cells and the labels with completely ignore the VerticalOptions = LayoutOptions.Center option.
Saturday, November 15, 2014 5:31 AM -
User32870 posted
Same here, unable to center vertical align an image inside a (full screen) grid, image always appears on top
Tuesday, January 13, 2015 9:21 AM -
User101859 posted
Found a solution. Try YAlign="Center" on the Label
Tuesday, May 19, 2015 5:22 PM -
User222078 posted
@Chris.3704 said: Found a solution. Try YAlign="Center" on the Label
I know this is over a year old, but this is the solution that worked for me.
Thursday, July 7, 2016 8:37 PM -
User190257 posted
YAlign has been replaced by VerticalTextAlignment but end result is the same, text is centered vertically within its container.
Sunday, January 8, 2017 10:14 AM -
User315524 posted
I used a button with transparent background and border = 0 and it works great as a label and is centered.
Thursday, August 10, 2017 6:18 PM -
User400570 posted
I struggled a bit to have the labels of my grid rows vertically centered in a listview template but finally got it. The template main container (grid in my case) must have the VerticalOptions="Center".
<ListView x:Name="listViewTicketsPortrait"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> ==>here <Grid HorizontalOptions="Fill" VerticalOptions="Center" RowSpacing="2" ColumnSpacing="2">
Wednesday, April 14, 2021 9:05 PM