英文:
Xamarin Forms list view design
问题
你好，以下是您要翻译的内容：
"如何实现以下操作，这是许多项目的列表。但挑战在于将每个项目添加到该气泡中，具有以下设计。
欢迎任何想法"
请问您还需要其他帮助吗？
英文:
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
答案1
得分: 1
以下是您要翻译的内容：
正如Jason所说，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; }
}
希望这对您有所帮助！
英文:
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; }
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论