Universal Windows Platform Support #23

Closed
robertmuehsig opened this Issue Jan 4, 2016 · 28 comments

Projects

None yet

6 participants

@robertmuehsig
Contributor

Even if the project is named and targets WPF - are you planning to support UWP projects as well?

When I try to install the package it fails:
FontAwesome.WPF 4.5.0.7 is not compatible with UAP,Version=v10.0.
Some packages are not compatible with UAP,Version=v10.0.

Maybe the code could "just work" on UWP and just the NuGet Package needs some updated targets.

@charri
Owner
charri commented Jan 4, 2016

The apis for UWP and WPF are very similar. I'll give it a go tonight and see how much work would be involved.

@robertmuehsig
Contributor

👍 If you need help or currently don't have time let me know, so I could take a look.

@charri
Owner
charri commented Jan 5, 2016

Hmmm TextBlock/Image is sealed in UWP, so won't be that straightforward... grr...

@robertmuehsig
Contributor

UWP itself seems to use "SymbolIcon", e.g.

<SymbolIcon Width="48" Height="48" Symbol="Home" />

Is this useful?

@robertmuehsig
Contributor

Ok, found a way via the FontIcon class. This is more or less the most simple solution for UWP:

public class FontAwesome : FontIcon
    {
        public FontAwesome()
        {
            this.FontFamily = new FontFamily("./fontawesome.otf#FontAwesome");
        }

        private FontAwesomeIcon _icon;
        public FontAwesomeIcon Icon
        {
            get { return _icon; }
            set
            {
                _icon = value;
                Glyph = char.ConvertFromUtf32((int)_icon);
            }
        }
    }

In XAML:
The first one is the pure FontIcon class in action. The FontAwesome class is just a converter for the Glyph.

    <FontIcon FontFamily="./fontawesome.otf#FontAwesome" Glyph="&#xf0b2;"></FontIcon>
    <local:FontAwesome Icon="Android" />
    <local:FontAwesome Icon="Leaf" FontSize="50" Foreground="Aqua" />

Result:
image

I created a small demo in my fork: https://github.com/robertmuehsig/Font-Awesome-WPF/tree/master/src/FontAwesome.UWP.Demo

For the first release this would work - it's pretty basic, but it has an easy integration via your FontAwesomeIcon enum.

I guess it would be clever to release a new NuGet package, just targeting UWP.

What do you think?

@TrabacchinLuigi

Same nuget package different framework folder ? maybe ? UWP isn't part of .net core ?

@robertmuehsig
Contributor

UWP uses .NET Core, but has a complete new UI/Xaml Stack.
WPF don't uses .NET Core.

The FontAwesome Class in the current FontAwesome.WPF package uses the TextBlock class from WPF, but in the UWP world this is not possible.
I would recommand a new package because the naming is missleading - UWP has not much in common with WPF and the whole implementation is different.

Another idea: We create a new package "FontAwesome.Xaml", which contains the different implementations for WPF and UWP. This would solve the "naming" issue, but the implementation would still be different.

Both packages (or both implementations) would share the same FontAwesomeIcon-Enum and the embedded font.

@charri
Owner
charri commented Jan 29, 2016

Maybe I should also rename the package to *.Core to keep up with the trend :p. Pun aside, I think it would be best to create two packages (FontAwesome.WPF, FontAwesome.UWP) - for naming sake but include all the targets. If the codebase drifts further apart for the targets it might make sense to 'hard fork' the UWP.. But we're not at tht stage yet.

I'll review the code at the weekend and might ask a friend who has more knowledge of UWP than me to have a review.

Thanks for the code contribution!

@robertmuehsig
Contributor

+1 for .Core ;)

Glad I could help.

@charri charri added a commit that referenced this issue Jan 31, 2016
@charri #23 first attempt at UWP 6ded487
@charri
Owner
charri commented Jan 31, 2016

@robertmuehsig had a go at your code - works fine if font is in the same project, but can't find the proper format to package the font file in a class library. There also does not seem to be any doc on how to load fonts from a class library in UWP.

@robertmuehsig
Contributor

Ah, ok. Will try to take a look this week. UWP is a miracle sometimes...

@robertmuehsig
Contributor

Mh, tried it and had no issues, or do I miss something?

Code here: https://github.com/robertmuehsig/Font-Awesome-WPF

image

@charri
Owner
charri commented Jan 31, 2016

how did you specify the FontFamily? (Uri)
I am able to create the control - but it just shows a box when run, as if the font was unable to load

@robertmuehsig
Contributor

In the Library:
Added the FontAwesome.otf file with Build Action "Resource"

In the FontAwesome class:

this.FontFamily = new FontFamily("./fontawesome.otf#FontAwesome");
@charri
Owner
charri commented Feb 8, 2016

so i've been going over your project and comparing it to mine and I just can't get my head around what would cause my project not to work. I downloaded your fork but also got the same results (just character square). It only works if the font file is in the same project.

Going to see how to load from an embedded resource

@robertmuehsig
Contributor

Mhhh... tried it again on my workmachine with the same result you saw. I will take a look why it worked on my notebook without any issues.

@Alex-Witkowski

Hi There,
left a pull request on roberts Demo.

What works for me is to set FontAwesome as Contet. So it is part of the AppX Bundle created for UWP apps.

After that I referenced the file inside the package in the code for the converter.

Should also work on your side.

@robertmuehsig I think it works on your private dev machine because you have added/installed FontAwesome as systemfont. Thats a little pitfall.

@robertmuehsig
Contributor

I checked @Alex-Witkowski PR and it now seems to work on my work machine. The link to the PR: "https://github.com/robertmuehsig/Font-Awesome-WPF/pull/1"

@Alex-Witkowski So, the path "ms-appx:///FontAwesome.UWP.Lib" is the assembly name of the library, right?

@Alex-Witkowski

@robertmuehsig The ms-appx:/// part says something should be load from the appX package (or at least from the folder on your disk wich contains the stuff of the package).

And the contetns form FontAwesome.UWP.Lib are stored in an folder named like the assembly inside the package. There comes the "FontAwesome.UWP.Lib/" from. You can see the structure of the Appx in your Debug folder.

@charri
Owner
charri commented Feb 9, 2016

Cool stuff 👍 I'll try it out tonight. Hopefully release by end of week

@charri charri added a commit that referenced this issue Feb 9, 2016
@charri #23 fix font path issue 558248c
@dotnetnoobie

@robertmuehsig I used your demo project but updated it to use a DependencyProperty so I could DataBind the Icon and Update it from a ViewModel

    public class FontAwesome : FontIcon
    {
        public static readonly DependencyProperty IconProperty
            = DependencyProperty.Register("Icon", typeof(FontAwesomeIcon), typeof(FontAwesome), new PropertyMetadata(FontAwesomeIcon.None, IconPropertyChangedCallback));

        public FontAwesomeIcon Icon
        {
            get { return (FontAwesomeIcon)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        private static void IconPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var ctrl = (FontAwesome)d;
            ctrl.Glyph = char.ConvertFromUtf32((int)e.NewValue);
        }

        public FontAwesome()
        {
            FontFamily = new FontFamily("ms-appx:///FontAwesome.UWP.Lib/fontawesome.otf#FontAwesome");
        }
    }
@Alex-Witkowski

This could cause a crash when IconPropertyChangedCallback is called with e.NewValue = null which
I think is possible when you use it in a custom control and xaml parser calls this before "OnApplyTemplate" where any value might be set. Will have a look at it before Monday.

@robertmuehsig
Contributor

@charri Any updates? If you need any help just let me know.

@charri
Owner
charri commented Mar 1, 2016

image

@robertmuehsig nearly there. demo project is done. just have to update the documentation and then publish the nugets!

@charri charri added a commit that referenced this issue Mar 1, 2016
@charri #23 update example project 33dbf8a
@robertmuehsig
Contributor

<3

@charri
Owner
charri commented Mar 3, 2016

http://www.nuget.org/packages/FontAwesome.UWP/
http://www.nuget.org/packages/FontAwesome.WPF/

Tested and works. Strange thing, when the project is referenced as source the designer shows the font, if referenced as nuget package it just shows a square (works in running app though).

@dygestor
dygestor commented Mar 3, 2016

Thank you very much, it works flawlessly :) Just today I started developing an app and I was wondering, if anyone managed to get fontawesome working on UWP. Great job!

@robertmuehsig
Contributor

👍 I don't have the designer issue you described - works as expected. But UWP and the VS designer are sometimes weird ;). Awesome job!
image

I would say - we can close this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment