androidxamlmauiobservablecollectioncollectionview

Arrange CollectionView items consecutively


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?


Solution

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