With a FlexLayout wrap, how can I make a space between rows?

user_1422604 0
Viewed 1876

I am using a FlexLayout to try and make buttons wrap around. It works but there is no space between rows of the buttons.

Does anyone have any idea how I can ensure there's a space between. Here's the XAML that I am using and below is what it looks like:

<StackLayout Orientation="Vertical" 
             BackgroundColor="{DynamicResource GridBackgroundColor}" 
             Spacing="0" 
             Padding="20" >
    <FlexLayout x:Name="flexLayout"
        Wrap="Wrap"
        JustifyContent="SpaceAround" >
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Introduction" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Learning" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Home" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Help" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Settings" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Dictionary" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Cards" />

    </FlexLayout>
</StackLayout>

enter image description here

xamarin.forms xamarin
1 Answers

Solution:

Try to add HeightRequest and/or WidthRequest of your button.

 <ContentPage.Resources>
            <Style TargetType="Button">
                <Setter Property="HeightRequest" Value="40"></Setter>
                <Setter Property="Margin" Value="5"></Setter>
            </Style>

        </ContentPage.Resources>

        <StackLayout Orientation="Vertical" 
                 BackgroundColor="{DynamicResource GridBackgroundColor}" 
                 Spacing="0" 
                 Padding="20">
            <FlexLayout
                            Wrap="Wrap"
                            JustifyContent="SpaceAround" 
                            Direction="Row">
                <Button BackgroundColor="Silver"   Text="Introduction" />
                <Button BackgroundColor="Silver"  Text="Learning" />
                <Button BackgroundColor="Silver"   Text="Home" />
                <Button BackgroundColor="Silver"   Text="Help" />
                <Button BackgroundColor="Silver"   Text="Settings" />
                <Button BackgroundColor="Silver"  Text="Dictionary" />
                <Button BackgroundColor="Silver"   Text="Cards" />

            </FlexLayout>
        </StackLayout>
user_105394460
Related