Forum Xamarin.Forms

How to vertically center an item in a grid cell?

RaviBhavnaniRaviBhavnani USMember, University

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.

Answers

  • zapzqczapzqc USMember ✭✭
    edited September 2014

    I have the same question,any one can help?

  • CraigDunnCraigDunn USXamarin Team Xamurai

    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.

  • kbrowderkbrowder USMember

    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?

  • BryceBrooksBryceBrooks USMember

    Same issue here. Inconsistencies like this are pretty frustrating. Grid with custom cells and the labels with completely ignore the VerticalOptions = LayoutOptions.Center option.

  • NielsCupNielsCup NLMember ✭✭✭

    Same here, unable to center vertical align an image inside a (full screen) grid, image always appears on top

  • Chris.3704Chris.3704 USUniversity ✭✭
    edited May 2015

    Found a solution. Try
    YAlign="Center"
    on the Label

  • AndrewHoffmanAndrewHoffman USUniversity ✭✭

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

  • LukeAldertonLukeAlderton GBMember
    edited January 2017

    YAlign has been replaced by VerticalTextAlignment but end result is the same, text is centered vertically within its container.

  • ClayBrinlee.7986ClayBrinlee.7986 USMember ✭✭

    I used a button with transparent background and border = 0 and it works great as a label and is centered.

  • tixigotixigo Member

    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">
    
Sign In or Register to comment.