CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
Gaurav Mathur
Gaurav Mathur

Reputation: 849

Remove extra space from FlexLayout

Question

I have a FlexLayout with following properties. Whenever any element is added to it(except the first one), extra space gets added automatically. How do I get rid of that extra space?

                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
            };

Here is the result -

enter image description here

Detailed Question

My scenario is to add multiple Flexlayouts inside a StackLayout which is child of a ScrollView. Everything is working fine except Flexlayouts takes lot of unused white space, I want them to fit to children.

So far I have tried 1. Lot of permutation combinations of FlexLayout properties. 2. Putting Flexlayout inside StackLayout/ Grid with VerticalOptionsset to Start

XAML

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

C# Code behind

        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); 
        }
    }

Above code gives following result, screenshot is from a UWP app but the result is same for Android also -

enter image description here

I am expecting something like this, there is no empty space after array of buttons.

enter image description here

Upvotes: 3

Views: 1431

Answers (3)

parpar
parpar

Reputation: 103

Don't use GRID inside FlexLyout it will give a huge WHITE SPACE, Use StackLayout instead

Upvotes: 1

Lucas Zhang
Lucas Zhang

Reputation: 18861

Cause: The parent layout of FlexLayout is a StackLayout .And StackLayout will fit the size of its child elements.

Solution: Use Grid instead of Stacklayout 

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

  for (int i = 0; i < 5; i++)
  {
    var grid = new Grid
    {
       BackgroundColor = Color.Green
    };


    grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });


    var fButton = new Button { Text = "B", HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50 };

    grid.Children.Add(fButton, 0, 0);


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


    var flexLayout = new FlexLayout
    {
       Wrap = FlexWrap.Wrap,
       JustifyContent = FlexJustify.SpaceAround,
       AlignItems = FlexAlignItems.Start,
       AlignContent = FlexAlignContent.Start,
       BackgroundColor = Color.Red,
       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);
     }


     grid.Children.Add(flexLayout, 2, 0);
     RootPanel.Children.Add(grid);
  }
}

enter image description here

Upvotes: 4

Libin Joseph
Libin Joseph

Reputation: 7352

Mark the StackLayout Spacing value to 0. There is a default spacing of 10 points. https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout.spacing?view=xamarin-forms

Upvotes: 0

Related Questions