FlexLayout Child Image Margin

I'm trying to use FlexLayout to display a set of icons that the user can choose from.

I'm adding the icons using FlexLayout.Children.Add(), having added a gesture recogniser to each one as I go. This all works well.

How can I add some padding around each icon so they spread out a little more instead of being tight up against each other?

Best Answer

  • DavidPartingtonDavidPartington US ✭✭
    edited August 2018 Accepted Answer

    Solution. I added a margin to the image before adding as a child. Not sure why I didn't think of this earlier.

Answers

  • LuisDavidDelaCruzLuisDavidDelaCruz Member ✭✭✭

    FlexLayout has the property JustifyContent and AlignContent you can try using(With the two both) the next classes

    • SpaceAround
    • SpaceBetween
    • SpaceEvenly

    In XAML(example)

    <FlexLayout Direction="Column"
    AlignItems="Center"
    JustifyContent="SpaceEvenly">
    
  • DavidPartingtonDavidPartington USMember ✭✭
    edited August 2018

    Thanks for the suggestions. I don't think that makes any difference. There is still not space between them.

    My current setting is:

    < FlextLayout x:Name="FlexIcons"
    Wrap="Wrap"
    JustifyContent="SapecEvenly"
    AlignItems="Center"
    AlignContent="Start" />

    With this, all the Icons are still up against each other.

    p.s. How do you add code in a past?

  • DavidPartingtonDavidPartington USMember ✭✭
    edited August 2018 Accepted Answer

    Solution. I added a margin to the image before adding as a child. Not sure why I didn't think of this earlier.

Sign In or Register to comment.