将 Fontawesome 图标绑定到 Xamarin 中的动态列表

Question

我有一个需要动态绑定到 Xamarin 页面的图标列表。

Xaml 是：

<Label
    Grid.Row="2"
    Grid.ColumnSpan="4"
    HorizontalOptions="Start"
    Style="{StaticResource IconLabelStyle}"
    Text="{Binding Features}"/>

其中 Features 是一个逗号分隔的 Fontawesome 图标列表。硬编码的十六进制值有效

  

Unicode 值只是呈现为

"\uf236  \uf1eb"

如何获取要呈现为完整列表的图标列表？

好吧，这真的很奇怪。

这行得通

 string features = "\uf236  \uf1eb \uf540  \uf2e7  \uf2cc \uf084 \uf26c \uf001 \ue065 \uf206";
FeaturesList = features;

这不是

FeaturesList = model.Features;

其中Features list是页面上的绑定列表。 Model.features 包含与字符串特征完全相同的值。感谢大家的帮助

Answer 1

根据您的陈述

其中 Features 是一个逗号分隔的 Fontawesome 图标列表。硬编码的十六进制值有效

我将假设Features 的以下代码解释，您将需要：

• 拆分每个图标的代码并删除多余的空格。
• 将分割图标的代码分配给 List<string> 属性，以便绑定到 UI。

string Features = "\uf236, \uf1eb, \uf540, \uf2e7, \uf2cc, \uf084, \uf26c, \uf001, \ue065, \uf206";
public List<string> IconsList { get; set; }

    public MainPage()
    {
        BindingContext = this;
        IconsList = Features.Trim().Split(',').Select(x => x.Trim()).ToList();
        InitializeComponent();
    }

在您的 UI 中，您可以使用 BindableLayout、CollectionView 或 ListView 来绑定 IconsList 属性：

<StackLayout BindableLayout.ItemsSource="{Binding IconsList}" Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Label FontFamily="FontAwesome" Text="{Binding .}"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

注意

如果您正在添加/删除（不仅是在页面首次出现期间），那么您可能需要将类型 List<string> 更改为 ObservableCollection<string>。

这个答案不包括如何设置 fonteawesome 图标，看看How to use Font Awesome icons in project as an icon of ImageButton

文档

• How to separate strings using String.Split in C#: .Split()

• BindableLayout

Answer 2

您也可以使用单个Label 来实现它。

自定义标签

public class MyLabel : Label
{
    public static readonly BindableProperty MyTextProperty =
      BindableProperty.Create("MyText", typeof(string), typeof(MyLabel), null, propertyChanged: BindingPropertyChangedDelegate);

    public string MyText
    {
        get { return (string)GetValue(MyTextProperty); }
        set { SetValue(MyTextProperty, value); }
    }

    static void BindingPropertyChangedDelegate(BindableObject bindable, object oldValue, object newValue)
    {
        if (newValue == null) return;

        var IconsList = ((string)newValue).Trim().Split(',').Select(x => x.Trim()).ToList();

        if (IconsList == null || IconsList.Count == 0) return;

        FormattedString text = new FormattedString();

        foreach(var str in IconsList)
        {
            text.Spans.Add(new Span { Text = "  " });
            text.Spans.Add(new Span { Text = str, FontFamily = "FontAwesomeSolid"});
        }

        ((Label)bindable).FormattedText = text;
    }
}

Xaml 用法

xmlns:local="clr-namespace:MyForms.View"

<local:MyLabel MyText="{Binding Features}"/>

后面的代码

Features = "\uf164,\uf140,\uf236,\uf1eb,\uf5e1,\uf14a,\uf14b,\uf520,\uf14d,\uf14e,\uf578,\uf15c";
this.BindingContext = this;

参考

https://devblogs.microsoft.com/xamarin/embedded-fonts-xamarin-forms/