Arrange CollectionView items consecutively

Question

Using MVVM, I have a simple CollectionView:

<CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Margin="5,0" FontSize="14" Text="{Binding MyText}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

I don't want to display items like this: enter image description here Not like this: enter image description here

I want items like this: enter image description here

I searched a lot and did not find the solution. How can this be done?

Answer 1

Yes, you can use FlexLayout to achieve this function just as Jason mentioned.

I have achieved this function, you can refer to the following code:

TestPage.xaml

    <Grid> 
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                    Wrap="Wrap"
                    JustifyContent="SpaceAround" />
        </ScrollView>

        <ActivityIndicator x:Name="activityIndicator"
                       IsRunning="True"
                       VerticalOptions="Center" />
    </Grid>

TestPage.xaml.cs

public partial class TestPage : ContentPage
    {

        public List<string> Items { get; set; }

        public TestPage()
        {
            InitializeComponent();

            LoadCollection();
        }

        async void LoadCollection()
        {
            try
            {   //initialize some data for Items
                Items = new List<string>(DataService.Fruits);

                // Create an  Label for each item
                foreach (string item in Items)
                {
                    Label label = new Label
                    {
                        Text = item
                    };
                    flexLayout.Children.Add(label);
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot create list"
                });
            }

            activityIndicator.IsRunning = false;
            activityIndicator.IsVisible = false;
        }
    }