Forum Xamarin.Forms

Images Throwing Off Grid Row Height

rrrr.9430rrrr.9430 USMember ✭✭
edited August 2015 in Xamarin.Forms

I have a grid with three equal-width columns and a number or rows dependent on the number of items it contains. Each grid cell contains a vertical stacklayout with an image and a label underneath it. Something like this with background colors added to see how much space elements are taking up:

Grid itemsLayout = new Grid { HorizontalOptions = LayoutOptions.FillAndExpand, ColumnSpacing = 5, BackgroundColor = Color.Fuchsia };

               itemsLayout.ColumnDefinitions.Add(
                    new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
                    );


     itemsLayout.RowDefinitions.Add(
            new RowDefinition { Height = GridLength.Auto }
    );

Inside each grid cell:

     nameLabel = new Label
        {
            BackgroundColor = Color.Transparent,
            FontSize = 16,
            LineBreakMode = LineBreakMode.NoWrap,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            TextColor = Color.Black,
            Text = itemName
        };

        icon = new Image
        {
            VerticalOptions = LayoutOptions.Start,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            Aspect = Xamarin.Forms.Aspect.AspectFit,
            Source = ImageSource.FromUri(new Uri(imgPath))
        };

        mainLayout = new StackLayout
        {
            Children = { icon, nameLabel },
            Orientation = StackOrientation.Vertical,
            VerticalOptions = LayoutOptions.Start,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.Green
        };

The images are coming from a uri, and thus, are not necessarily the same size, but are all square. They appear to be scaling correctly, as does the stack layout (it takes up space equal to the final image height + the label height). However, the grid row is extremely tall, filling up nearly the entire screen. What I assume is happening is that it's calculating the height of the grid row based on the full size of the image before it is scaled with AspectFit. Is there any way to change this behavior or change the grid height setting to be proportional to the column width or something like that?

Answers

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    Remove the RowDefinition or set a fixed size to the height.

  • rrrr.9430rrrr.9430 USMember ✭✭
    edited August 2015

    Removing the RowDefinition makes them even taller.

    Setting the height is possible, however, I can't figure out how to calculate a proper height. For some reason setting the height to 1/3 of the screen width produces a height significantly larger than that. So maybe the better question is, how can a set a height proportional to the width.

Sign In or Register to comment.