Binding Fontawesome icons to a dynamic list in Xamarin

Question

I have a list of icons that need to be dynamically bound to a Xamarin page.

The Xaml is:

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

where Features is a comma separated list of Fontawesome icons. Hardcoded hex values work

  

Unicode values just render as

"\uf236  \uf1eb"

How can I get the list of icons to render as a complete list?

Ok this is really strange.

This works

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

This doesnt

FeaturesList = model.Features;

Where Features list is the bound list on the page. Model.features contains exactly the same values as the string features. Thanks for all the help

Answer 1

Based on your statement

where Features is a comma separated list of Fontawesome icons. Hardcoded hex values work

I will assume the below code interpretation of Features, you will need to:

• Split each icon's code and remove extra spaces.
• Assign divided icon's codes to a List<string> property, in order to bind to the 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();
    }

In your UI you can use bind IconsList property using BindableLayout, CollectionView or ListView:

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

Note

If you are adding/removing (not only during first appearing of the page), then you may need to change the type List<string> to ObservableCollection<string>.

This answer doesn't cover how to set-up fonteawesome icons for that take a look at How to use Font Awesome icons in project as an icon of ImageButton

Docs

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

• BindableLayout

Answer 2

You can also use a single Label to implement it .

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

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

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

Code behind

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

Refer to

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