locked
Display Xamarin Font Icons From Stored Data RRS feed

  • Question

  • User356319 posted

    Hello! What is the best way to display font icons with data being pulled from a web service? I want to store the value of the icon and display the icon similar to the rest of the information, but with a custom font icon.

    I have a xamarin forms app working with data from a webservice successfully. Here is my model.

    public class TypeModel
    {
        [PrimaryKey]
        public int pType { get; set; }
    
        public int fDepartment { get; set; }
    
        public string Title { get; set; }
    
        public string Description { get; set; }
    
        public string Icon { get; set; }
    
        public string Version { get; set; }
    
    }
    

    I also got the font icons working successfully like the tutorial at [1]: https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/ I got my icons stored under this class. Trying to transition to managing these values with web service or array if I have too now.

    public const string IconCheckMark = "\uf12c";
    
    public const string IconSearchGlass = "\uf349";
    
    public const string IconQuestionMark = "\uf2d6";
    
    public const string IconQuestionCircle = "\uf2d7";
    

    But here is where my problem starts. My ViewModel is doing the work to create the collection. How do I assign a value that will display and match correctly.

    public ObservableCollection<TypeModel> TypesCollection { get; set; }
    
    TypesCollection.Clear();
    
    IEnumerable<TypeModel> types = await DataSource.GetTypes();
    
    foreach (var key in types)
    {
        \\Original value doesn't display correctly, shows like \U f 1 2 c when debugging on emulator
        \\key.Icon = key.Icon;
    
        \\Works and displays correctly but static data displays one icons for all
        \\key.Icon = "\uf12c";
    
        \\Works and displays correctly but static data displays one icons for all
        \\key.Icon = FontClass.IconCheckMark;
    
        TypesCollection.Add(key);    
    }
    

    Nice and simple after that for the xaml files.

    <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>
    
    <Label FontFamily="{StaticResource IconFonts}" Text="{Binding Icon}"></Label>
    
    Wednesday, April 29, 2020 10:05 PM

Answers

  • User356319 posted

    Got the answer from Microsoft Dev Community. First to explain what was happening: When you put the following in C# code:

    Icon = "\uf2d6"

    The “\uf2d6” is not actually a literal string, but rather it ends up being a single character (the one represented by that UTF code) at compile time. In other words the “\u” means that what follows is a hex code for a character and that whole “string” will end up just being that one character. If you inspect the Icon property after the above assignment, you will see that the property only contains a single character, not the “\uf2d6” string.

    So when you get “2d6” from your web service in the Icon property, and then try to add “\uf” before it, you are not creating the escape sequence for the character but rather adding to the string literal. So what you need to do is parse the string for the hex number into an int and then cast it to a char and then assign that character to your Icon property. You can do this as follows (put this in the foreach loop in the sample you sent me):

    string utfCode = $"f{key.Icon}"; // Adds the leading “f” to make it a correct hex number for the desired UTF code. int character = int.Parse(utfCode, System.Globalization.NumberStyles.HexNumber); // parses that string literal into an int key.Icon = ((char)character).ToString(); // casts that int to a char and then gets the string representation for that character and assigns it back to your Icon property

    TypesCollection.Add(key);

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, May 21, 2020 5:14 PM

All replies

  • User371688 posted

    Thank you for posting in Developer Community. Good question! I will try myself.. And I’ll get back to you as soon as I have an update. Much appreciated for your patience.

    Thursday, April 30, 2020 9:56 AM
  • User356319 posted

    hmm. looking at locals when debugging and it shows "\uf12c" and I have \uf12c stored in database.

    Thursday, May 7, 2020 7:06 PM
  • User356319 posted

    and the only way I have done it successfully is created and fill the model manually example: new TypeModel { pType = 12345 Icon = CheckIcon.IconCheckMark } rather than pulling from a webservice and looping through the data

    Thursday, May 7, 2020 7:07 PM
  • User356319 posted

    Checked webservice and don't see anything alarming. I even dumbed down the data by only providing the value (example 987 rather than \uf987) and using Insert(0, @"\uf") but the debugger keeps coming back with the string \ \uf987. Going to try working with 驪 format.

    Wednesday, May 13, 2020 4:10 PM
  • User356319 posted

    Got the answer from Microsoft Dev Community. First to explain what was happening: When you put the following in C# code:

    Icon = "\uf2d6"

    The “\uf2d6” is not actually a literal string, but rather it ends up being a single character (the one represented by that UTF code) at compile time. In other words the “\u” means that what follows is a hex code for a character and that whole “string” will end up just being that one character. If you inspect the Icon property after the above assignment, you will see that the property only contains a single character, not the “\uf2d6” string.

    So when you get “2d6” from your web service in the Icon property, and then try to add “\uf” before it, you are not creating the escape sequence for the character but rather adding to the string literal. So what you need to do is parse the string for the hex number into an int and then cast it to a char and then assign that character to your Icon property. You can do this as follows (put this in the foreach loop in the sample you sent me):

    string utfCode = $"f{key.Icon}"; // Adds the leading “f” to make it a correct hex number for the desired UTF code. int character = int.Parse(utfCode, System.Globalization.NumberStyles.HexNumber); // parses that string literal into an int key.Icon = ((char)character).ToString(); // casts that int to a char and then gets the string representation for that character and assigns it back to your Icon property

    TypesCollection.Add(key);

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, May 21, 2020 5:14 PM