Search code examples
c#wpfxamliconsstaticresource

Question about encoding string Icons in xaml

I was looking in a project and realized that they used some strings like this

<system:String x:Key="icon-arrow-right">&#xedd3;</system:String>

and then in a XAML form they used it like this

      <Button  Content="{StaticResource icon-arrow-right}" />

I wonder how the encoding works and also is there a place to find a list of icons and their related code like &#xedd3 that I mentioned before?

Solution

  • XAML is essentially xml and that is xml numeric specifying a character. You can look them up. Often shown as html numeric codes in web pages show such things.

    EG α would be alpha.
    https://www.rapidtables.com/code/text/unicode-characters.html

    You could alternatively find a character from that page and paste it in. Like

    <system:String x:Key="icon-alpha">α</system:String>

    That would be my preference for a string since you can see it right there.

    This is quite a limited way of doing icons though. You ought to get a fairly smooth character if the font size matches what you need because it's true type. But font size doesn't scale.
    I tend to use geometries for iconography and fancy lettering. The geometry then defines the data for a path. I would usually put such geometries in a separate resource dictionary which is merged in app.xaml.

    To give you a rough idea.

    <Window.Resources>
    <Geometry x:Key="icon_Play_Geometry">
        "M36,16.8,46.8 36,76.8 36,16.8z"
    </Geometry>
</Window.Resources>
    <Grid>
    <Button>
        <Path Fill="Red"
              Data="{StaticResource icon_Play_Geometry}"
              Stretch="Fill"/>
    </Button>
</Grid>

    I'd want a bit more sophisticated than just a big triangle fills the button for production code, obviously.

    I obtain the geometries using syncfusion metro studio. Which is free. But I think Blend can extract geometries from characters. You can also find svg online and use the geometry out one of those. For some things where I just have a jpg to work with I use the functionality in inkscape ( which is free ) to automagically "trace" bitmap to vector and export xaml.