FlexLayout Spacing

zarxtzarxt Member

Hi,

I am trying to use FlexLayout with Wrap="Wrap" to display a list of item horizontally and if there is no space to get the remaining items on the following rows. However I can't seem to be able to get spacing between the items vertically. Justify only works for the row and it's also limited to spacing between the items where you can't specify actual values like StackLayout.

Best Answer

  • zarxtzarxt
    Accepted Answer

    I ended up using a custom WrapLayout that I've found somewhere in the forum.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    It seems FlexLayout doesn't expose such api. But we can use a stackLayout wrapping your items, then set the item's margin to achieve this effect. Let's modify the official PhotoWrappingPage as an example:

    foreach (string filepath in imageList.Photos)
    {
        StackLayout stackLayout = new StackLayout();
        Image image = new Image
        {
            Source = ImageSource.FromUri(new Uri(filepath + urlSuffix))
        };
        stackLayout.Children.Add(image);
        image.Margin = new Thickness(0, 0, 5, 5);
        image.VerticalOptions = LayoutOptions.CenterAndExpand;
        flexLayout.Children.Add(stackLayout);
    }
    

    Modify the image's Margin to set the space between items vertically and horizontally.

  • JohnHardmanJohnHardman GBUniversity mod

    @zarxt - It looks like we're after the same thing. Did you get this working without adding a Margin to every child View?

    For reference, see: https://forums.xamarin.com/discussion/comment/351872/#Comment_351872 . The code from Evolve13 does work, but makes use of an API marked as deprecated.

  • zarxtzarxt Member
    Accepted Answer

    I ended up using a custom WrapLayout that I've found somewhere in the forum.

Sign In or Register to comment.