Hey everyone today, I'm going to show you exactly how to fine tune
image caching, and build Xamarin forms and .NET MAUI with a built-in
image and built in data caching.
So tune in.
Hey everyone.
I'm James.
And I'm back with another 101 video this time talking about image caching
inside of Xamarin forms and .NET Maui with a built-in image control.
Now you're probably saying James, like I've used the image control.
You've used the image control.
You can do all sorts of things with the image control.
You can play gifts, you can download images, you can pull images out
locally, all sorts of stuff.
But when you go off and you give Xamarin forms or .NET Maui, the
URI or the URL, if you will.
Of an image.
It will automatically download it for you and cash it.
Now, did you know that it actually caches that image for 24 hours?
That means if you're scrolling and your users are navigating away, as long as that
URL stays constant, it will be cash for 24 hours, which is actually really, really.
Now most applications, I think would probably make really good use case of
that because they don't want to download images over and over and over again.
But what if you're building an application where your users avatar
actually updates, or maybe you need to display a webcam in a real time, maybe
like a street cam from a Washington department of transportation, or maybe
your deer cam where there's a unique URL that is just updating every few.
Well, you have fine-grained control over to do this in bold Xamarin forms.
Add-on Amalia.
I'm going to show you how to, and specifically we're going to see how to
just sort of have it update when your users come back into the application
after a few minutes or update on demand.
So let's check it out.
So I'm over here on the Washington state department of transportation.
And there are over 1400 cameras all around the city, which is crazy.
Now here's one right here from the interstate high-five bridge somewhere,
some inner pass where apparently there's a McDonald's and a taco bell summer, but
you can see the last update was 6:22 PM.
Now my machine it's 6 31.
So let me rephrase.
And what we'll see is that this has not been updated and, um,
city bus was flying by because this is updated every two minutes.
Now, if I right click and I copy the image link, we'll see that it gives me an
image and sure enough, this is the 6 26.
And if I refresh this without changing the URL, it updates to the six 30.
Now that means that we would want to have that image.
Every few minutes in our application, or at least be cashed for a few minutes.
So I've built the world's simplest way of doing this.
So inside of our coffee app here specifically is our image and
we want it to update over here.
We can see the last time it was downloaded is at six 16.
So we probably want to go ahead and have that updated.
So let's take a look at this applicant.
So, what we'll see is that I have an image caching page, and right now it
is cashing that image for one day.
So we have a sword.
This is an image.
If I look at the view model, it is just set right there to the image.
That is it.
So no matter what, if I go to another page, I come back into this page six 16.
It's definitely not going to pay change at all.
So one way that we could change this specifically is we could say.
Some, um, something different in our code behind.
So let me done our code, but in our XAML we could set the source here to the image.
Uh, or if we want to change this, we could come in and say, you know
what, let me do image dot source here.
And let me create a URI image source.
Now this is nice because I can set the cash validity.
Now specifically, I'm going to set it to five days.
There's no real way to set it anywhere besides days in this time span.
I couldn't figure out how to do that in Zombieland.
If anyone knows, put it in the show notes below.
Definitely let me know.
I'll do a short on it, but here, for example, I could
say cash enabled equals true.
And then I could say a URI equals, um, you know, binding to.
Um, my image right now, that is one way of doing it.
If you want to extend the cash, but we actually want to shorten the cash.
So that will be no good.
So one way of doing it in the XAML would be to set this to
zero and set this to false.
Right now that's okay.
But the problem we're going to run into is that every time the user loads this
page, because we've disabled caching.
If they do it every minute or so, or every 30 seconds or a scrolling through,
it's going to try and re download that image over and over and over again.
So don't want to do that.
So what we want to do is change this from data binding to a strict.
To an actual URI image source.
So let's change this back over to my, um, my source of being
bound to the binding, to my image.
There we go.
Awesome.
Go ahead and shorten that up.
And now what we'll do is we will change this line, bring
my, uh, this down a little bit.
I'm going to do that, uh, URI image source.
And now I'm going to say new image source here.
I'm going to say URI equals new URI.
And there we go.
Let's just go ahead to shove this in here.
And then I will say.
Uh, cashing enabled.
The default is true, but why not?
You know, we're there.
And then here, I'll say caching validity equals time spanned off from minutes.
And I'm going to say one just because, you know, in case the
user loads, the image in between just, Hey, refresh it every minute.
Right?
So now we didn't change much.
This is the same exact code that I showed you earlier.
Over here.
We've just changed this from an image to an image.
Um, your eye source, that's it.
So this is now going to hopefully ideally enable us to change our image.
So I'm going to go ahead and now take a look at our app.
That's booted up over here and I'm going to go into it one.
We'll see that we actually get 6 34 right there.
Now we're going to want to do, is see when this thing updates to say.
36.
So let's give it a second here to update and hopefully update our application.
So I'm just going to sit here and refresh and let's give it a second.
All right, let's give it a go here.
So refresh 6 36.
Now I don't have a refresh button over here.
So what I'm going to do is I'm just going to go over and I'm going to
say internet coffee, come back to my image and sure enough, 6 36 an hour
images updated because we've set that cash validity to one minute.
And I was Xamarin forms and Donna Maui.
No.
Download the image again, when I set it there.
All right.
But what if I want to just like hit a refresh button here and let my user
pooled a refresh or hit a refresh button?
We can do that too.
So let's check.
We're going to stop debugging.
I'm going to come over and I'm going to add a toolbar item as a toolbar
item, text or refresh, and then a command of a binding refresh command.
Just do that.
I'm going to go and fill this in.
I could let visual studio automatically created here for me.
There's a bubble is trying to tell me to do here, which is kinda nice.
Um, it can automatically create that command.
Um, but I'm going to go ahead and just fill it in myself in the code behind.
So let's do that.
I'm going to say public command, refresh, command, get a, there we go.
And now what I'm gonna do is I'm going to say public image, cache view model.
I'm going to say refresh command over here.
I'm going to say new.
Uh, command and give it a, uh, action to execute.
Now, what we need to do is two things.
The first thing we need to do is we need to tell Xamarin forms and dine in
Maui that our image has changed here.
Okay.
So the actual property has changed now that does not seem to be good enough
though, for it to actually update the image we actually need to set.
The image to a new URI image source.
Now I'm not exactly sure why this is.
I have to ask the team as to, as to why this, this happens, but it doesn't really
seem to be any really big overhead here.
Now, of course you had like millions of images, but here I'm just going
to create a new image source.
Tell it that the property has changed and boom, I'm totally good.
But that's literally it.
Okay.
I'm just going to press that.
It's going to hit the refresh command and it should be good over here.
So there it is.
Let me go ahead and now, uh, re execute this, uh, application and there
should be a refresh button up top.
And when I tap on that, it's going to create the new URL image source.
Say that it's one image here, and then we should be good.
So let's go over here.
Hey, let's look at our application.
Let's go into images.
And ideally, probably if I refresh this, we're going to say 6 38.
All right.
Now, if I hit refresh here, nothing's going to happen.
There's nothing to reverse.
Reduce it.
A little flicker here is creating the new image source.
It's not downloading the image in or anything like that, but
it's just redisplaying it.
So it sort of invalidates it when I do that.
And then what happened even if I just triggered the property change
notification, but now let's give this thing another minute or two to, uh,
actually update in real time, uh, over in, uh, the and Washington.
All right.
I think I waited long enough.
Let's refresh.
I did not wait long enough.
All right, here we go.
Let me go ahead and hit that there.
And now we have 6 46 38 hit refresh.
And six 40.
There it is.
That's, super-duper nice way of letting your users manually refresh
the image them to go out of the application and into the application.
Another way of doing that of course, would be to set up a timer in your
application and then updated every two minutes or so if they're on this
page, so either way we'll totally work.
If you want to let your users be in control, or if you want to be in control.
All right, you are now completely in control of using the built-in
image and Xamarin forms and Donna and Maui to control that cash validity.
If you want to extend that time, you're in control of that.
In fact, that's super important.
You may want to actually do that for your applications.
If you know your images, aren't going to change.
You guess that's under 365 days.
If you want.
Right.
You can always change it later, uh, in your application.
Or if you want to shorten it with these little tricks and tips, you
can, of course manually refresh it automatically, update it on a timer
or let your users refresh as well.
That's going to do it for this video.
I will put a link to the source code down as always.
You can check out the Xamarin forms when a one or the dynamic 1 0 1.
And of course, a lot of the content from the Xamarin forms.
1 0 1 series applies the Don Moe series.
So I just create a playlist for Don and Maui one-on-one as well
as it continues to iterate.
So I hope you enjoy these videos.
We do put a comment below and I got new Mercs.
Look at this, this hat right there.
Artwork.
So check it out.
I'll put a link to the emerge show, still heard below, but if you liked
this video, give it a thumbs up.
Subscribe.
Of course.
Be super helpful, man.
Thanks for watching.