Xamarin 表單列表視圖設計

Question

我怎樣才能實現以下目標，它是一個包含許多項目的列表。 但挑戰在於使用以下設計將每個項目添加到該氣泡中。

對任何想法持開放態度

Answer 1

正如 Jason 所說，FlexLayout 是一種很好的方式。 如果你想給按鈕添加圓角，你可以使用 BorderRadius 屬性。

Xml：

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

更新：

Xml：

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

文件

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