Intro
I want to use the same Font Awesome 5 icons in the mobile app as I do on a website.
The following XAML snippet shows the icon perfectly.
<!-- Events.xaml -->
<Label Text="" FontFamily="{StaticResource FA-Solid}" />
I wish to bind the data received from JSON to the Text
value for this icon.
The problem is that I can't convert Font Awesome code to a working Unicode in C#, and sending the Unicode directly adds a backslash before the code in JSON. Note that the letter č
is correctly converted to it's Unicode equivalent in JSON. But how do I send the actual icon to JSON for it to convert it to the correct Unicode?
Creating JSON [PHP]
# api.php
$data = fetch_database_table_into_associative_array(); // Function made up for explanation
/*
[
0 => [
'title' => 'Tečaj',
'icon' => 'f51c',
],
1 => [ ... ],
...
]
*/
die(json_encode(['events' => $data]));
/*
{
"events":[
{
"title":"Te\u010daj",
"icon":"f51c"
},
{
...
},
...
]
}
*/
Receiving and converting response [C#]
Fetching data asynchronously with HttpClient.GetAsync
, reading it to string and deserializing to my object works perfectly well.
Event
is
public class Event
{
[JsonProperty("title")]
public string Title { get; set; }
[JsonProperty("icon")]
public string Icon { get; set; }
}
and collection of all events is List<Event> Events
with data filled.
Attempt 1
<!-- Events.xaml -->
<Label Text="{Binding Icon}" FontFamily="{StaticResource FA-Solid}" />
This (obviously) renders text f51c
.
Attempt 2
<!-- Events.xaml -->
<Label Text="&#x{Binding Icon};" FontFamily="{StaticResource FA-Solid}" />
This fails to bind anything.
Attempt 3
Added property FormattedIcon to model Event and tried
// Events.cs
foreach (var Event in Events)
{
Event.FormattedIcon = "&#x" + Event.Icon + ";";
}
<!-- Events.xaml -->
<Label Text="{Binding FormattedIcon}" FontFamily="{StaticResource FA-Solid}" />
This renders Unicode (I think without the ending ;
) instead of icon.
Attempt 4
After reading that &#x...;
format is for XAML and \u...
for code-behind on SO I changed the statement from inside the foreach
loop (Attempt 3)
// Events.cs
foreach (var Event in Events)
{
Event.FormattedIcon = "\u" + Event.Icon;
}
This causes an error and does not compile.
Attempt 5
Same as above but tried to escape the backslash.
// Events.cs
foreach (var Event in Events)
{
Event.FormattedIcon = "\\u" + Event.Icon;
}
Renders the Unicode again (in different format than Attempt 3).
Attempt 6 & 7
Went back to JSON creation in PHP and replaced 'icon' => 'f51c'
with 'icon' => '\uf51c'
as well as 'icon' => "\uf51c"
, and in both cases json_encode
converted the icon string into \\uf51c
ie. backslash was added before string.
So lastly I tried to remove just the first backslash in code-behind with
// Events.cs
foreach (var Event in Events)
{
Event.FormattedIcon = Event.Icon.Substring(1);
}
but it just removed the escaped backslash and rendered uf51c
;
Attempt 8
Changed JSON data back to just 'icon' => 'f51c'
. Changed string FormattedIcon
to char FormattedIcon
in model Event
. Tried to read string as Unicode character.
// Events.cs
foreach (var Event in Events)
{
int characterCode = Convert.ToInt32(Event.Icon);
Event.FormattedIcon = (char)characterCode;
}
Error with converting
Attempt 9
Changed char FormattedIcon
back to string FormattedIcon
in model Event
as per SO.
// Events.cs
foreach (var Event in Events)
{
int characterCode = int.Parse(Event.Icon, System.Globalization.NumberStyles.HexNumber);
Event.FormattedIcon = Char.ConvertFromUtf32(characterCode);
}
Error with converting (System.FormatException: 'Input string was not in a correct format.'
)
Help
Any suggestions on lucky number 10 ?