Xamarin 表单列表视图设计

Question

How could I achieve the following , it is a list of many items . but the challenge is to add each item into that buble with the following design.

Open to any ideas

Answer 1

As Jason said, FlexLayout is a good way. And if you want to add rounded corners to a button, you could use BorderRadius property.

Xaml:

<ContentPage.Resources>
    <Style TargetType="FlexLayout">
        <Setter Property="AlignItems" Value="Start" />
        <Setter Property="Direction" Value="Row" />
        <Setter Property="Wrap" Value="Wrap" />
    </Style>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="Blue" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="Margin" Value="5" />
    </Style>
</ContentPage.Resources>

<FlexLayout AlignContent="Start">
    <Button BorderRadius="25" Text="WIFI" />
    <Button BorderRadius="25" Text="PROJECTOR" />
    <Button BorderRadius="25" Text="APPLE TV" />
    <Button BorderRadius="25" Text="COUCH" />
    <Button BorderRadius="25" Text="WHITEBOARD" />
    <Button BorderRadius="25" Text="CONFERENCE BRIDGE" />
</FlexLayout>

Updated:

Xaml:

  <ContentPage.Resources>
    <Style TargetType="FlexLayout">
        <Setter Property="AlignItems" Value="Start" />
        <Setter Property="Direction" Value="Row" />
        <Setter Property="Wrap" Value="Wrap" />
        <Setter Property="AlignContent" Value="Start" />
    </Style>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="Blue" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="Margin" Value="5" />
    </Style>
</ContentPage.Resources> 
<FlexLayout BindableLayout.ItemsSource="{Binding List}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Button BorderRadius="25" Text="{Binding Value}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

xaml.cs

public partial class MainPage : ContentPage
{

    public List<Values> List { get; set; }
    public MainPage()
    {
        InitializeComponent();

        List = new List<Values>()
        {
             new Values(){ Value="WIFI"},
             new Values(){ Value="PROJECTOR"},
             new Values(){ Value="APPLE TV"},
             new Values(){ Value="COUCH"},
             new Values(){ Value="WHITEBOARD"},
             new Values(){ Value="CONFERENCE BRIDGE"},
        };
        BindingContext = this;

    }
}
public class Values
{
    public string Value { get; set; }
}