Can't get custom fonts to display at runtime - Windows Phone 8.1 MVVM - FontAwesome

Question

I am having trouble with custom fonts in my Windows Phone 8.1 MVVM app.

I am using FontAwesome icons. I have included the FontAwesome font file in my project. When I set a static control such as this, it works perfectly;

<TextBlock x:Name="txtTest" Grid.Row="3" Text="&#xf236;" Foreground="Black" FontSize="20" FontFamily="/Assets/Fonts/FontAwesome.ttf#FontAwesome"/>

However, what I need is for this to work dynamically. I have a Hub control on the main page of the app, with ListViews in each Hub section. These are bound to a collection of custom objects, populated from an API response. When creating the collection of objects, the code looks for a marker in the response and dynamically sets the FontAwesome icon depending on the marker.

Hub Section code:

<HubSection x:Uid="hubApproved" Header="Approved"
                    DataContext="{Binding MyObjects.Approved}" 
                    d:DataContext="{Binding MyObjects.Approved}"
                    HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
            <DataTemplate>
                <ListView
                    ItemsSource="{Binding}"                                                   
                    ItemTemplate="{ThemeResource ApprovedTemplate}"                        
                    IsItemClickEnabled="True"
                    ItemClick="ListView_ItemClick"
                    ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                </ListView>
            </DataTemplate>
        </HubSection>

And here is the Approved Template which binds to this:

<DataTemplate x:Key="ApprovedTemplate">
    <StackPanel Margin="0,0,0,19" Background="{x:Null}" >
        <TextBlock FontFamily="/Assets/Fonts/FontAwesome.ttf#FontAwesome" Text="{Binding Icon}" Foreground="Black" />
        <TextBlock Text="{Binding SupplierName}" Style="{ThemeResource ListViewItemTripNameTextBlockStyle}" />            
        <TextBlock Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" Text="{Binding StartDate}"></TextBlock>
    </StackPanel>
</DataTemplate>

The Template contains a TextBlock which binds to the Icon property of my object. This is supposed to then display the appropriate FontAwesome icon, but instead just displays the unicode of the icon:

I have tried defining the font family of the Hub control from the code behind in the view, but it has no effect:

Hub.FontFamily = new FontFamily("ms-appx:///Assets/Fonts/FontAwesome.otf#FontAwesome");

Any ideas on how to dynamically get these icons to display...? Thanks

Answer 1

You should be able to do it like this:

FontFamily fontFam = new FontFamily("ms-appx:///Assets/Fonts/FontAwesome.otf#FontAwesome");

and set FontFamily like this:

Hub.FontFamily = fontFam

Answer 2

I solved this with a workaround. The icons in my ListView will only ever be 1 of 5 possible icons. So instead of setting the unicode, I created 5 different textbox objects in the template definition, one for each icon. The unicode is static, so the dynamic aspect is instead the Visibility of each object. I created corresponding XAML Visibility properties on the custom object. After this, the style object is bound to its Visibility property, like so:

<!--Generic (shopping cart icon)-->
<TextBlock FontFamily="/Assets/Fonts/FontAwesome.otf#FontAwesome" Grid.Column="0" Text="&#xf07a;" Style="{ThemeResource ListViewItemTripNameTextBlockStyle}" 
                   VerticalAlignment="Center" Visibility="{Binding VisGeneric}" />

Then when I create the object collection from the API response, I set the appropriate visibility property to be Visible, according the the marker in the response.

I'd like a slightly more elegant solution than this, but essentially it works...