>> Welcome back everyone to The Xamarin Show.
Today we have a little Xamarin.Forms101.
We're going to be taking a look at
dynamic and static app resources.
Now, app resources and resources in general are
a great way of defining a style,
a set of values, colors, themes,
and apply them across the multiple controls,
multiple pages, or your entire application.
What's great is that you no longer have to hold code of
values inside your application,
and copy them and paste them around.
You create some resources and reuse those throughout your app.
Now, I love this because I could do
dynamic styling to specify multiple themes on my application.
Just in general, it makes it easier to maintain.
You can do this for fonts, colors,
anything that you can set inside or on a control.
So, let's hop over to Visual Studio and take a look.
So, here's my app that I've been messing around with.
It enables me to come in,
specify a number, and
increase the count by that number that I've entered.
So, let's say we want to go ahead and
increase and change some of the different values here,
instead of this white background,
maybe a different color there.
So, what I can do is, come into my main page of this application,
and I'm going to say ContentPage.Resources,
and this has a resource a dictionary.
So, the Resource dictionary will allow
me to specify multiple resources.
So, here, I'm going to say,
I could specify style,
color, even on platform.
I could say x colon and do Booleans and bites and double,
all sorts of different stuff.
Fonts, if I wanted to anything that you want to specify.
But I'm just going to do a color,
and I'm going to say x colon key.
The key is what I will use later on inside of my binding,
if you will, to this color.
So, let's say MainColor.
This will just be red because it's really easy to see.
We could do another color here and we'll say x colon key,
I'll say second color and we'll make that blue.
There we go. That can be anything inside of it.
Those are just predefined Xamarin.Forms colors.
So, here for instance, now my stack lab for the whole page,
I'll say background color,
and instead of doing a binding or just
hard-coding in red or blue, I'll say StaticResource.
That StaticResource will be my main color.
On the Button, let's go ahead and do a background color there,
as you guessed it StaticResource SecondColor.
So, now we should see those kind of red and blue,
beautiful colors that I have
defined here inside my resource dictionary.
Now, this is nice because, again,
even though it is red and blue,
if I am setting these resources on multiple controls,
I only have to change it in one place.
That's what I really like about it.
So, our splash page will come up here's
a beautiful red color
that we have inside here in the button and works, as expected.
So, let's spice this app a little bit more.
So, for instance, maybe I want this to be white as my main color,
and we'll paste a little bit more code in here.
What I've done is specified
a few more colors like HeadingTextColor,
and NormalTextColor,
but I've also created something called a style.
A style allows me to define
multiple properties in the resource dictionary.
So, in this one, I have this label page heading style,
and it has a Target Type of label.
So, this could be a view, it could be a button,
but here I'm going to say this is a label,
so I can specify that it's bold,
it's in the center.
What I want to also do is,
set a StaticResource to the HeadingTextColor black.
Just pretty cool. So, Resources are referencing resources.
So, now what I can do is on this label,
for instance, here I'll say style,
and this will be, you guessed it,
a StaticResource to LabelPageHeadingStyle.
That's it. So, now we can go ahead and run this application again.
What we'll see is that this new LabelPageHeadingStyle has
been applied across this label that we've just had,
with the black as they HeadingTextColor.
So, let's go and see this here as this spins up.
Now, we have white as our BackgroundColor,
and much more legible.
We can see now our two is bold right in the middle.
I can set font sizes do anything I want,
and I saw on my blue here.
Now, you may be saying, "James, that's great,
because you're on a single page,
but how do I put it inside and across multiple pages?"
It's a good question, very easy to solve.
All I have to do is go into my app.xml.
My app.xml supplies shared
application wide resources for my entire application.
So, you want to be selective,
because this will load up when your application loads.
So, only the essentials there
they are going to use across multiple pages.
But it's really nice is I could just take all of these styles,
and simply paste them directly in to my resources.
So, of course, I need a resource dictionary,
paste them right in there,
and now everything is visible to
me on any page of my application across it.
Now, what's even cooler is that
you can access these from the code bind.
So, if I say App.Current.resources,
we'll see that I have a resource dictionary back.
So, you can access them even from your code behind.
Now, that's the app wide,
and if I'm on the page wide,
I just say Resources.
So, App.Current.resources or resources,
paste if they're in your page. There you have it.
In just a few lines of code,
we're creating reusable beautiful xml to style our controls,
reuse those colors and anything else that you want to do
using Resources at a page level and an app level.
Now, this is just one of many episodes that I have in my
Xamarin.Forms mini-series 101 to get you started,
building beautiful cross-platform iOS
in Android apps with Xamarin.Forms.
Of course, go down to the show notes,
where you find the whole mini-series.
But also, give us a like if you're on YouTube,
and don't forget to subscribe on YouTube or Channel 9,
so you get updated with the latest and
greatest Xamarin shows right in your inbox.
Thanks for watching, and I hope that you
enjoyed. I'll see you next time.
[MUSIC]