Xamarin.Forms FlexLayout resize to a max value

user_4369951 0
Viewed 2765

I've got a FlexLayout inside my Xamarin.Forms Application which displays some Frames. The problem is, that if i set FlexLayout.Grow="1", the last frames not completly filling a column will grow to the size where they fill it. But if I set FlexLayout.Grow="0" there will be some empty space at the end of each colum.

A simple example

As you can see under Allergens there is a little space at the end of each column which will grow when resizing the Window until a fifth item will fit into the column (when FlexLayout.Grow="0" set). But if I set FlexLayout.Grow="1" will resize to fil the entire column space until a fifth item will fit into the column. Then all items will resize to their minimum. This is what it should be, BUT I don't want the last items to grow infinitly. See this image:

enter image description here

Here is the code for the FlexLayout:

                <StackLayout Grid.Row="11">
                    <flexLayouts:ExtendedFlexLayout Margin="5,0,5,0"
                                                    Direction="Row"
                                                    Wrap="Wrap"
                                                    VerticalOptions="Start"
                                                    AlignItems="Start"
                                                    JustifyContent="Start"
                                                    ItemsSource="{Binding Allergens}">
                        <flexLayouts:ExtendedFlexLayout.ItemTemplate>
                            <DataTemplate>
                                <details:BeverageDetailsView FlexLayout.Grow="1" />
                            </DataTemplate>
                        </flexLayouts:ExtendedFlexLayout.ItemTemplate>
                    </flexLayouts:ExtendedFlexLayout>
                </StackLayout>

Is there a way to stop the remaining items from resizing to that big ones? Thanks for any help

xamarin.forms xamarin user-interface c#
2 Answers

Solution:

I think the length of right empty space depending on your widthRequest of item.And the widthRequest will be calculated by the screen width and margin of boxView.

For example, if you want put 4 items in a row and the boxMargin here is 10.

You should first get screen width, you can refer to http://stackoverflow.com/a/26504582/283974

And then, you can calculate the widthRequest of items.

Because there are 4 items in a row, each item has a left and right margin,so there is 8 margins in a row. So the screenWidth should minus itemsInRow *2 * margin.

  float screenWidth = 375;//375 is an example ,you should use screen width in your code
  float margin = 10;
  float itemsInRow = 4;
  float widthRequest = (screenWidth - itemsInRow *2 * margin)/4;

Set the widthRequest to the item in Xaml, then the length of left space and right space will become same.

I add a image here to make it clear:

widthRequest

user_105394460

I solved this by using a template selector and adding a couple null items to the end of the collection. The template selector selects the regular template for the display items, and a template with an empty grid for null items. I created the collection in my view model by wrapping the observable collection and having my view model collection always present N more items as null values.

user_21497140
Related