Supprimer l'espace supplémentaire de FlexLayout

Question

J'ai un FlexLayout avec les propriétés suivantes. Chaque fois qu'un élément y est ajouté (sauf le premier), de l'espace supplémentaire est ajouté automatiquement. Comment puis-je me débarrasser de cet espace supplémentaire?

        private void Draw()
    {
        string[] data = new string[] { "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1" };

        for (int i = 0; i < 5; i++)
        {
            var tempLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.Start
            };
            var fButton = new Button { Text = "B", HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50 };
            tempLayout.Children.Add(fButton);

            var equals = new Label { Text = "=>", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
            tempLayout.Children.Add(equals);

            var flexLayout = new FlexLayout
            {
                Wrap = FlexWrap.Wrap,
                JustifyContent = FlexJustify.Start,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Start,
                BackgroundColor = Color.LightYellow,
                HorizontalOptions = LayoutOptions.FillAndExpand
            };

            foreach (var term in data)
            {
                var button = new Button { Text = term, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, HeightRequest = 36 };
                flexLayout.Children.Add(button);

                var label = new Label { Text = "and", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
                flexLayout.Children.Add(label);
            }

            //var grid = new Grid { HorizontalOptions = LayoutOptions.StartAndExpand, VerticalOptions = LayoutOptions.Start, BackgroundColor = Color.Red };
            //grid.Children.Add(flexLayout);
            tempLayout.Children.Add(flexLayout);
            //Grid.SetColumn(tempLayout, 1);
            //grid.Children.Add(tempLayout);

            RootPanel.Children.Add(tempLayout); 
        }
    }

Voici le résultat -

Question détaillée

Mon scénario consiste à ajouter plusieurs Flexlayouts dans un StackLayout qui est l'enfant de a ScrollView . Tout fonctionne bien sauf que Flexlayouts prend beaucoup d'espace blanc inutilisé, je veux qu'ils s'adaptent aux enfants.

Jusqu'à présent, j'ai essayé 1. Beaucoup de combinaisons de permutation des propriétés FlexLayout. 2. Mettre Flexlayout dans StackLayout / Grid avec VerticalOptions défini sur Start

XAML

 <Grid>
    <ScrollView HorizontalScrollBarVisibility="Never">
        <StackLayout x:Name="RootPanel" BackgroundColor="Cyan" Padding="5"/>
    </ScrollView>
</Grid>

C # Code derrière

                var flexLayout = new FlexLayout
            {
                Wrap = FlexWrap.Wrap,
                JustifyContent = FlexJustify.Start,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Start,
                BackgroundColor = Color.LightYellow,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start
            };

Le code ci-dessus donne le résultat suivant, la capture d'écran provient d'une application UWP mais le résultat est le même pour Android aussi -

Je m'attends à quelque chose comme ça, il n'y a pas d'espace vide après le tableau de boutons.