Question

我有以下标签：

<Label Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" TextColor="Green"/>

按钮上的事件：

correctButton.Clicked += (sender, e) =>
{
   App.DB.IncrementScore();
};

这样做的每次我点击按钮时我的分数都会增加1.我想要做的是根据分数增加Label的数量。请参见下图：

任何人都知道如何实现这一目标？

Answer 1

这个问题有不同的解决方案。在选择之前一定要仔细阅读所有这些内容 - 我最喜欢的（最简单的一个）一直列在其中......

方法＃1：

正如有几个人建议的那样，你可以创建一些集合控件（稍后我会介绍），在ViewModel中定义ObservableCollection，将Page的Binding Context设置为一个实例ViewModel，并在按钮点击时将项添加到集合中：

public class MyViewModel()
{
    public ObservableCollection<int> Items { get; set; } = new ObservableCollection<int>();
}

private MyViewModel _viewModel = new MyViewModel();
public MainPage()
{
    InitializeComponent();

    BindingContext = _viewModel;
}

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    _viewModel.Items.Add(0);
};

ObservableCollection的类型实际上并不重要，因为我们对所有项目使用相同的静态ItemTemplate：

<ContentPage.Resources>
    <DataTemplate x:Key="ScoreItemTemplate">
        <ViewCell>
            <ViewCell.View>
                <Label Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" TextColor="Green"/>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ContentPage.Resources>

此方法的主要问题是Xamarin.Forms ListView无法水平显示其项目。这意味着，您需要下载其中一个可用的HorizontalListView Nuget包，或使用built-in (only in Xamarin.Forms 2.3 and above!) CarouselView：

<CarouselView ItemTemplate="{StaticResource ScoreItemTemplate}" ItemsSource="{Binding Items}"/>

然后，您可能希望花一些时间去除所有视觉效果以通过旋转木马滑动，以及如果您选择使用水平ListView来选择项目......

相反，有两种替代解决方案需要较少的努力：

方法＃2：

显然，简单的方法是在代码中创建“模板”标签：

private Label CreateScoreLabel()
{
    return new Label {Text = FontAwesome.FACheck, TextColor = Color.Green, FontFamily = "FontAwesome"};
}

...在页面中添加水平StackLayout：

<StackLayout Orientation="Horizontal" x:Name="LabelStack"/>

...并以艰难的方式添加新标签：

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    LabelStack.Children.Add(CreateScoreLabel());
};

但是，所有这些似乎都只是为了创建一个绿色复选标记列表。这导致我们......

...方法＃3：

从技术上讲，这并不是您要求的（增加标签数量），但根据您的屏幕截图，它可能会以更简单的方式满足您的需求。

删除现有标签的文本（因为它在启动时不显示任何内容），而是给它一个唯一的名称：

<Label x:Name="ScoreLabel" FontFamily="FontAwesome" TextColor="Green"/>

现在，为string类型定义一个简单的扩展方法，该方法重复给定字符串一定次数：

public static class StringExtensions
{
    public static string Repeat(this string input, int num)
    {
        return String.Concat(Enumerable.Repeat(input, num));
    }
}

（有多种方法可以使这个重复功能尽可能高效，我只选择最简单的单线程，搜索StackOverflow进行详细讨论......）

您现在可以使用XAML中定义的单个Label控件，只需在按钮点击时为其指定几个复选标记：

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    ScoreLabel.Text = FontAwesome.FACheck.Repeat(App.DB.Score); // replace parameter by whatever method allows you to access the current score number
};

当然，这种方法也可以通过简单地使用公共可绑定string属性而不是直接设置标签的Text属性来适应MMVM方式，但为此我建议你来看看初学者的MVVM教程。

Answer 2

只需在按钮点击事件中插入新的标签代码，即在分数堆栈中添加新的孩子。

cs页码： -

def split_the_bill(x):
    keys = list(x.values())
    keys2 = list(x.keys())
    average = mean(keys)
    keys3 = [(round(i-average, 1)) for i in keys]
    ans = dict( zip( keys2, keys3))
    return ans

xamal code

button.Clicked += (sender, e) =>
    {
        App.DB.IncrementScore();
        lblStack.Children.Add(new Label {Text = FontAwesome.FACheck, TextColor = Color.Green, FontFamily = "FontAwesome"});
    };

Answer 3

如果分数有最大值，只需添加最大标签数并绑定其可见性。

或者您可以制作标签的列表视图，并将源绑定到您需要时递增的集合。

Answer 4

注意：我不确定这个答案是否正确，但评论时间太长。只是测试它，如果它不起作用，我将删除这个答案

您可以通过编程方式添加控件。请注意，您需要在MainThread上添加Label，因为它是对UI的更改。将其添加到您的Clicked活动中：

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    Device.BeginInvokeOnMainThread(() => // On MainThread because it's a change in your UI
    {
        Label label = new Label();
        label.Text = "{x:Static local:FontAwesome.FACheck}"; // Not sure if this is right syntax...
        label.FontFamily = "FontAwesome";
        label.TextColor = Color.Green;
        stackPanel.Children.Add(label);
    });
};

如果您有Grid，则可以使用Grid.Row的{{1}}方法设置Grid.Column和SetValue：

Control

在Xamarin Forms中添加多个标签

4 个答案: