FFImageLoading has been the goto
package for Xamarin and Xamarin.Forms. When you wanted to work with SVGs,
error placeholders, all kinds of transformations. There is
a lot of cool stuff in there so a lot of people are blocked from moving
to .NET MAUI because there is no real placement that works with .NET MAUI,
until now. Make sure that you catch all of this video because there is
some important things to know here. Let's go check it out. With FFImage Loading you could do all kinds of cool
stuff with images. It would do caching first and foremost. It would have
amazing caching capabilities. You could specify the error placeholder and the
loading placeholder. So whenever an image was still loading you could show a
little loading indicator in there. Whenever an image couldn't load because there
was an error, it would show the error image. So you would always have kind
of like a fallback image that you could show to your users.
Other things include like SVG support so rendering actual SVG images instead
of what's happening right now with .NET MAUI that we transform
them into PNGs so showing actual SVG images another
thing is transformation. So you could do black
and white blurring, all kinds of crazy shapes and forms and there is
much much more you could do with FFImageLoading. Now, this isn't
really available for .NET MAUI yet, until now. There is the
FFImageLoadingCompat package. There is an other
alternative, I will get into that near at the end of the video so
make sure that you stick around to see it all. But for this package,
the FFImageLoadingCompat I think the plan is not not to support
this any further or well support it, but
not really maintain or really build up on that. This package
has just been brought to you so that you can transition from
your examine and Xamarin.Forms applications to .NET MAUI so that
you're not blocked on that. So that you can use this functionality
in your app. But I don't think there is a plan to
maintain this for a longer term or include new features. Just the only
right amount of work has been done to make this compatible
with .NET MAUI. So you can use it and transition your apps over
before the end of life of Xamarin. So that is a good thing to
keep in mind. You can use this but if you are a new
user looking for this functionality then this might not be for you. So
with that in mind, let's hop over to my screen and let's
see what is good to know from a technical standpoint to implement
this in your .NET MAUI project. Just a little bit of
nostalgia here. Basically this is the original package FFImageLoading. You
can see the last commit at the time of recording and I don't think this will
change is October 2020. So that's been a long time. And Daniel Luberda, I don't know, it's Polish, so
it's probably not English like I'm pronouncing it right now. And I
think here a little bit down to the bottom, Fabian Molinet because he's from France. I can see that here
now. And of course, all these other cool contributors right here, they've
done an amazing job at making this work for Xamarin over the span of
multiple, multiple years. And you can do all
these crazy things. So here you can see a couple of screenshots with
the crazy shapes and all of that that's going on. And here you can see all the
things that I mentioned and even much, much more, right? So you have
even like retries and retry delay and you can do all these kinds of
crazy things. So this is a really powerful package now from the
Microsoft team. Jon, Jonathan has created this FFImageLoadingCompat. So now we have
this package and it very much looks like the old
repository with what you have to do here, but the
features are still kind of the same. Like I said, the only amount
of work that went in here is to basically make this compatible with
net six, net seven, and therefore also with
.NET MAUI so that you can use it. But I don't think this is
going to be maintained longer term, added new functionality.
I can't express that enough. So make sure that you only use this
for your transition scenarios. Okay? So with this, let's go over to
Visual Studio and I already set up a File, New, .NET MAUI
app project and I already installed the NuGet
packages. But just to show you the right ones, let me do it again. Let's go into the
manage NuGet packages right here and you can see the installed ones.
And we have here the FFImageLoadingCompat. Svg.Maui. So I installed that one
because I started out with wanting you to show the SVG stuff. But you can
also search for like FFImageLoadingCompat
and you will find multiple, right? So you don't have to bring in
everything... FFImageLoadingCompat. There we go. And
there's a couple, right? So depending on what
you need, just take the right one and don't bring in the rest. But it will
bring in all the dependencies that you need. So there's a couple
here, figure out which one is the right one for you. What I'm
going to show you is all possible with just doing this SVG MAUI
one. So maybe you want to do that one. The version is 0.1.1 at the time of recording. So there is that.
Find that one at least to see all the things that
you're seeing right here. Okay, whenever you have that installed, you want to go to
your MauiProgram and you want to add this, UseFFImageLoading()
here to your app builder that will bring in the using FFImage
Loading.Maui; right here. So we got that in place and now all the
renderers and the handlers and the mappers and everything's
initialized and you can start using this thing. Now the cool thing is we can
just do all of our things in example and
the FF image loading library works with a
cached image. That's what the object is called and it's drop-in
compatible with a regular Image from .NET MAUI which means all the
properties that overlap between an image and a cached image are named
exactly the same, they behave the same. I'm not even sure maybe the
cached image inherits from the image on .NET MAUI and Xamarin.Forms before. So you can just basically replace
image with CachedImage right here and it should all
still work. You will already benefit because it adds some extra caching
capabilities to your image. So to do this you can already see I
have this custom XML namespace right here. So FF just
figure out the FFImageLoading or find it with
the IntelliSense probably or you can copy it from the sample
repository that I linked in the video description down below. So you will
have to do this xmlns:ff and then this whole namespace
thing right here and you can start using that cached image. Now I've got
a couple I also have the SVG cached image. So if
you want to use SVGs you have to use a specialized image source
right here or actually image element which
can be found in the SVG XML namespace right here. So that's a
little bit different namespace that you have to link here. And then you can
use the SVG cached image and suddenly use sources with the SVG in here. One
thing that is good to know for the SVGs, namely is where to put them, basically because
if you're going to put SVGs here in the images folder then it's going to be
transformed to PNGs and you don't really have the SVG
that's actually going to show. So you want to put this SVG so you can see the
sample SVG right here under the Raw folder. Now whenever you're going
to do this from Visual Studio, if you're going to add this you might
want to double check on your csproj. So you can click that or you can
right click and do Edit Project file and what you want to double check
is that it didn't have any extra entries for the sample that
SVG. Visual Studio tries to do that
sometimes like with this one and that's only necessary if you want
to specify extra options like this. But typically
you should have enough with this which is already the resources
raw folder which should just be included and the Raw resources right
here. So it shouldn't have anything extra. If there is maybe down
here then just remove that. Basically it should just
have only this, no extra things and the SVG will be taking into your
app and you can use that with the actual SVG things
that are here in this code. And you can see the
error placeholder. So I have a little image for whenever
an error occurs or whenever there is a loading placeholder. And here for
the top one, we're going to see the error because this dotnet_bot_not_here.png, doesn't
exist, right? So we'll see we're linking an image that's not
there and we should see the error thing. The SVG should load the sample.svg
which comes from the original FFImageLoading repository.
It's the instagram logo, or at least from some point in time.
I'm not sure if it's the latest one, but it's a form of the Instagram
logo as an SVG. And we should see that loading
right here. And we have here the extra, the actual net bot which is included
in the File, New, .NET MAUI template. And we'll see that. But
we applied a little transformation here. Now again, the
transforms live in a separate namespace. So to use it, we use this
transform XML namespace which you can find right
here. So if I switch over here to Android, I
actually tried it on Windows and actually everything except the
transformation worked on Windows. So I'm not sure if it was
supposed to work on Windows or not. That might be a little work in
progress. You can try to report it to the FFImageLoadingCompat repository. Obviously I would hope the bugs will
be fixed so that it's kind of like on par with whatever was in
FFImageLoading for Xamarin. But at least we will have all the
stuff here for Android. So if I run this right now, you will
see all the FFImageLoading things but now running on .NET MAUI. So
we have this error placeholder right here. If you
looked really closely. Let me see if I can do it again and
bring up the emulator right here. Then you can see that the
loading placeholder comes by very quickly as well. So let's see if
we can spot that here while the yeah, loading whoop whoop and there it
loads the actual image. It's so fast! .NET MAUI so fast. So here we have the
image, the error placeholder that is showing up, the actual SVG. So
this is the sample SVG and the little blurred net bot right
here, which is all working out of the box whenever you do
FFImageLoadingCompat. So this should not be blocking you anymore
while moving from Xamarin to .NET MAUI. But there's more, there
is more. So what I said there might be another
package that hopefully we'll see a little bit
of more development and improvements and be compatible with .NET MAUI. Because
there is another fork of this or at least it took some code of this,
which is the MmImageLoading now and I think it stands for Mad Maui
image loading because FF was for Fast and Furious
image loading. So now we have Mad Maui Image Loading. And this is forked
for like well, it's forked before, but the last commit is from
April 7 so it's a little bit more recent. And here it also
takes the good stuff from what was there. But
they have it for iOS and Android and they're still working
on Mac and Windows and Tizen. So they're looking for help to do
that. So if this is something that you want to help maintain, then definitely
go in here, open pool requests, maybe
connect with the author and see if you can help out with this
project and maintain it because this is really powerful stuff and it would be
really great to have this inside of .NET MAUI and have it available there
as well. Also a Fast and Furious video on how to transition from
Xamarin to .NET MAUI and not be blocked on this FF image
loading package. Now, you know the FFImage LoadingCompat packages here that you
can use on your .NET MAUI project and it will be working all the same.
If you run into anything, please report it on the
repository. Thank you so much again for watching one of my videos. Please
click the like button subscribe to this channel. If you've been here for the
first time and just watching this, welcome my friend. I'd love to have
you with the rest of my subscribers and I'll be seeing you for my next video.
See you on the other side.
