locked
How to vertically center an item in a grid cell? RRS feed

  • 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 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.

    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 Labels 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