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