Xamarin MVVM Custom Font Not Working In Data Template

Question

Having trouble with using a font. Works fine when I to the following down below.

FontFamily="{StaticResource IconFonts}" Text=""

But it doesn't work if I try to dynamically bind the text property.

FontFamily="{StaticResource IconFonts}" Text="{Binding Comments}"

It shows up all weird. It looks like it tries to do something but doesn't completely render. Here is the full code with my testing included down below. Thanks in advance.

<FlexLayout x:Name="FlexFood"
        Wrap="Wrap"
        Direction="Row"
        JustifyContent="Start"
        Padding="0, 10"
        BindableLayout.ItemsSource="{Binding FoodCollection}">
<BindableLayout.ItemTemplate>
    <DataTemplate>
        <StackLayout Padding="5, 0">

                    <Frame.GestureRecognizers>

                        <TapGestureRecognizer Tapped="OnTypesSelected"></TapGestureRecognizer>

                    </Frame.GestureRecognizers>

                    <Frame.Content>
                        <StackLayout x:Name="LayoutFood">

                            <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                                <Label x:Name="LabelTitle" Padding="0, 10">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span FontSize="Subtitle" Text="{Binding Title}" FontAttributes="Bold"></Span>
                                        <Span Text=" "></Span>
                                        <Span FontSize="Subtitle" Text="{Binding Version}" FontAttributes="Bold"></Span>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">

                            <StackLayout HorizontalOptions="StartAndExpand">

                                <Label Text="{Binding Description}" FontSize="Body"></Label>-->
                                <Label FontSize="Caption" TextColor="#LELELE">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding fDepartment}"></Span>
                                            <Span Text="{Binding pType}"></Span>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>

                            </StackLayout>

                            <StackLayout HorizontalOptions="End">

                            <Label Text="{Binding Comments}"></Label>

                            <Label FontFamily="{StaticResource IconFonts}" Text="&#xf139;"></Label>

                            <Label x:Name="LabelTypeTest" FontFamily="{StaticResource IconFonts}"
                                    Text="{Binding Comments, StringFormat='&#xf123;'}"></Label>

                            <Label FontFamily="{StaticResource IconFonts}" Text="{Binding Comments}"></Label>

                            <Image x:Name="ImageTypeTest">
                                <Image.Source>
                                    <FontImageSource Size="48" FontFamily="{StaticResource IconFonts}" Color="#000000"></FontImageSource>
                                </Image.Source>
                            </Image>

                            </StackLayout>

                            </StackLayout>

                        </StackLayout>
                    </Frame.Content>

            </helper:LayoutGradient>
        </StackLayout>
    </DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>

Here is the static resource in app

<ResourceDictionary>

    <OnPlatform x:Key="IconFonts" x:TypeArguments="x:String">

        <On Platform="iOS" Value="Material Design Icons"></On>

        <On Platform="Android" Value="IconFonts.ttf#Material Design Icons"></On>

        <On Platform="UWP" Value="/Assets/IconFonts.ttf#Material Design Icons"></On>

    </OnPlatform>

</ResourceDictionary>

Answer 1

You should return the escape sequence of \uf139 from your binding instead of &#xf139;

You can read the Access from Bindings and Access Directly in XAML section in the source link for more information.

Refer: xamarin-forms-fontawesome-doesnt-work-with-bound-properties