Дизайн списка форм Xamarin

Question

Как можно добиться следующего, это список из множества предметов. но задача состоит в том, чтобы добавить каждый элемент в эту корзину со следующим дизайном.

Открыть для любых идей

Answer 1

Как сказал Джейсон, FlexLayout - хороший способ. А если вы хотите добавить закругленные углы к кнопке, вы можете использовать свойство BorderRadius.

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>

Обновлено:

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