WEBVTT

00:00:00.000 --> 00:00:01.260
[MUSIC]

00:00:01.260 --> 00:00:03.310
>> Awesome. Come on in.

00:00:05.270 --> 00:00:09.040
Gather for the word of Xamarin.

00:00:11.690 --> 00:00:13.020
>> Amen.

00:00:13.020 --> 00:00:19.965
>> Amen. Cool. Awesome.
We have the right screen.

00:00:19.965 --> 00:00:22.995
All right. Is everybody
having a good time?

00:00:22.995 --> 00:00:23.610
>> Yeah.

00:00:23.610 --> 00:00:26.235
>> Yeah. I'm glad you came.

00:00:26.235 --> 00:00:27.840
Have you made your friends jealous?

00:00:27.840 --> 00:00:28.440
>> Yes.

00:00:28.440 --> 00:00:30.645
>> Made your enemies jealous?

00:00:30.645 --> 00:00:33.990
Come on. Yeah, this is great.

00:00:33.990 --> 00:00:36.090
It's been absolutely
wonderful to be surrounded by

00:00:36.090 --> 00:00:40.534
so many kinds, nice,
like-minded people,

00:00:40.534 --> 00:00:44.280
except for Duane up here on
the front. I don't know.

00:00:47.030 --> 00:00:50.010
I tease. You know I tease.

00:00:50.010 --> 00:00:52.880
Cool. So we're here
to talk about making

00:00:52.880 --> 00:00:55.910
crazy beautiful UI
with Xamarin Forms.

00:00:55.910 --> 00:00:58.580
So I would imagine
you are interested in

00:00:58.580 --> 00:01:00.140
all tips and tricks that I

00:01:00.140 --> 00:01:02.270
hope to be able to
share with you today.

00:01:02.270 --> 00:01:06.200
Of course, these are not
for gratuitous usage,

00:01:06.200 --> 00:01:08.105
but we can do
some really nice things.

00:01:08.105 --> 00:01:11.790
I get asked a variety of
questions all the time.

00:01:11.790 --> 00:01:14.025
Obviously, through
Twitter, through e-mail,

00:01:14.025 --> 00:01:15.810
through speaking at conferences,

00:01:15.810 --> 00:01:19.005
about how do you do x, y, and z?

00:01:19.005 --> 00:01:23.515
Probably, the main one is
how do you do parallax?

00:01:23.515 --> 00:01:25.700
Has anybody done parallax before?

00:01:25.700 --> 00:01:27.335
Anybody in the room, a few people.

00:01:27.335 --> 00:01:31.220
Has anybody attempted to do
parallax and said, "Screw that."

00:01:31.220 --> 00:01:36.140
Got a few of those. So I
will show you some parallax.

00:01:36.140 --> 00:01:37.370
It's actually pretty awesome,

00:01:37.370 --> 00:01:40.370
pretty easy. I've
got some other step.

00:01:40.370 --> 00:01:42.845
I had a lot of fun
building these demos,

00:01:42.845 --> 00:01:46.710
because I was using hot reload.

00:01:47.020 --> 00:01:49.835
So it was a lot of fun.

00:01:49.835 --> 00:01:51.140
I filed some bugs,

00:01:51.140 --> 00:01:52.360
some of them got fixed,

00:01:52.360 --> 00:01:53.590
some of them will get fixed,

00:01:53.590 --> 00:01:55.580
some of the improvements
are still yet to come,

00:01:55.580 --> 00:01:58.370
but we knew that it was ready
to be out there in the wild.

00:01:58.370 --> 00:02:00.230
So I'm glad that you are
going to be getting it in

00:02:00.230 --> 00:02:03.320
your grubby little greedy
little hands soon.

00:02:03.320 --> 00:02:05.150
I hope that you'll take
the opportunity to

00:02:05.150 --> 00:02:07.175
provide lots of feedback to the team.

00:02:07.175 --> 00:02:09.050
Let us know how it's working for you,

00:02:09.050 --> 00:02:11.470
let us know where it's not, cool?

00:02:11.470 --> 00:02:14.490
So that's my Twitter handle.

00:02:14.490 --> 00:02:17.040
At the end I have my e-mail as well.

00:02:17.040 --> 00:02:18.790
Please, reach out anytime.

00:02:18.790 --> 00:02:22.115
I do apologize if I don't
get back to you immediately,

00:02:22.115 --> 00:02:27.705
but I do read all of the e-mails
and I try to respond to them all.

00:02:27.705 --> 00:02:29.760
Sometimes I suck at time management,

00:02:29.760 --> 00:02:31.520
so you know how that is.

00:02:31.520 --> 00:02:34.190
Cool. So I thought the first
thing that we would talk

00:02:34.190 --> 00:02:39.420
about if my arrow works.

00:02:39.420 --> 00:02:42.160
One of these buttons has to work.

00:02:42.710 --> 00:02:46.755
It literally does not want
to forward. There it goes.

00:02:46.755 --> 00:02:49.230
Hello. So I thought we'd talk first

00:02:49.230 --> 00:02:51.650
about themes; colors, fonts, icons,

00:02:51.650 --> 00:02:55.690
because you've probably followed
the Apple announcements,

00:02:55.690 --> 00:02:59.735
iOS 13 now has dark mode.

00:02:59.735 --> 00:03:00.570
>> Yeah.

00:03:00.570 --> 00:03:03.435
>> Yeah. More phone time in bed,

00:03:03.435 --> 00:03:07.140
that's what we're talking about.

00:03:07.140 --> 00:03:11.160
So that's important and people
are going to be asking you,

00:03:11.160 --> 00:03:12.625
maybe you're already asking,

00:03:12.625 --> 00:03:15.280
"How can I better
support these things in

00:03:15.280 --> 00:03:18.010
my app to make sure that your app

00:03:18.010 --> 00:03:20.590
feels it belongs as it should on

00:03:20.590 --> 00:03:23.695
the iOS platform as well
as Android of course.

00:03:23.695 --> 00:03:26.365
So how can I best address
these things?"

00:03:26.365 --> 00:03:27.910
So I'm going to share
with you some of

00:03:27.910 --> 00:03:29.860
the things that I tend to look for.

00:03:29.860 --> 00:03:32.440
Now, my background before

00:03:32.440 --> 00:03:34.450
joining Microsoft two
and a half years ago,

00:03:34.450 --> 00:03:36.275
I had a company called Render,

00:03:36.275 --> 00:03:38.535
and we did consulting.

00:03:38.535 --> 00:03:43.550
It was myself partner Ben Bishop
and several contractors.

00:03:43.610 --> 00:03:46.080
So we did apps for startups,

00:03:46.080 --> 00:03:47.400
we did them for enterprises,

00:03:47.400 --> 00:03:49.680
we had big customers, we
had little customers.

00:03:49.680 --> 00:03:51.705
One of the common themes was,

00:03:51.705 --> 00:03:53.415
it was very creative,

00:03:53.415 --> 00:03:55.455
very forward thinking, there were

00:03:55.455 --> 00:03:57.985
very high bar for user experience.

00:03:57.985 --> 00:04:00.490
So we were constantly doing
things that we couldn't find

00:04:00.490 --> 00:04:04.030
any precedent for or we
just try to work it out.

00:04:04.030 --> 00:04:06.010
So some of these are
tips and tricks from

00:04:06.010 --> 00:04:08.500
useful resources and
practices that I have.

00:04:08.500 --> 00:04:11.915
So one of the first ones is
finding resources like this.

00:04:11.915 --> 00:04:14.990
This is color dot adobe dot com.

00:04:14.990 --> 00:04:17.840
It used to be called
Kuler, K-U-L-E-R.

00:04:17.840 --> 00:04:20.960
So this is a website and
there's also a mobile app

00:04:20.960 --> 00:04:23.760
that you can use and you can
take pictures of colors,

00:04:23.760 --> 00:04:26.420
you can take pictures
of a whole photo,

00:04:26.420 --> 00:04:29.160
and it will tell you what
the color palette it is.

00:04:29.160 --> 00:04:32.620
So if you're looking for
just a set of five, six,

00:04:32.620 --> 00:04:35.310
colors that fit a particular theme,

00:04:35.310 --> 00:04:37.150
this is a good resource to go to.

00:04:37.150 --> 00:04:40.270
If you're color
challenged, this is good.

00:04:40.270 --> 00:04:43.834
Now, something to keep in mind
from an accessibility standpoint,

00:04:43.834 --> 00:04:45.350
just because there's a color palette,

00:04:45.350 --> 00:04:47.890
doesn't mean that it's going
to be great on your phone,

00:04:47.890 --> 00:04:50.659
doesn't mean that it's going
to be great for accessibility,

00:04:50.659 --> 00:04:53.165
because when it comes to color,

00:04:53.165 --> 00:04:55.115
contrast is very important.

00:04:55.115 --> 00:04:56.840
You have to take into account color

00:04:56.840 --> 00:04:58.565
blindness and things like that.

00:04:58.565 --> 00:05:00.230
So you want to be aware of that.

00:05:00.230 --> 00:05:02.270
I didn't promote this in my deck,

00:05:02.270 --> 00:05:05.345
but I know on Mac in particular,

00:05:05.345 --> 00:05:07.160
there is a plug-in that you

00:05:07.160 --> 00:05:09.480
can install, or it's
not even a plug-in,

00:05:09.480 --> 00:05:10.670
it's an app you can install,

00:05:10.670 --> 00:05:13.550
and it will turn your screen into

00:05:13.550 --> 00:05:17.600
a representation of what
different colorblind people see,

00:05:17.600 --> 00:05:20.690
and that will really open your eyes

00:05:20.690 --> 00:05:22.880
to what you're dealing

00:05:22.880 --> 00:05:25.070
with and what those people
live with every day.

00:05:25.070 --> 00:05:28.860
Green is not necessarily green
as green perhaps, that thing.

00:05:28.860 --> 00:05:30.510
So this is one really good resource.

00:05:30.510 --> 00:05:33.750
Another one is coolers.com,
is that coolers.com?

00:05:33.750 --> 00:05:37.500
Yeah, coolers.co. Just
Google for these,

00:05:37.500 --> 00:05:39.690
check them out. Again, really good.

00:05:39.690 --> 00:05:40.905
They'll give you the RGB,

00:05:40.905 --> 00:05:44.430
they'll give you
the hexadecimal colors,

00:05:44.430 --> 00:05:46.440
you can do mono chromatic,

00:05:46.440 --> 00:05:49.925
you can do contrasting, all stuff.

00:05:49.925 --> 00:05:52.385
It's a really great resource
and you can start there.

00:05:52.385 --> 00:05:54.710
Now, what are your
options when you go to

00:05:54.710 --> 00:05:57.470
do themes within Xamarin Forms?

00:05:57.470 --> 00:05:59.720
So you're probably are
thinking about themes,

00:05:59.720 --> 00:06:02.870
so you search the Word theme
with Xamarin Forms,

00:06:02.870 --> 00:06:04.055
and you find this Xamarin

00:06:04.055 --> 00:06:08.140
Forms.theme package.
Has anybody used this?

00:06:08.140 --> 00:06:12.480
One, two. Was it that a pain
on the butt to get set up?

00:06:12.480 --> 00:06:15.155
Yeah, way harder than
it needed to be.

00:06:15.155 --> 00:06:20.310
So it was a preview that
the team put out many years ago.

00:06:20.310 --> 00:06:23.330
It's still preview because it turns

00:06:23.330 --> 00:06:26.130
out it really wasn't
the best approach,

00:06:26.130 --> 00:06:27.600
and so a lot was learned.

00:06:27.600 --> 00:06:31.160
It's still sits out there just
in case anybody wants to use it,

00:06:31.160 --> 00:06:33.785
because we really haven't
replaced it with anything.

00:06:33.785 --> 00:06:37.105
I would not recommend using it,

00:06:37.105 --> 00:06:39.510
I would ignore it,
pretend it doesn't exist.

00:06:39.510 --> 00:06:41.550
We may remove it at some point,

00:06:41.550 --> 00:06:42.780
I've been asked, "Hey,

00:06:42.780 --> 00:06:44.430
when can we ditch this thing?"

00:06:44.430 --> 00:06:46.320
We have a habit especially,

00:06:46.320 --> 00:06:48.110
now that we're part of Microsoft that

00:06:48.110 --> 00:06:49.670
we don't want to remove
anything that anybody

00:06:49.670 --> 00:06:52.770
might have a dependency on
without plenty of warning,

00:06:52.770 --> 00:06:54.620
and labels, and things.

00:06:54.620 --> 00:06:57.495
So then you've also got GrialKit.

00:06:57.495 --> 00:06:59.025
I call it GrialKit,

00:06:59.025 --> 00:07:00.950
but I've heard it pronounced
several different ways,

00:07:00.950 --> 00:07:04.580
but I guess I'll just be an ignorant
American and call it GrialKit

00:07:04.580 --> 00:07:09.510
because it's like
the Holy Grail, Grail, Greil.

00:07:09.510 --> 00:07:12.530
So that's a really great one,

00:07:12.530 --> 00:07:13.760
super easy to use.

00:07:13.760 --> 00:07:15.650
I've grabbed that myself and used it.

00:07:15.650 --> 00:07:18.710
They have a really robust
theming engine inside

00:07:18.710 --> 00:07:22.385
of Grail and you can use it.

00:07:22.385 --> 00:07:25.430
It is commercial, so you
do pay a license fee,

00:07:25.430 --> 00:07:27.950
I don't know what the current
arrangement is and stuff like that,

00:07:27.950 --> 00:07:29.570
but in my experience,

00:07:29.570 --> 00:07:31.400
it's been worth every single penny.

00:07:31.400 --> 00:07:34.050
I set up a high-school robotics team,

00:07:34.050 --> 00:07:35.840
my son does the robotic stuff,

00:07:35.840 --> 00:07:37.790
and they wanted to
build a mobile app to

00:07:37.790 --> 00:07:41.900
basically track the other teams
in their competitions,

00:07:41.900 --> 00:07:44.254
and basically do scouting,

00:07:44.254 --> 00:07:45.860
but they wanted to look good.

00:07:45.860 --> 00:07:48.260
So I set him up with
the license and everything,

00:07:48.260 --> 00:07:49.730
and they were just blown away.

00:07:49.730 --> 00:07:51.260
They're like, "This is
exactly what I want.

00:07:51.260 --> 00:07:54.835
I want to be the cool kid and my
stuff looks awesome by default."

00:07:54.835 --> 00:07:58.250
So then the other way you can go
about it is writing it yourself.

00:07:58.250 --> 00:07:59.960
Of course, writing it yourself

00:07:59.960 --> 00:08:01.400
means you're going to do
a little bit of work,

00:08:01.400 --> 00:08:03.680
but you own it, and you
know it end to end.

00:08:03.680 --> 00:08:06.080
That's another one of
the reasons that we really never

00:08:06.080 --> 00:08:08.935
evolved these Xamarin
Forms Theme Package,

00:08:08.935 --> 00:08:11.880
is because with styles,
static resources,

00:08:11.880 --> 00:08:13.490
and dynamic resources, you really

00:08:13.490 --> 00:08:15.935
have everything at
your fingertips you need.

00:08:15.935 --> 00:08:20.150
So you don't necessarily need
a whole package to make it harder,

00:08:20.150 --> 00:08:21.755
we make it pretty easy.

00:08:21.755 --> 00:08:23.540
So I'm going to show a demo here in

00:08:23.540 --> 00:08:26.005
a little bit and that's
the method that I use.

00:08:26.005 --> 00:08:28.400
Dynamic resources, something I

00:08:28.400 --> 00:08:30.770
picked up from
our customer advisory team.

00:08:30.770 --> 00:08:32.620
I was looking through some
of their code and I'm like,

00:08:32.620 --> 00:08:35.565
"That's awesome, I'm just
going to totally use it."

00:08:35.565 --> 00:08:39.545
So we'll show that. Some other
stuff when it comes to fonts,

00:08:39.545 --> 00:08:41.120
we added this recently,

00:08:41.120 --> 00:08:43.235
I think it was Xamarin Forms4.1.

00:08:43.235 --> 00:08:46.060
We added some new names sizes.

00:08:46.060 --> 00:08:48.290
It's good to use name sizes

00:08:48.290 --> 00:08:50.705
especially when it
comes to accessibility.

00:08:50.705 --> 00:08:53.120
So I have parents that
are getting a little

00:08:53.120 --> 00:08:55.535
harder in the eyes to see things,

00:08:55.535 --> 00:08:57.755
and so you pick up
their phone and just

00:08:57.755 --> 00:09:00.920
smack in the face with
the font because it's so big.

00:09:00.920 --> 00:09:03.140
So I actually have seen some of you

00:09:03.140 --> 00:09:05.810
here with really big fonts
on your phones,

00:09:05.810 --> 00:09:08.420
so this is good for you too.

00:09:08.420 --> 00:09:10.745
Yeah, but we added some new stuff.

00:09:10.745 --> 00:09:13.640
James Clancy one of
our engineers sends in that PR.

00:09:13.640 --> 00:09:16.970
We have some additional
beneficial work coming for

00:09:16.970 --> 00:09:20.735
fonts as well to make it
easier to do cross-platform.

00:09:20.735 --> 00:09:24.995
We have in the works
the plan to essentially drop

00:09:24.995 --> 00:09:29.350
a font file into your shared,
your.NET standard project.

00:09:29.350 --> 00:09:31.965
Whoops, but you know
what I mean by shared?

00:09:31.965 --> 00:09:33.830
We don't talk about shared in terms

00:09:33.830 --> 00:09:35.660
of the dirty shared project thing,

00:09:35.660 --> 00:09:38.600
we're talking about.NET
standard projects,

00:09:38.600 --> 00:09:40.580
which there's nothing wrong
with shared projects,

00:09:40.580 --> 00:09:42.990
but just to be clear
about what I mean.

00:09:43.260 --> 00:09:46.630
Drop that font in there
and it automatically

00:09:46.630 --> 00:09:49.690
does the pre-build stuff necessary.

00:09:49.690 --> 00:09:53.470
So you don't have to worry
about setting up info.plist.

00:09:53.470 --> 00:09:57.670
You don't have to worry about
combining the names or figuring

00:09:57.670 --> 00:09:59.590
out how does Android reference

00:09:59.590 --> 00:10:02.170
this font versus how does
iOS reference this font.

00:10:02.170 --> 00:10:06.220
You've all enjoyed that I'm sure
and you've used that trivia with

00:10:06.220 --> 00:10:08.440
your friends to wow them how you

00:10:08.440 --> 00:10:10.660
can do custom fonts
on iOS and Android,

00:10:10.660 --> 00:10:12.250
but we can make it easier.

00:10:12.250 --> 00:10:13.735
So that's coming as well.

00:10:13.735 --> 00:10:16.255
So you use these and then

00:10:16.255 --> 00:10:19.360
when the user goes into
the accessibility settings,

00:10:19.360 --> 00:10:21.070
they switch their font size,

00:10:21.070 --> 00:10:24.155
they automatically get
the benefit of the resize,

00:10:24.155 --> 00:10:28.955
whereas if you hard code
those text sizes then it's fixed.

00:10:28.955 --> 00:10:34.329
Now, I would say it's up to
you to use your discretion

00:10:34.329 --> 00:10:36.970
and work with your team
to figure out where to

00:10:36.970 --> 00:10:40.285
use named font size and where
to use fixed font sizes.

00:10:40.285 --> 00:10:43.870
Perhaps everything
doesn't need to scale.

00:10:43.870 --> 00:10:46.510
So that's something
that's at your disposal.

00:10:46.510 --> 00:10:48.400
It's not an all or nothing thing.

00:10:48.400 --> 00:10:50.545
You use it as it
makes the most sense.

00:10:50.545 --> 00:10:52.090
All right. So here are

00:10:52.090 --> 00:10:54.790
the ingredients of what
I'm going to work with.

00:10:54.790 --> 00:10:57.190
A theme service, essentially
I'm just going to

00:10:57.190 --> 00:11:00.070
utilize the existing app resources,

00:11:00.070 --> 00:11:04.060
preset styles, and then I'm
going to apply dynamic styles.

00:11:04.060 --> 00:11:06.160
So let's look at some code, shall we?

00:11:06.160 --> 00:11:09.320
That didn't take very
long to get into code.

00:11:09.330 --> 00:11:13.570
Cool. All right, where is Zappy?

00:11:13.570 --> 00:11:16.610
So here's what I got.

00:11:18.450 --> 00:11:22.010
Let's see what is the zoom key?

00:11:23.400 --> 00:11:29.450
Plus-plus, command plus.
Look at that.

00:11:30.180 --> 00:11:33.535
So come here little cursor dude.

00:11:33.535 --> 00:11:36.620
This is Windows, it's
so hard for me guys.

00:11:36.960 --> 00:11:41.260
All right, so over here
in my Styles folder,

00:11:41.260 --> 00:11:44.320
I have a default theme,

00:11:44.320 --> 00:11:46.270
I have a dark theme,

00:11:46.270 --> 00:11:49.990
and then I have a white theme
which is horrible naming.

00:11:49.990 --> 00:11:52.090
One should maybe be black theme

00:11:52.090 --> 00:11:54.205
or maybe the white theme
should be a light theme.

00:11:54.205 --> 00:11:56.380
Why I mixed white and dark,

00:11:56.380 --> 00:11:59.260
I can only blame on lack of sleep.

00:11:59.260 --> 00:12:02.845
But I'm sure you name everything
perfectly the first time.

00:12:02.845 --> 00:12:04.930
Naming is easy for you,

00:12:04.930 --> 00:12:07.150
it's hard for me. I totally get it.

00:12:07.150 --> 00:12:10.390
Okay. So we'll look at
those files just a second

00:12:10.390 --> 00:12:13.915
and then I've also got some other
stuff split apart here.

00:12:13.915 --> 00:12:17.410
Global XAML which brings
everything together

00:12:17.410 --> 00:12:22.660
really and then I've got icons
over here, sizes, and text.

00:12:22.660 --> 00:12:25.690
Is this a practice that you use if

00:12:25.690 --> 00:12:28.180
you have a lot of resources
or a lot of styles defined,

00:12:28.180 --> 00:12:31.945
you break them up into
categories like that?

00:12:31.945 --> 00:12:34.555
Raise your hand for me if
that's something you do.

00:12:34.555 --> 00:12:39.160
Cool. So it's not crazy after all.

00:12:39.160 --> 00:12:41.620
Get me out of here, there we go.

00:12:41.620 --> 00:12:46.000
So here is my global XAML file
and so I've got all my colors up

00:12:46.000 --> 00:12:50.155
here and maybe that could be
refactored out into a separate file.

00:12:50.155 --> 00:12:53.230
By the way, we're looking
at the Zappy app,

00:12:53.230 --> 00:12:56.980
maybe I should pull up that Edge.

00:12:56.980 --> 00:12:58.690
We'll use an edge now, right.?

00:12:58.690 --> 00:13:00.100
Edge on Windows.

00:13:00.100 --> 00:13:03.670
It's doing great, I enjoy
it. I'm on the Canary.

00:13:03.670 --> 00:13:07.750
I updated all of my stuff
last night not just my Edge,

00:13:07.750 --> 00:13:09.160
all my Visual Studio's,

00:13:09.160 --> 00:13:10.780
all my Xamarin because I'm like,"Hey,

00:13:10.780 --> 00:13:11.980
I got two talks tomorrow.

00:13:11.980 --> 00:13:13.720
What's the best thing to do?"

00:13:13.720 --> 00:13:15.820
Update everything.

00:13:15.820 --> 00:13:18.520
I have no regrets.

00:13:18.520 --> 00:13:21.504
So Zappy it's up on my GitHub,

00:13:21.504 --> 00:13:23.305
that's like a tree or whatever.

00:13:23.305 --> 00:13:26.815
So this app is really,

00:13:26.815 --> 00:13:29.080
I did the little things playground

00:13:29.080 --> 00:13:31.810
app during the 3.0 series
and I really enjoyed

00:13:31.810 --> 00:13:34.150
being able to battle

00:13:34.150 --> 00:13:36.550
test some of those things as
they were being released.

00:13:36.550 --> 00:13:40.210
It also created a nice little
reference but it was butt ugly.

00:13:40.210 --> 00:13:42.310
I'm like we can do better than this.

00:13:42.310 --> 00:13:44.320
So how about we build
a reference app.

00:13:44.320 --> 00:13:48.160
So Zappy is that reference app
for the 4.0 series where I'm just

00:13:48.160 --> 00:13:52.660
adding features showing how we
do things, adding scenarios.

00:13:52.660 --> 00:13:54.100
When I Twitch stream,

00:13:54.100 --> 00:13:57.160
we usually add a screen or
something to this to show

00:13:57.160 --> 00:14:00.490
off some technique
and enjoy ourselves.

00:14:00.490 --> 00:14:01.690
So that's what this app is.

00:14:01.690 --> 00:14:05.290
You can clone it, you can send APRs.

00:14:05.290 --> 00:14:08.979
If you want to see
stuff in the series,

00:14:08.979 --> 00:14:11.995
send an issue we'll
work on it and be cool.

00:14:11.995 --> 00:14:14.185
So that's what we're working on,

00:14:14.185 --> 00:14:17.770
and so I have your typical
resource dictionary

00:14:17.770 --> 00:14:21.625
here. Let's see here.

00:14:21.625 --> 00:14:24.580
I've got some of
the fly-out gradient colors

00:14:24.580 --> 00:14:26.425
because Zappy has a gradient.

00:14:26.425 --> 00:14:28.210
Of course, everything has gradients.

00:14:28.210 --> 00:14:30.010
This is how you see
in more gradients,

00:14:30.010 --> 00:14:32.695
requests for gradients
yeah, it's back.

00:14:32.695 --> 00:14:35.725
Next thing we'll have
beveled edges and then.

00:14:35.725 --> 00:14:37.750
Could you make that
look like a leather?

00:14:37.750 --> 00:14:39.950
I would want that to be leather.

00:14:40.650 --> 00:14:43.675
It's common you-all, it's common.

00:14:43.675 --> 00:14:45.100
I mean really WebAssembly

00:14:45.100 --> 00:14:48.655
is like the second coming
of Silverlight, isn't it?

00:14:48.655 --> 00:14:51.610
A little bit yeah.

00:14:51.610 --> 00:14:56.995
Then of course, I pointed
this out in my last session.

00:14:56.995 --> 00:14:58.660
When you have a style and you

00:14:58.660 --> 00:15:01.060
have types that derive
from other types,

00:15:01.060 --> 00:15:04.405
you can use this property
here apply to derive types.

00:15:04.405 --> 00:15:06.940
This is in particularly useful with

00:15:06.940 --> 00:15:09.730
the way that we did
the aliasing per shell.

00:15:09.730 --> 00:15:11.800
So in shell it's a shell item,

00:15:11.800 --> 00:15:14.740
shell section, and shell
content, that's the hierarchy.

00:15:14.740 --> 00:15:17.140
But it makes a whole
lot more sense to be

00:15:17.140 --> 00:15:19.390
able to say I want a fly out item.

00:15:19.390 --> 00:15:20.740
I want a tab.

00:15:20.740 --> 00:15:23.080
I want it to be a tab bar
with multiple tabs.

00:15:23.080 --> 00:15:25.405
Those are alias names
to these things,

00:15:25.405 --> 00:15:28.120
so you can use
this property to make sure

00:15:28.120 --> 00:15:30.970
your styles get to where
you expect them to be.

00:15:30.970 --> 00:15:34.210
Cool. So that's something
to be aware of and then

00:15:34.210 --> 00:15:35.740
I've got a bunch of converters down

00:15:35.740 --> 00:15:37.675
here which probably could
be its own file to.

00:15:37.675 --> 00:15:40.930
So the way the theming works is that

00:15:40.930 --> 00:15:44.170
my default theme brings
all those bits together.

00:15:44.170 --> 00:15:48.250
Is that big enough? I know
how to do this. No, not that.

00:15:48.250 --> 00:15:51.520
I said not that. There we go.

00:15:51.520 --> 00:15:53.380
Now, I've got a question myself.

00:15:53.380 --> 00:15:56.575
There we go. That's big enough.
Yeah, you can see that.

00:15:56.575 --> 00:15:59.980
So this is my default,

00:15:59.980 --> 00:16:02.770
it's used in MergedDictionaries
which is what do we ship that in

00:16:02.770 --> 00:16:06.325
three something or was
it like a 25, 26 thing?

00:16:06.325 --> 00:16:08.890
It's been so many years.

00:16:08.890 --> 00:16:12.730
Platform keeps maturing and
emerging, it's awesome.

00:16:12.730 --> 00:16:15.490
So this brings everything
together and then I

00:16:15.490 --> 00:16:18.340
have my dark theme
and my white theme.

00:16:18.340 --> 00:16:22.540
So my white theme is based
on the default theme.

00:16:22.540 --> 00:16:26.020
So it has a base source
of that default theme,

00:16:26.020 --> 00:16:30.415
but then it comes in and it
customizes these particular colors.

00:16:30.415 --> 00:16:33.070
Now here's where the dynamic
resources thing comes in.

00:16:33.070 --> 00:16:35.410
You have to give these guys a key so

00:16:35.410 --> 00:16:37.855
that I can reference
these colors elsewhere,

00:16:37.855 --> 00:16:38.980
and so let's go look at where

00:16:38.980 --> 00:16:42.040
that background color is
being used in my global.

00:16:42.040 --> 00:16:46.345
So the background color,

00:16:46.345 --> 00:16:50.270
not that background color,
the other one.

00:16:50.400 --> 00:16:54.565
"Search", here we go.

00:16:54.565 --> 00:16:58.030
So for my visual element
background style I'm

00:16:58.030 --> 00:17:02.020
using it here, uses
the DynamicResource.

00:17:02.020 --> 00:17:04.630
So what the dynamic resource
is going to do for you,

00:17:04.630 --> 00:17:07.795
it has awareness of basically
on property change.

00:17:07.795 --> 00:17:11.934
So when that color or anything
that uses this color changes,

00:17:11.934 --> 00:17:15.175
it's going to make sure that that
change is reflected immediately.

00:17:15.175 --> 00:17:20.620
So similarly, down here inside
of I believe it's a text.

00:17:20.620 --> 00:17:23.290
So for my text headline the color

00:17:23.290 --> 00:17:25.930
being used is my text primary color.

00:17:25.930 --> 00:17:29.259
So everything in
my white theme is using

00:17:29.259 --> 00:17:31.270
essentially dark text on

00:17:31.270 --> 00:17:35.800
a white background and
as you would expect,

00:17:35.800 --> 00:17:38.275
my dark theme is
basically the reverse,

00:17:38.275 --> 00:17:41.830
dark background and light text.

00:17:41.830 --> 00:17:46.630
So we take a look at how this looks.

00:17:46.630 --> 00:17:50.845
I don't know I think I probably
need to redeploy this guy.

00:17:50.845 --> 00:17:55.240
We'll go ahead and do a build
and deploy and then we'll have

00:17:55.240 --> 00:17:57.070
hot reload go on and then
I've got a couple of

00:17:57.070 --> 00:17:59.590
other cool things to share
with you thereafter.

00:17:59.590 --> 00:18:00.670
But I didn't make any changes,

00:18:00.670 --> 00:18:04.555
so this build shouldn't
take till tomorrow.

00:18:04.555 --> 00:18:10.550
I have noticed I've been testing
some hot internal builds.

00:18:10.890 --> 00:18:13.210
But you'd hate that when you hit

00:18:13.210 --> 00:18:15.595
the "Home" button on it just
as it starts to launch,

00:18:15.595 --> 00:18:17.935
that just killed the
thing I'm deploying.

00:18:17.935 --> 00:18:19.810
Just me, no.

00:18:19.810 --> 00:18:21.760
What did I do?

00:18:21.760 --> 00:18:23.620
Isn't this the stuff Maddie ran into

00:18:23.620 --> 00:18:26.275
yesterday where
everything was working?

00:18:26.275 --> 00:18:41.560
What?

00:18:41.560 --> 00:18:44.030
That's a lie.

00:18:46.980 --> 00:18:50.320
That's telling the custom
renderer, that's so weird.

00:18:50.320 --> 00:18:52.945
I literally have done nothing there.

00:18:52.945 --> 00:18:55.255
Literally nothing.

00:18:55.255 --> 00:18:58.570
So what do you do when that happens?

00:18:58.570 --> 00:19:00.685
>> Update.

00:19:00.685 --> 00:19:04.490
>> Update. How about we do a clean?

00:19:05.010 --> 00:19:11.275
What would be interesting.
We'll take a look.

00:19:11.275 --> 00:19:18.380
Not that one this one. What changed?

00:19:20.400 --> 00:19:25.090
Let's see here project
designer, app XAML.

00:19:25.090 --> 00:19:28.000
You're going to screw
something up in the app XAML.

00:19:28.000 --> 00:19:31.395
Let's look at it real quick and

00:19:31.395 --> 00:19:32.810
then we'll try to
rebuild one more time

00:19:32.810 --> 00:19:34.680
and if that doesn't
work, we'll move on.

00:19:34.680 --> 00:19:38.225
Because I have some other really
sweet demos that are even better.

00:19:38.225 --> 00:19:41.700
What was last thing you did here?

00:19:41.800 --> 00:19:45.150
I don't see any problems.

00:19:48.090 --> 00:19:52.370
Sure, your step goes smoothly
every single time, right?

00:19:57.750 --> 00:20:00.460
So this is essentially
going to give me

00:20:00.460 --> 00:20:03.985
the ability to swap themes.

00:20:03.985 --> 00:20:06.940
I'm going to be able
to go into my Settings

00:20:06.940 --> 00:20:10.375
Panel and see my different themes,

00:20:10.375 --> 00:20:14.300
change them, and see
my screen update immediately.

00:20:14.370 --> 00:20:18.290
You can do it little Android.

00:20:19.800 --> 00:20:23.725
Now, it's taking a long time
to build, right?

00:20:23.725 --> 00:20:25.345
After you do that, clean.

00:20:25.345 --> 00:20:28.100
What's up with that?

00:20:28.260 --> 00:20:31.255
Well, that's going, because I
can always come back to it,

00:20:31.255 --> 00:20:33.280
I mean that demo is going
to have to work because it

00:20:33.280 --> 00:20:36.190
really has like
all the best demos in it.

00:20:36.190 --> 00:20:38.680
So let's talk for
a minute about gradients

00:20:38.680 --> 00:20:41.455
and shapes while that's going.

00:20:41.455 --> 00:20:45.310
Since gradients are becoming
so stink and popular,

00:20:45.310 --> 00:20:49.495
how can you do this? Well,
you've got some options.

00:20:49.495 --> 00:20:52.630
Oh look, there's my little emulator.

00:20:52.630 --> 00:20:54.910
You can't see my emulator because
it's on the other screen,

00:20:54.910 --> 00:20:56.140
but it's so tiny.

00:20:56.140 --> 00:20:59.420
All right, we're back. Here we go.

00:20:59.850 --> 00:21:04.330
Exit the slideshow. You can do it.

00:21:04.330 --> 00:21:07.060
You see that? You can see that.

00:21:07.060 --> 00:21:10.240
Let's go back to the code so you
can see it's running. All right.

00:21:10.240 --> 00:21:14.035
So I created a page within
Zappy called a style guide.

00:21:14.035 --> 00:21:16.390
So I grabbed all my colors and I

00:21:16.390 --> 00:21:18.955
throw them into this collection view.

00:21:18.955 --> 00:21:21.520
So I have a collection view that is

00:21:21.520 --> 00:21:25.930
four rows spanning and
then it goes across.

00:21:25.930 --> 00:21:31.930
So collection view is still in
preview but it's in 4.1 stable,

00:21:31.930 --> 00:21:33.175
so if you choose to use it,

00:21:33.175 --> 00:21:35.140
it's available to you.

00:21:35.140 --> 00:21:36.430
I would love to know
how you feel about

00:21:36.430 --> 00:21:37.720
us doing features like that.

00:21:37.720 --> 00:21:39.130
Basically, baking them and

00:21:39.130 --> 00:21:41.080
working on them and
adding features to them

00:21:41.080 --> 00:21:44.875
while they are in stable releases
but putting them behind flags.

00:21:44.875 --> 00:21:48.610
So we're looking for you to
tell us how things are going.

00:21:48.610 --> 00:21:50.230
So not right now,

00:21:50.230 --> 00:21:53.005
don't everybody stand up
and go to the microphone.

00:21:53.005 --> 00:21:55.750
All right, so in this app,

00:21:55.750 --> 00:21:56.980
you see I have a gradient which we're

00:21:56.980 --> 00:21:58.450
going to talk about in just a second.

00:21:58.450 --> 00:22:01.215
But then I've got
this visual settings up here,

00:22:01.215 --> 00:22:04.770
and so I've got
this light and dark switcher.

00:22:04.770 --> 00:22:06.150
So this is actually,

00:22:06.150 --> 00:22:08.460
and I'm going to add
other themes as well.

00:22:08.460 --> 00:22:12.120
Fuchsia has been recommended
as a theme style.

00:22:12.120 --> 00:22:13.740
I don't know why.

00:22:13.740 --> 00:22:16.050
But Squeaky really likes,

00:22:16.050 --> 00:22:17.610
has anybody gone to Squeaky sessions

00:22:17.610 --> 00:22:19.360
this week, I hear she's there.

00:22:19.360 --> 00:22:21.010
She is great, right?

00:22:21.010 --> 00:22:23.815
So she loves the Fuchsia.

00:22:23.815 --> 00:22:27.355
All right. So there's my dark.

00:22:27.355 --> 00:22:32.200
There's my light. Light, bright.

00:22:32.200 --> 00:22:34.045
Yes, so I go dark.

00:22:34.045 --> 00:22:36.310
I close this guy

00:22:36.310 --> 00:22:39.970
and you see that my screen
back here is now dark as well.

00:22:39.970 --> 00:22:43.690
So the way in which
that switch occurring,

00:22:43.690 --> 00:22:46.690
if we go to

00:22:46.690 --> 00:22:56.180
my settings ViewModel here.

00:22:56.400 --> 00:23:01.705
So I have a change theme command,
it's going to come up.

00:23:01.705 --> 00:23:09.640
The selected theme is bound
to the selected item of this.

00:23:09.640 --> 00:23:11.395
You see my cursor? Here again.

00:23:11.395 --> 00:23:12.925
So the light and dark,

00:23:12.925 --> 00:23:14.200
that's actually a collection view,

00:23:14.200 --> 00:23:16.900
it's a horizontal
sliding collection view.

00:23:16.900 --> 00:23:20.630
Matter of fact, well
and I'll do that next.

00:23:20.790 --> 00:23:26.305
Yeah, so I'm listening to the
selected theme as the selected item,

00:23:26.305 --> 00:23:27.805
and then based on that,

00:23:27.805 --> 00:23:29.890
I'm going to new up my dark theme or

00:23:29.890 --> 00:23:33.445
my white theme and apply it
to my app current resources.

00:23:33.445 --> 00:23:35.155
You see how fast that worked,

00:23:35.155 --> 00:23:36.430
and you see that I don't have

00:23:36.430 --> 00:23:38.590
a small amount of resources in there,

00:23:38.590 --> 00:23:40.075
it's quite a bit of stuff.

00:23:40.075 --> 00:23:42.220
So that works out really well.

00:23:42.220 --> 00:23:44.590
Now, that's one way in
which you can do it.

00:23:44.590 --> 00:23:47.005
You can certainly try and
many other ways to do it.

00:23:47.005 --> 00:23:49.360
All this code is up on my GitHub,

00:23:49.360 --> 00:23:52.315
try it out, I would love
to know what you think.

00:23:52.315 --> 00:23:54.760
Yeah. So I thought
that was super easy.

00:23:54.760 --> 00:23:56.650
It was much easier than I
thought it was going to be,

00:23:56.650 --> 00:23:59.305
and I feel like now
I'm a [inaudible] pro.

00:23:59.305 --> 00:24:00.745
I feel like I've got it,

00:24:00.745 --> 00:24:02.320
nobody can stop me now.

00:24:02.320 --> 00:24:05.590
Fuchsia is coming.
The Fuchsia is now.

00:24:05.590 --> 00:24:11.020
Oh boy. All right,

00:24:11.020 --> 00:24:12.880
so let's talk about that gradient.

00:24:12.880 --> 00:24:16.435
So how can we do gradients?

00:24:16.435 --> 00:24:18.310
So native code of course.

00:24:18.310 --> 00:24:20.140
SkiaSharp, you have a canvas,

00:24:20.140 --> 00:24:23.560
you can draw your gradients
on that or the pancake view.

00:24:23.560 --> 00:24:25.315
Anybody familiar with
the Pancake View?

00:24:25.315 --> 00:24:27.400
Makes me hungry every
time I talk about it.

00:24:27.400 --> 00:24:30.760
So Stephen [inaudible]
from the Netherlands,

00:24:30.760 --> 00:24:33.580
who is not here as we have
mentioned several times,

00:24:33.580 --> 00:24:36.025
no shame to you Stephen
for not being here.

00:24:36.025 --> 00:24:38.440
Let's all have an infomercial
for Stephen right now.

00:24:38.440 --> 00:24:41.260
Stephen, I know you're
crying at home right

00:24:41.260 --> 00:24:44.485
now that you weren't able to
make it to the Zam Dev Summit,

00:24:44.485 --> 00:24:49.100
but you know what you've done wrong.

00:24:51.060 --> 00:24:54.235
I think he's on family vacation
or something, anyway.

00:24:54.235 --> 00:24:56.485
Okay, see?

00:24:56.485 --> 00:24:59.950
I'm an equal opportunity
picker on people's.

00:24:59.950 --> 00:25:02.530
So those are options
that you can use.

00:25:02.530 --> 00:25:06.205
Pancake View is really
almost a glorified frame.

00:25:06.205 --> 00:25:07.390
Essentially, it's like frame on

00:25:07.390 --> 00:25:09.205
steroids if you get
a good look at it.

00:25:09.205 --> 00:25:12.385
But very useful and could be
something you want to use.

00:25:12.385 --> 00:25:15.590
But how would you do it if
you wanted to do it yourself?

00:25:16.100 --> 00:25:20.760
Oh, I'm sorry, we're not talking
about gradient theme but shapes.

00:25:20.760 --> 00:25:22.170
You have a lot of options for shapes.

00:25:22.170 --> 00:25:24.090
We're not going to spend
much time on shapes.

00:25:24.090 --> 00:25:26.610
Really, SkiaSharp for drawing is kind

00:25:26.610 --> 00:25:29.285
of your best go to
cross-platform for that.

00:25:29.285 --> 00:25:31.555
Very powerful, quite performer.

00:25:31.555 --> 00:25:36.160
I've seen some examples from you
that are pretty mind blowing.

00:25:36.160 --> 00:25:39.700
I don't know what this flatter
business is all about.

00:25:39.700 --> 00:25:41.815
You can do it in C#.

00:25:41.815 --> 00:25:43.885
You can do it with
SkiaSharp. It's gorgeous.

00:25:43.885 --> 00:25:46.180
Animation is super easy.

00:25:46.180 --> 00:25:47.890
But you can use bitmaps.

00:25:47.890 --> 00:25:50.095
That's something that gets
overlooked a lot, right?

00:25:50.095 --> 00:25:51.850
If you have a design and it has like

00:25:51.850 --> 00:25:53.590
this really interesting shape to it,

00:25:53.590 --> 00:25:55.540
if you go look at
the visual challenge,

00:25:55.540 --> 00:25:58.015
look what Ryan Davis did
on the Quantize app,

00:25:58.015 --> 00:26:01.840
up on the header it has this little
notch with a nice curve to it.

00:26:01.840 --> 00:26:03.925
It's really just an image
in the background.

00:26:03.925 --> 00:26:07.060
So sometimes when you
look at a visual thing,

00:26:07.060 --> 00:26:08.830
you're like how am I
going to achieve that?

00:26:08.830 --> 00:26:10.870
That affect or that

00:26:10.870 --> 00:26:14.275
layout or I don't have a control
that does exactly that.

00:26:14.275 --> 00:26:16.270
Maybe it's not as hard as you think.

00:26:16.270 --> 00:26:18.490
Maybe the second thought
you should have is how can

00:26:18.490 --> 00:26:21.100
I do it for real but
how can I fake it?

00:26:21.100 --> 00:26:24.640
Like if I were going to fake it
and just make it look like it is,

00:26:24.640 --> 00:26:26.665
then how could I do that,

00:26:26.665 --> 00:26:29.875
and sometimes it's as simple
as just embedding an image.

00:26:29.875 --> 00:26:31.585
Thinking it's okay.

00:26:31.585 --> 00:26:33.160
Users don't know.

00:26:33.160 --> 00:26:35.305
Like oh, did he really draw that?

00:26:35.305 --> 00:26:37.165
If the developer didn't draw that,

00:26:37.165 --> 00:26:39.235
this app is crap.

00:26:39.235 --> 00:26:40.990
That's not how it goes.

00:26:40.990 --> 00:26:42.415
I don't know. All right.

00:26:42.415 --> 00:26:44.530
Vector images of course, SVGs,

00:26:44.530 --> 00:26:47.305
there are different controllers
you can load your SVGs into.

00:26:47.305 --> 00:26:49.090
Then I think I already mentioned

00:26:49.090 --> 00:26:51.115
drawing on SkiaSharp or Native code.

00:26:51.115 --> 00:26:52.780
You can draw on Native code.

00:26:52.780 --> 00:27:02.500
So gradients and demos, cool.

00:27:02.500 --> 00:27:04.960
Well, I'll show you first how
I do the gradient in this

00:27:04.960 --> 00:27:07.630
some fly out, okay.

00:27:07.630 --> 00:27:10.135
So this is the shell render.

00:27:10.135 --> 00:27:11.680
So if we go down here,

00:27:11.680 --> 00:27:13.825
I am doing Android.

00:27:13.825 --> 00:27:16.645
So let's look at the Android project,

00:27:16.645 --> 00:27:19.705
got my renderers and I've
got my Zappy shell render.

00:27:19.705 --> 00:27:28.970
All right. So down here when I get
my shelf layout content render.

00:27:29.970 --> 00:27:33.580
Okay, can we see that, cool.

00:27:33.580 --> 00:27:37.840
So I get it, I create
a gradient [inaudible] ,

00:27:37.840 --> 00:27:40.960
I grab, notice, I grabbed

00:27:40.960 --> 00:27:44.170
my colors because I've
got my app theme up here.

00:27:44.170 --> 00:27:46.179
This is a dependency injection,

00:27:46.179 --> 00:27:48.890
this is coming from my resources.

00:27:48.890 --> 00:27:50.550
I showed you in my resources,

00:27:50.550 --> 00:27:53.580
my global file, that I had
a gradient start and end the color.

00:27:53.580 --> 00:27:56.255
I just mentioned it in passing.

00:27:56.255 --> 00:27:59.920
So I get my dependency for my service

00:27:59.920 --> 00:28:03.055
so that down here when I set this,

00:28:03.055 --> 00:28:05.155
I can set it to colors that have been

00:28:05.155 --> 00:28:08.170
established in my shared code.

00:28:08.170 --> 00:28:13.405
Then I was just talking
to somebody about this,

00:28:13.405 --> 00:28:16.390
we use the coordinator view which is

00:28:16.390 --> 00:28:19.480
the view that allows us to do
some really interesting animations,

00:28:19.480 --> 00:28:22.030
if you've seen any hero animations or

00:28:22.030 --> 00:28:24.760
some of the more advanced
material design-based animations.

00:28:24.760 --> 00:28:27.400
A lot of them are based
on the coordinator view,

00:28:27.400 --> 00:28:31.120
and Shell uses it for
quite a bit of the work.

00:28:31.120 --> 00:28:34.525
Which is why I have been
encouraging people to use Shell

00:28:34.525 --> 00:28:36.340
because it's the basis for us to be

00:28:36.340 --> 00:28:38.575
able to add those things more easily,

00:28:38.575 --> 00:28:42.475
I know that transitions can be
a huge pain to do otherwise.

00:28:42.475 --> 00:28:44.860
So you certainly don't
have to use Shell.

00:28:44.860 --> 00:28:46.900
I don't want to send you
the message that if you don't

00:28:46.900 --> 00:28:49.150
use Shell you are somehow
in the Dark Ages.

00:28:49.150 --> 00:28:51.910
You're good, you love
your navigation pages,

00:28:51.910 --> 00:28:53.785
your tab pages, your
master detail pages,

00:28:53.785 --> 00:28:55.030
all that's still good,

00:28:55.030 --> 00:28:57.010
they're not going anywhere,

00:28:57.010 --> 00:28:59.380
it's not toy story
that not being sent to

00:28:59.380 --> 00:29:03.610
the orphanage or whatever.

00:29:03.610 --> 00:29:05.935
It wasn't an orphanage, it
is like a daycare thing.

00:29:05.935 --> 00:29:07.300
No, not in new movie,

00:29:07.300 --> 00:29:10.525
this is like three,
the really sad one.

00:29:10.525 --> 00:29:12.760
Yeah, the new ones
like supposed to be

00:29:12.760 --> 00:29:14.920
good and I'm sure it's still
sad, I heard people cry.

00:29:14.920 --> 00:29:16.840
I won't cry. There will be

00:29:16.840 --> 00:29:20.665
no tears coming from
these eyes as far as you know.

00:29:20.665 --> 00:29:27.700
All right, this is bananas.

00:29:27.700 --> 00:29:30.745
So I get the coordinator layout,

00:29:30.745 --> 00:29:33.670
I set the background to it here,

00:29:33.670 --> 00:29:37.090
and here I set this to transparent

00:29:37.090 --> 00:29:38.560
because there's
some other things laying

00:29:38.560 --> 00:29:40.285
over the top of it with the app bar.

00:29:40.285 --> 00:29:42.600
So I want to make
sure that my gradient

00:29:42.600 --> 00:29:44.985
goes all the way from
the bottom to the top,

00:29:44.985 --> 00:29:49.680
because up here at the top some
of that is actually app bar.

00:29:49.680 --> 00:29:51.600
Yeah, so that's pretty much it,

00:29:51.600 --> 00:29:52.770
and that's how I'm
getting my gradient.

00:29:52.770 --> 00:29:55.060
So I'm using native code
there to do that.

00:29:55.060 --> 00:29:58.000
Now, let's look at another example,

00:29:58.000 --> 00:30:01.195
and this one is from Ciro.

00:30:01.195 --> 00:30:02.920
Ciro is in France,

00:30:02.920 --> 00:30:04.990
Paris he did a live stream with me on

00:30:04.990 --> 00:30:07.440
Twitch where he built a login screen.

00:30:07.440 --> 00:30:11.345
So I have another version
of zap open here,

00:30:11.345 --> 00:30:15.550
where he created
a gradient button view

00:30:15.550 --> 00:30:18.175
or a gradient background
view and a gradient button.

00:30:18.175 --> 00:30:21.740
So if we look at what he did here,

00:30:22.200 --> 00:30:25.015
and I'll run this demo shortly.

00:30:25.015 --> 00:30:26.830
So in the background of the grid he

00:30:26.830 --> 00:30:29.530
has this custom control
of the gradient view.

00:30:29.530 --> 00:30:31.330
He's grabbing that start in

00:30:31.330 --> 00:30:34.555
that end style just like I mentioned
from the static resources,

00:30:34.555 --> 00:30:36.385
and putting it in here.

00:30:36.385 --> 00:30:38.860
So if we look at what
that gradient view

00:30:38.860 --> 00:30:42.145
is it is as you would
expect a custom render.

00:30:42.145 --> 00:30:46.180
So when you come down to
the Android code or the iOS code,

00:30:46.180 --> 00:30:49.495
all it does is draws
a gradient and sends it back.

00:30:49.495 --> 00:30:52.360
So here's the Android code
for the gradient view.

00:30:52.360 --> 00:30:56.664
In this case, it's
a visual element renderer,

00:30:56.664 --> 00:30:59.455
and it's going to create
a linear gradient,

00:30:59.455 --> 00:31:03.115
do the painting and then
draw it on a canvas.

00:31:03.115 --> 00:31:06.610
Then, you can do the
same thing in a button here.

00:31:06.610 --> 00:31:09.415
So I can have a button
that's accustomed button,

00:31:09.415 --> 00:31:11.350
not a real button,

00:31:11.350 --> 00:31:12.715
it's a fake button.

00:31:12.715 --> 00:31:14.770
The only difference between
a fake button and a real button

00:31:14.770 --> 00:31:17.770
is what you call it, still buttons.

00:31:17.770 --> 00:31:20.530
You can declare them all as

00:31:20.530 --> 00:31:22.240
interactive elements then
you'll get all of the

00:31:22.240 --> 00:31:24.475
accessibility benefits
that you should,

00:31:24.475 --> 00:31:27.505
so you can use it here as well.

00:31:27.505 --> 00:31:29.545
So if we run this,

00:31:29.545 --> 00:31:31.900
watch it throw an error
like the last one.

00:31:31.900 --> 00:31:34.400
I dare you to throw an error,

00:31:34.500 --> 00:31:39.415
ever talk to your code
like that, I dare you.

00:31:39.415 --> 00:31:41.620
It's like a person that's

00:31:41.620 --> 00:31:47.960
mean same people just
articulated their screens.

00:31:48.330 --> 00:31:51.650
You know what that gesture is?

00:31:55.590 --> 00:31:58.790
All right, so here come.

00:32:01.530 --> 00:32:05.620
So one of the thing I've been
talking, oh there is an error.

00:32:05.620 --> 00:32:06.880
It is the same error,

00:32:06.880 --> 00:32:13.120
look at that, unbelievable.

00:32:13.120 --> 00:32:15.415
So how do you file a bug for that?

00:32:15.415 --> 00:32:17.515
I mean the bug would basically say,

00:32:17.515 --> 00:32:20.455
I ran it in my hotel room,

00:32:20.455 --> 00:32:24.925
I close the lid, "I went downstairs,

00:32:24.925 --> 00:32:27.609
I waited about two hours,

00:32:27.609 --> 00:32:30.490
I plugged the machine back in

00:32:30.490 --> 00:32:36.145
and then it didn't work," and
that's literally what happened.

00:32:36.145 --> 00:32:41.725
I don't know. I'm cleaning,

00:32:41.725 --> 00:32:44.260
it's not what I did last time,
I just cleaned and restart it.

00:32:44.260 --> 00:32:46.285
I didn't restart the ID.

00:32:46.285 --> 00:32:47.380
I didn't do the full dance,

00:32:47.380 --> 00:32:53.320
I just did like a- sorry.

00:32:53.320 --> 00:32:55.585
I was going to make
like a dance joke,

00:32:55.585 --> 00:32:57.055
like I didn't do the full move,

00:32:57.055 --> 00:33:02.500
I did break dance something.

00:33:02.500 --> 00:33:06.610
Does anybody remember
breaking from the '80s.

00:33:06.610 --> 00:33:08.620
>> [inaudible].

00:33:08.620 --> 00:33:11.095
.>> All of them man, all of them.

00:33:11.095 --> 00:33:13.730
Is that how you hurt your foot?

00:33:14.520 --> 00:33:16.360
>> Well, yeah.

00:33:16.360 --> 00:33:18.145
>> That's what do you claim,

00:33:18.145 --> 00:33:21.680
but you may have been trying
to reclaim the glory days.

00:33:21.750 --> 00:33:27.475
All right, we're still moving we
haven't broken yet, we're good.

00:33:27.475 --> 00:33:28.990
This just gives us more time to

00:33:28.990 --> 00:33:31.330
talk about these things,
is this helpful so far?

00:33:31.330 --> 00:33:32.680
Are these interesting things?

00:33:32.680 --> 00:33:34.510
Things that challenges
that you may have

00:33:34.510 --> 00:33:37.404
faced recently or in the future,

00:33:37.404 --> 00:33:39.505
we will face in the future.

00:33:39.505 --> 00:33:44.680
Speaking of the future has anybody
seen dark, dark on Netflix?

00:33:44.680 --> 00:33:47.350
I know it looks like I
child abduction thing based

00:33:47.350 --> 00:33:50.750
on the like the- that's
not what it's about.

00:33:50.970 --> 00:33:54.865
It's like a sci-fi thing,
it's all in German.

00:33:54.865 --> 00:33:56.575
You can work on your German.

00:33:56.575 --> 00:34:02.065
All right, there we go.

00:34:02.065 --> 00:34:05.200
Come on, give it up
for Visual Studio,

00:34:05.200 --> 00:34:09.710
Visual Studio earning it's money.

00:34:10.710 --> 00:34:14.440
So there's a couple of cool things

00:34:14.440 --> 00:34:17.260
happening here of course you see
the gradients that I mentioned,

00:34:17.260 --> 00:34:19.345
a little bit of
a gradient in the button.

00:34:19.345 --> 00:34:23.500
Then you've got this nice animation
transition happening here.

00:34:23.500 --> 00:34:26.350
So that is not a real
segment to control,

00:34:26.350 --> 00:34:29.080
it's a fake segment to control.

00:34:29.080 --> 00:34:32.260
The only difference between
a real segment to control and

00:34:32.260 --> 00:34:36.265
a fig segment to control
is? What you call it.

00:34:36.265 --> 00:34:40.340
When your boss says, always has
segment can show you, say yeah.

00:34:41.250 --> 00:34:45.850
It is what's it look like, yes.

00:34:45.850 --> 00:34:48.100
So some cool transistors have
been there and you noticed

00:34:48.100 --> 00:34:55.870
the Octocats tail waving,
that is a Lottie.

00:34:55.870 --> 00:34:58.540
So a Lottie is a library from

00:34:58.540 --> 00:35:02.830
Airbnb that they open sourced
and you can use, what is it,

00:35:02.830 --> 00:35:07.390
Adobe after effects,

00:35:07.390 --> 00:35:10.014
and with a little extension
that you can install,

00:35:10.014 --> 00:35:12.505
and you can output your animations.

00:35:12.505 --> 00:35:15.490
I'm very sad that they actually
don't allow you to do that

00:35:15.490 --> 00:35:18.640
from Adobe Flash or animate
or whatever they call it now,

00:35:18.640 --> 00:35:22.150
because I'd be ways your that
after effects, but whatever.

00:35:22.150 --> 00:35:27.220
Yeah. So Martin Van Dyke who
was running around here,

00:35:27.220 --> 00:35:29.200
he may still be around here,

00:35:29.200 --> 00:35:31.450
did the C-Sharp implementation

00:35:31.450 --> 00:35:32.920
and he maintains
the package for that.

00:35:32.920 --> 00:35:38.605
So go thank him for
the Octocat, cool.

00:35:38.605 --> 00:35:41.410
So gradients cool,

00:35:41.410 --> 00:35:43.450
and you see that I've got material

00:35:43.450 --> 00:35:45.445
working here and
everything else as well,

00:35:45.445 --> 00:35:47.950
I'll give you a quick look
at how this animation works.

00:35:47.950 --> 00:35:49.750
This is also up on my GitHub,

00:35:49.750 --> 00:35:51.370
but it emerge as PR,

00:35:51.370 --> 00:35:54.640
which is why it's a separate project
right now because I only

00:35:54.640 --> 00:35:59.150
got it this morning,
which is still fine.

00:35:59.280 --> 00:36:01.960
So the login page is

00:36:01.960 --> 00:36:04.600
just your straightforward
XAML as you would expect,

00:36:04.600 --> 00:36:06.340
I can make that a little bit bigger,

00:36:06.340 --> 00:36:10.640
I can give her this
or do this, not that.

00:36:10.640 --> 00:36:14.620
Anybody ever accidentally
hit that button right there?

00:36:15.120 --> 00:36:20.995
Don't hit that. Yeah, so
really nothing fancy happening here.

00:36:20.995 --> 00:36:22.840
You see that there
are those animations

00:36:22.840 --> 00:36:24.625
but those are not being done in XAML.

00:36:24.625 --> 00:36:28.105
I'm going to show you how to
do them in XAML in a minute.

00:36:28.105 --> 00:36:34.555
So if we look at the back and
the selector option taps,

00:36:34.555 --> 00:36:37.720
this is the tap event
on this guy here.

00:36:37.720 --> 00:36:40.240
This is what's triggering
the animations.

00:36:40.240 --> 00:36:41.740
It's doing some translations,

00:36:41.740 --> 00:36:45.520
so translate to is
just a helper animation method.

00:36:45.520 --> 00:36:48.880
It's still using
animation APIs on the backend.

00:36:48.880 --> 00:36:52.570
You also have fade too
and things like that.

00:36:52.570 --> 00:36:56.440
Then you can do some await
task and group some animation.

00:36:56.440 --> 00:37:00.580
So it does both the translation
and the fade too at the same time.

00:37:00.580 --> 00:37:04.480
Then of course, you can manage in
visibility and things like that.

00:37:04.480 --> 00:37:06.715
So you can do
your animation this way.

00:37:06.715 --> 00:37:08.830
Certainly, nothing wrong with it,

00:37:08.830 --> 00:37:11.005
but I'm also going to show
you how you can do it

00:37:11.005 --> 00:37:14.830
in XAML. All right, cool.

00:37:14.830 --> 00:37:20.665
So that's gradients
and shapes, Parallax.

00:37:20.665 --> 00:37:24.445
I think this is my last
or second to last demo.

00:37:24.445 --> 00:37:28.525
I actually have
an extra demo, so we'll see.

00:37:28.525 --> 00:37:30.550
All right so Parallax.

00:37:30.550 --> 00:37:32.485
So here's what's
happening with Parallax.

00:37:32.485 --> 00:37:36.535
I did exploded view of what
I'm going to show you.

00:37:36.535 --> 00:37:39.745
As matter of fact, no,
it's already here.

00:37:39.745 --> 00:37:41.920
Let's go ahead and
build it and run it,

00:37:41.920 --> 00:37:45.220
so that we don't run into
the same problem we had previously.

00:37:45.220 --> 00:37:46.630
This is the login page example.

00:37:46.630 --> 00:37:48.800
I don't need that, let's close it.

00:37:49.080 --> 00:37:52.180
If I come over here,

00:37:52.180 --> 00:37:55.345
build run go, all right.

00:37:55.345 --> 00:37:58.750
But you didn't see any
of that. That's okay.

00:37:58.750 --> 00:38:01.120
Just on building,
building and running.

00:38:01.120 --> 00:38:04.900
So what you have is you
have different layers of

00:38:04.900 --> 00:38:08.830
things and grid is a really great
way to have different layers.

00:38:08.830 --> 00:38:13.375
Then as things need to
span rows or span columns,

00:38:13.375 --> 00:38:14.710
you use the span.

00:38:14.710 --> 00:38:18.280
So a row span column span,
that sort of thing.

00:38:18.280 --> 00:38:22.315
I set the wrong one sorry.

00:38:22.315 --> 00:38:27.805
So why did you run that code?

00:38:27.805 --> 00:38:31.835
That's not the right code, so weird.

00:38:31.835 --> 00:38:33.900
I mean, it's the same project,

00:38:33.900 --> 00:38:35.340
but the running in
two different directories.

00:38:35.340 --> 00:38:37.860
But I guess it does
generate the same binary.

00:38:37.860 --> 00:38:41.340
So that's really weird. All right.

00:38:41.340 --> 00:38:43.470
So let me clean this real quick.

00:38:43.470 --> 00:38:49.120
Build clean, build clean,

00:38:49.120 --> 00:38:51.040
clean all, cleaned it all.

00:38:51.040 --> 00:38:54.130
Now like my kids, don't just
shove things in the closet,

00:38:54.130 --> 00:38:59.110
clean at all. Cool. All right.

00:38:59.110 --> 00:39:01.750
So what's going to happen is,

00:39:01.750 --> 00:39:07.150
we're going to move
the list of content up,

00:39:07.150 --> 00:39:09.190
but we're going to move the header,

00:39:09.190 --> 00:39:12.475
the background image at
a different rate from

00:39:12.475 --> 00:39:14.530
the content that the user is

00:39:14.530 --> 00:39:17.575
interacting with that
creates the Parallax effect.

00:39:17.575 --> 00:39:19.060
So in order to do that,

00:39:19.060 --> 00:39:20.650
we need to be able to listen to

00:39:20.650 --> 00:39:25.300
the scroll data off of the
thing I'm interacting with.

00:39:25.300 --> 00:39:29.710
So traditionally, that's what has
caused problems for developers.

00:39:29.710 --> 00:39:32.800
In Xamarin Forms, is
that not all things

00:39:32.800 --> 00:39:36.100
that scroll in Xamarin Forms
tell you they're scrolling.

00:39:36.100 --> 00:39:38.320
Now ScrollView does have

00:39:38.320 --> 00:39:39.910
an onscroll method or

00:39:39.910 --> 00:39:42.880
an event that will dispatch
as the user scrolls,

00:39:42.880 --> 00:39:45.085
so you can handle
that and code behind.

00:39:45.085 --> 00:39:47.530
But I don't want to do
that and code behind,

00:39:47.530 --> 00:39:50.590
because XAML hot reload
is reloading XAML,

00:39:50.590 --> 00:39:52.165
it's not reloading code behind.

00:39:52.165 --> 00:39:54.925
I want to stay in XAML
as much as possible.

00:39:54.925 --> 00:39:58.420
So that I get the full
benefit of reloading.

00:39:58.420 --> 00:40:03.790
So what happens here,
is going to do that.

00:40:03.790 --> 00:40:06.580
Now, that little bar

00:40:06.580 --> 00:40:09.655
there is representative
of the navigation bar.

00:40:09.655 --> 00:40:13.060
Then we also are going to
do a fake navigation bar,

00:40:13.060 --> 00:40:15.430
and once you see the animation
you'll know why.

00:40:15.430 --> 00:40:18.745
So here are the ingredients
to make this happen.

00:40:18.745 --> 00:40:21.280
I need to have some
scroll position or scroll

00:40:21.280 --> 00:40:25.210
percentage off of which I can
trigger my other animations.

00:40:25.210 --> 00:40:27.265
I need to have bindings,

00:40:27.265 --> 00:40:31.510
so that I can do it all and react
to it appropriately in XAML.

00:40:31.510 --> 00:40:35.319
Then I use liberally
value converters,

00:40:35.319 --> 00:40:38.965
so that I can apply the different
effects that I want to.

00:40:38.965 --> 00:40:41.530
Really the math is pretty
easy on this stuff.

00:40:41.530 --> 00:40:43.180
To get something to do something

00:40:43.180 --> 00:40:45.280
at a different rate
than something else,

00:40:45.280 --> 00:40:47.560
you take the percentage
of the scroll times

00:40:47.560 --> 00:40:50.710
the max distance of
the scroll, times factor.

00:40:50.710 --> 00:40:53.485
We all knew this. It's just

00:40:53.485 --> 00:40:55.870
multiply some things together
and see what happens.

00:40:55.870 --> 00:40:57.715
It's really what it
all comes down to.

00:40:57.715 --> 00:40:59.290
Your bosses like, "How did you use

00:40:59.290 --> 00:41:02.215
a real Parallax algorithm for that,

00:41:02.215 --> 00:41:06.175
or a fake algorithm?"
Depends on what you call it.

00:41:06.175 --> 00:41:09.250
So you can mess around with
these all you want to,

00:41:09.250 --> 00:41:11.830
but really that's as
simple as it gets.

00:41:11.830 --> 00:41:15.279
So let's talk for a minute
about transitions,

00:41:15.279 --> 00:41:17.470
because I want to do
these demos altogether.

00:41:17.470 --> 00:41:20.800
So I'm not talking
specifically about transitions

00:41:20.800 --> 00:41:25.345
from one page to another page,

00:41:25.345 --> 00:41:27.805
but I'm talking about
from state to state.

00:41:27.805 --> 00:41:32.200
So there's a nice library again
from Stephen to S in Stephen,

00:41:32.200 --> 00:41:35.185
I don't know what you did
that you couldn't be here,

00:41:35.185 --> 00:41:38.845
but dude, he's here in spirit.

00:41:38.845 --> 00:41:42.519
But you see this, when
page content loads,

00:41:42.519 --> 00:41:44.080
have some loading indicator.

00:41:44.080 --> 00:41:45.745
Tell the user you're doing something.

00:41:45.745 --> 00:41:48.204
Even better than just
having a spinner,

00:41:48.204 --> 00:41:50.890
why not give them
that experience of seeing

00:41:50.890 --> 00:41:54.955
the content in a fake state
and then replace it.

00:41:54.955 --> 00:41:57.430
It's something you see a lot
of apps doing these days.

00:41:57.430 --> 00:41:59.080
I'm told Facebook does it.

00:41:59.080 --> 00:42:02.560
I don't really use Facebook very
much, but I've seen it happen.

00:42:02.560 --> 00:42:05.080
So it tells people something happens,

00:42:05.080 --> 00:42:07.105
communicates what's happening.

00:42:07.105 --> 00:42:09.115
Animations communicate things.

00:42:09.115 --> 00:42:11.230
When you do an animation
willy-nilly or a

00:42:11.230 --> 00:42:14.515
transition willy-nilly just
because it might look cool,

00:42:14.515 --> 00:42:16.780
you may be sending a wrong message to

00:42:16.780 --> 00:42:18.670
somebody and you may
be frustrating them.

00:42:18.670 --> 00:42:20.260
Because it might take too long and

00:42:20.260 --> 00:42:22.940
they just want to get
from point A to point B.

00:42:23.340 --> 00:42:25.405
So when should you use it?

00:42:25.405 --> 00:42:30.025
I think when changing state is
a great time updating the data.

00:42:30.025 --> 00:42:31.450
Let people know
something's happening,

00:42:31.450 --> 00:42:32.680
but don't give them a blank screen,

00:42:32.680 --> 00:42:34.510
never give them a blank screen.

00:42:34.510 --> 00:42:36.340
If you're going to
have an empty view,

00:42:36.340 --> 00:42:39.130
which collection do you supports
empty view as a template?

00:42:39.130 --> 00:42:42.130
So that's awesome,
ListView didn't have that.

00:42:42.130 --> 00:42:44.590
That's a great place to put

00:42:44.590 --> 00:42:47.635
some indication to the user
of what's happening,

00:42:47.635 --> 00:42:49.630
or instructions about what

00:42:49.630 --> 00:42:52.375
they need to do to
populate that content.

00:42:52.375 --> 00:42:56.380
Short running processes are really
good to use for transitions.

00:42:56.380 --> 00:42:57.730
If you have a long running process,

00:42:57.730 --> 00:43:01.210
you might want to think closely
about how you're handling that,

00:43:01.210 --> 00:43:04.495
and then validation and
it form validation.

00:43:04.495 --> 00:43:08.875
That's a great time to practice
your animation transition skills.

00:43:08.875 --> 00:43:11.140
So a couple of do's and don'ts.

00:43:11.140 --> 00:43:14.425
Some of these say the same thing,

00:43:14.425 --> 00:43:17.830
but I thought maybe this would
be a good way to express it.

00:43:17.830 --> 00:43:19.645
Don't be gratuitous.

00:43:19.645 --> 00:43:21.475
Don't make your
animation a hindrance.

00:43:21.475 --> 00:43:22.960
If I have to wait for an animation to

00:43:22.960 --> 00:43:24.685
complete to get to where I'm going,

00:43:24.685 --> 00:43:27.505
that's probably not
the best place for it.

00:43:27.505 --> 00:43:30.970
If you try to transition
more than one thing at a time,

00:43:30.970 --> 00:43:33.745
you run the risk of
overwhelming the device,

00:43:33.745 --> 00:43:35.770
and then they just
become super choppy.

00:43:35.770 --> 00:43:37.570
If you've ever used the Flyout Menu,

00:43:37.570 --> 00:43:39.190
and you've noticed
and maybe on Android

00:43:39.190 --> 00:43:40.900
in particular that opening and

00:43:40.900 --> 00:43:42.340
closing the flyout menu while you're

00:43:42.340 --> 00:43:44.440
changing content makes it chop,

00:43:44.440 --> 00:43:46.089
and doesn't go smoothly,

00:43:46.089 --> 00:43:48.220
it's because it's doing
too many things at one time.

00:43:48.220 --> 00:43:49.630
So what you can do is,

00:43:49.630 --> 00:43:51.835
you can set a delay on
one of those things.

00:43:51.835 --> 00:43:54.835
Maybe let the menu close first,

00:43:54.835 --> 00:43:56.785
then load the contents of the page,

00:43:56.785 --> 00:43:59.980
or vice versa, then that's
a way to get around that.

00:43:59.980 --> 00:44:03.310
But be careful about trying
to do too much at once.

00:44:03.310 --> 00:44:07.210
Make it reversible trigger it
in response to a user action.

00:44:07.210 --> 00:44:08.950
These things make it delightful.

00:44:08.950 --> 00:44:11.110
When the user feels like it's

00:44:11.110 --> 00:44:14.455
a real thing in their hands
that's responding to their touch,

00:44:14.455 --> 00:44:17.560
it's very delightful, or
responding to their voice,

00:44:17.560 --> 00:44:20.260
or responding to their location.

00:44:20.260 --> 00:44:23.440
It knows, it's aware of where
they are and what they're doing.

00:44:23.440 --> 00:44:26.095
That's really delightful
for people. All right.

00:44:26.095 --> 00:44:29.920
So let's look at the demo.

00:44:29.920 --> 00:44:32.710
Cool, we're back in the right app.

00:44:32.710 --> 00:44:35.230
So what you didn't see
the last time was when I

00:44:35.230 --> 00:44:37.990
built it and ran it it was
still that login screen,

00:44:37.990 --> 00:44:39.820
which was super weird,
because that wasn't

00:44:39.820 --> 00:44:42.190
even the code that I
was building from.

00:44:42.190 --> 00:44:45.190
So I have a page here in

00:44:45.190 --> 00:44:50.360
my scenarios called product
details, please don't crash.

00:44:50.460 --> 00:44:54.430
So you see that I've got
my loading animation there,

00:44:54.430 --> 00:44:55.990
and then hopefully if the Internet is

00:44:55.990 --> 00:44:57.970
behaving I'm going to get an image.

00:44:57.970 --> 00:45:00.770
Oh, come on you can do it.

00:45:03.230 --> 00:45:08.290
Take to, it's trying to
load from the Internets.

00:45:08.290 --> 00:45:10.705
Do we have Internets?

00:45:10.705 --> 00:45:13.780
Come on you can do it.

00:45:13.780 --> 00:45:20.120
Looks much better with- Hi mom.

00:45:24.030 --> 00:45:28.870
That was awesome. I felt

00:45:28.870 --> 00:45:33.265
uplifted as that music was
happening, didn't you?

00:45:33.265 --> 00:45:36.130
Well, I don't know why
my guitar isn't loading.

00:45:36.130 --> 00:45:37.810
Let's look at the XAML equipped.

00:45:37.810 --> 00:45:39.790
We've got hot reload go on and
we can take a moment to look at

00:45:39.790 --> 00:45:43.090
the XAML. All right.

00:45:43.090 --> 00:45:46.105
So I have a lot of XAML here
you-all, because like I said,

00:45:46.105 --> 00:45:48.640
I was trying to stay
in XAML as much as

00:45:48.640 --> 00:45:52.465
possible to benefit from hot
reload and not go other places.

00:45:52.465 --> 00:45:56.200
So first thing you'll
probably notice as holy crap.

00:45:56.200 --> 00:45:58.235
There's a lot of XML ins.

00:45:58.235 --> 00:46:01.185
That's all name spaces.

00:46:01.185 --> 00:46:03.000
I got a lot of files
all over the place.

00:46:03.000 --> 00:46:06.060
Like I said, I'm using
this easy loading thing.

00:46:06.060 --> 00:46:09.030
This is my page for which I need to

00:46:09.030 --> 00:46:10.470
bind to something for some reason

00:46:10.470 --> 00:46:11.640
I don't remember why I have it this,

00:46:11.640 --> 00:46:13.730
but it's must be really important.

00:46:13.730 --> 00:46:15.700
In this particular case,

00:46:15.700 --> 00:46:18.280
I'm hiding some shell stuff because I

00:46:18.280 --> 00:46:21.565
just don't want it here for
the purposes of this demo,

00:46:21.565 --> 00:46:24.220
and then of course I am forcing

00:46:24.220 --> 00:46:26.935
a couple of styles here for
the purposes of the demo too.

00:46:26.935 --> 00:46:29.965
I'm setting my binding context
here in the XAML.

00:46:29.965 --> 00:46:31.765
I don't know if this is
a common practice for you.

00:46:31.765 --> 00:46:34.330
I'm fine this works out
quite well with Shell,

00:46:34.330 --> 00:46:38.680
and Shell is designed with
this pattern in mind that you put,

00:46:38.680 --> 00:46:40.390
I find shouldn't talk
about Shell too much.

00:46:40.390 --> 00:46:42.295
Shane has a session
later today on Shell.

00:46:42.295 --> 00:46:44.150
Go see Shane's talk on shell.

00:46:44.150 --> 00:46:46.710
It's going to be great every spline
I go into Shane stock right.

00:46:46.710 --> 00:46:49.360
I think it's right here,
it should be right here.

00:46:50.210 --> 00:46:53.250
So of course in my resources,

00:46:53.250 --> 00:46:55.920
I have basically nothing
set for some animations.

00:46:55.920 --> 00:46:57.200
I have declared.

00:46:57.200 --> 00:47:01.825
I am using Zam animation
from Javier Suarez Ruiz.

00:47:01.825 --> 00:47:05.230
He's on the via smack team
and he's in Spain.

00:47:05.230 --> 00:47:07.720
So he does some really
nice examples online.

00:47:07.720 --> 00:47:10.090
If you ever go look
him up I think he has

00:47:10.090 --> 00:47:13.015
Xamarin awesome or
some GitHub like that.

00:47:13.015 --> 00:47:15.070
I know we've got a couple
of those nowadays.

00:47:15.070 --> 00:47:17.350
So check that out
some really good examples.

00:47:17.350 --> 00:47:20.440
So I've got a couple of
pre-built animations here.

00:47:20.440 --> 00:47:22.585
This one's are CarouselFadeOut.

00:47:22.585 --> 00:47:25.960
This is a NavBarFadeOut,
CarouselFadeIn,

00:47:25.960 --> 00:47:29.230
FakeNavBar, I guess I shouldn't
call it a FakeNavBar.

00:47:29.230 --> 00:47:34.370
I should be like Dave'sNavBar and
like that's not fake it's real.

00:47:34.860 --> 00:47:38.065
So then of course I have my grid,

00:47:38.065 --> 00:47:40.750
and then the image at the top is

00:47:40.750 --> 00:47:44.050
this guy right here,
this CarouselView.

00:47:44.050 --> 00:47:47.425
So where are my images?

00:47:47.425 --> 00:47:51.430
They're right here. What's
wrong with you image?

00:47:51.430 --> 00:47:54.860
Look at that awesome URL.

00:47:55.020 --> 00:47:57.640
I know I just look,

00:47:57.640 --> 00:47:59.995
I'm in love with guitars right now.

00:47:59.995 --> 00:48:02.185
I can control my keyboard.

00:48:02.185 --> 00:48:04.045
I saw this picture
this guitar of mine,

00:48:04.045 --> 00:48:06.430
that's what I'm going
to use in my demo.

00:48:06.430 --> 00:48:08.950
Let's just make sure
the image even exists.

00:48:08.950 --> 00:48:11.780
It does exist, what's your problem?

00:48:12.000 --> 00:48:15.950
Let's see if I can bump it.

00:48:19.470 --> 00:48:30.025
Yeah. Man, Android bytes
again let's do it.

00:48:30.025 --> 00:48:38.605
I'm not scared. Let's update
Visual Studio right now. All right.

00:48:38.605 --> 00:48:40.990
No, I'm not going to do that.

00:48:40.990 --> 00:48:42.640
I do have a little glitch where it

00:48:42.640 --> 00:48:44.290
doesn't like to start
the emulator from

00:48:44.290 --> 00:48:48.160
Visual Studio right now.
No I don't want to know.

00:48:48.160 --> 00:48:51.400
I also have a really weird glitch

00:48:51.400 --> 00:48:53.770
where Hyper-V is actually
slower than HAXM.

00:48:53.770 --> 00:48:55.720
Is anybody have that going on?

00:48:55.720 --> 00:48:58.370
Is that your experience?

00:48:59.160 --> 00:49:01.960
Cool. All right.

00:49:01.960 --> 00:49:05.065
Restarting the emulator.

00:49:05.065 --> 00:49:06.940
This is why I like
doing live streaming.

00:49:06.940 --> 00:49:10.090
It's much more low key and you're
like work through this stuff.

00:49:10.090 --> 00:49:12.130
It's all good. I don't

00:49:12.130 --> 00:49:14.780
have to be up here being
all pretty for you.

00:49:15.690 --> 00:49:19.760
All right. It started.
That was super fast.

00:49:19.800 --> 00:49:23.590
Is it actually alive or is
it frozen cool is live.

00:49:23.590 --> 00:49:25.465
All right, redeploy.

00:49:25.465 --> 00:49:27.160
So now you're saying
that I'm going to get

00:49:27.160 --> 00:49:30.835
my image who says I'm
going to get an image.

00:49:30.835 --> 00:49:35.365
Couple people hesitantly saying
yes one very competent person.

00:49:35.365 --> 00:49:40.765
Most of you are like I think
maybe, that was fast too.

00:49:40.765 --> 00:49:44.240
I wasn't I'm usually
that's going a lot slower.

00:49:52.170 --> 00:49:55.390
Also why I enjoy doing
live streaming in

00:49:55.390 --> 00:49:59.470
live coding because
y'all get to help me.

00:49:59.470 --> 00:50:01.870
All right. Cool. So
here's what's happening.

00:50:01.870 --> 00:50:03.460
I'll scroll a little bit slower.

00:50:03.460 --> 00:50:07.720
You see the parallax going
on there with the, yeah.

00:50:07.720 --> 00:50:11.080
Then you see that I have
a NavBar and a NavBar.

00:50:11.080 --> 00:50:14.470
As I get up here to the
top the image fades out

00:50:14.470 --> 00:50:18.580
boom and then my NavBar fades in.

00:50:18.580 --> 00:50:24.340
So here's here's the hard way
to do that NavBar transition.

00:50:24.340 --> 00:50:26.515
The hard way is to say,

00:50:26.515 --> 00:50:28.480
"I'm going to do all that work.

00:50:28.480 --> 00:50:30.190
I'm only going to
have one back button.

00:50:30.190 --> 00:50:31.480
I'm going to have one zoom button.

00:50:31.480 --> 00:50:33.175
I'm going to have
one shopping cart button.

00:50:33.175 --> 00:50:34.300
I'm going to have one background,

00:50:34.300 --> 00:50:36.070
and I'm going to do
all those translations

00:50:36.070 --> 00:50:37.840
myself." That's the hard way.

00:50:37.840 --> 00:50:39.715
The easy way is to say,

00:50:39.715 --> 00:50:42.580
"I'm going to have
the first state and then I'm just

00:50:42.580 --> 00:50:46.045
going to create another NavBar
and faded and over the top of it,

00:50:46.045 --> 00:50:48.565
and they're all going
to do same thing.

00:50:48.565 --> 00:50:51.490
Trust me much easier.

00:50:51.490 --> 00:50:53.320
So that's actually
what's happening there,

00:50:53.320 --> 00:50:55.135
and basically as I scroll up,

00:50:55.135 --> 00:50:58.135
I get to a certain point and
it triggers that animation.

00:50:58.135 --> 00:51:00.700
So I'm using event
triggers and I'm using

00:51:00.700 --> 00:51:03.760
data triggers and
also using bindings.

00:51:03.760 --> 00:51:07.255
So for the parallax scroll

00:51:07.255 --> 00:51:09.655
since that's what I'm
supposed to be talking about,

00:51:09.655 --> 00:51:13.045
I have everything inside
of a ScrollerView.

00:51:13.045 --> 00:51:16.165
You can see that the ScrollerView
is a custom view.

00:51:16.165 --> 00:51:18.940
It's just a scroll view on which I

00:51:18.940 --> 00:51:21.790
have exposed the scroll property,

00:51:21.790 --> 00:51:28.580
because up here on the carousel
which is the guitar,

00:51:28.830 --> 00:51:35.725
you see that I have no not the data
trigger the translation.

00:51:35.725 --> 00:51:37.375
I have this code here.

00:51:37.375 --> 00:51:40.810
I am translating the Y position
of the carousel.

00:51:40.810 --> 00:51:42.850
So as I scroll up,

00:51:42.850 --> 00:51:44.350
my carousel moves.

00:51:44.350 --> 00:51:46.045
My guitar moves.

00:51:46.045 --> 00:51:49.420
So I am binding to
a scroll percentage which is

00:51:49.420 --> 00:51:53.080
just a property I exposed
off of the ScrollerView.

00:51:53.080 --> 00:51:55.555
Then again I have a converter here,

00:51:55.555 --> 00:51:57.010
and I'm using this.

00:51:57.010 --> 00:51:59.950
This is a nice little trick
that Stephen showed me.

00:51:59.950 --> 00:52:02.650
Maybe it's not trick. I'm
just using the parameters.

00:52:02.650 --> 00:52:04.300
I have the ability because

00:52:04.300 --> 00:52:07.030
sometimes you want to pass
more than one parameter.

00:52:07.030 --> 00:52:12.820
So I'm just passing a string
with a semicolon delimiter,

00:52:12.820 --> 00:52:15.610
and I can pass as much as I want.

00:52:15.610 --> 00:52:20.095
So I'm passing a factor
of what I wanted to do,

00:52:20.095 --> 00:52:23.215
a minimum value, a maximum value.

00:52:23.215 --> 00:52:25.420
Whether or not it is true or false.

00:52:25.420 --> 00:52:27.580
I don't remember what
that property was for,

00:52:27.580 --> 00:52:30.730
and then I don't even remember
what that one was for.

00:52:30.730 --> 00:52:34.915
So but the thing is that
because that's all there now,

00:52:34.915 --> 00:52:37.855
I don't have to go back and
forth the C# change anything.

00:52:37.855 --> 00:52:39.775
I don't have to go back to
code behind a chastening.

00:52:39.775 --> 00:52:43.030
I can just tweak these values and
reload and reload and reload.

00:52:43.030 --> 00:52:45.790
So I can take this
and I can say, "Okay.

00:52:45.790 --> 00:52:51.040
We're going to do just
one and save that,

00:52:51.040 --> 00:52:55.375
reload the page, and then now
it's going the wrong direction."

00:52:55.375 --> 00:52:57.160
So it's like oh Dave you're

00:52:57.160 --> 00:52:59.230
a moron you're going to have
to rebuild this whole thing.

00:52:59.230 --> 00:53:01.960
No. We shall not rebuild.

00:53:01.960 --> 00:53:03.970
That's your goal, and whole goal is

00:53:03.970 --> 00:53:06.460
a developer now is
to stop rebuilding.

00:53:06.460 --> 00:53:07.990
So what can I possibly

00:53:07.990 --> 00:53:10.390
do to make this thing
do something different?

00:53:10.390 --> 00:53:14.995
So now reload reload.

00:53:14.995 --> 00:53:16.525
Sometimes you don't
even know for reload.

00:53:16.525 --> 00:53:19.675
Look at that now it's
mouse-like I'm chasing it away,

00:53:19.675 --> 00:53:21.895
and that's not the effect
you want either is it.

00:53:21.895 --> 00:53:24.790
So I just keeps tweaking
this and I found that

00:53:24.790 --> 00:53:28.465
the negative 10 factor seems
to work out pretty well,

00:53:28.465 --> 00:53:30.880
and now I get my nice transition.

00:53:30.880 --> 00:53:35.275
Now another thing
you'll notice is that,

00:53:35.275 --> 00:53:39.370
I don't know if you can see this
but you see how it went to white.

00:53:39.370 --> 00:53:43.540
But my background is
actually like a gray color.

00:53:43.540 --> 00:53:45.790
I actually have a another box for

00:53:45.790 --> 00:53:47.665
you sitting behind the CarouselView.

00:53:47.665 --> 00:53:49.510
So I can fade out the CarouselView,

00:53:49.510 --> 00:53:52.000
but keep it on a white background.

00:53:52.000 --> 00:53:54.385
So it does some nice things there.

00:53:54.385 --> 00:53:56.410
So quite a few things happening here.

00:53:56.410 --> 00:53:59.560
Now, I didn't really
show you how the easy

00:53:59.560 --> 00:54:02.755
loading for the screen works.

00:54:02.755 --> 00:54:08.485
So to go back real quick product
details that part right there.

00:54:08.485 --> 00:54:11.065
I'll show you how that
works real quick.

00:54:11.065 --> 00:54:13.555
Yeah man, I'm not quitting.

00:54:13.555 --> 00:54:15.205
We're going we're going for it.

00:54:15.205 --> 00:54:17.245
We're going for it. Do you,

00:54:17.245 --> 00:54:18.790
I mean, I'm Kramer appear man.

00:54:18.790 --> 00:54:21.100
We're going into the end of the line.

00:54:21.100 --> 00:54:23.845
No I'm just kidding. I'm
wrapping up. I'm wrapping.

00:54:23.845 --> 00:54:26.650
This is the last demo the bonus demo.

00:54:26.650 --> 00:54:29.560
It's all good. Just give each
other a hug and be fine.

00:54:29.560 --> 00:54:36.235
So it's at Brandon,

00:54:36.235 --> 00:54:40.265
are you trying to boo me
off the stage come on men,

00:54:40.265 --> 00:54:42.310
now just kidding, I'm almost done.

00:54:42.310 --> 00:54:46.270
So really all you do is you do this.

00:54:46.270 --> 00:54:48.010
You provide a loading template.

00:54:48.010 --> 00:54:50.350
Now I don't know
the performance implications.

00:54:50.350 --> 00:54:52.060
So your mileage may vary,

00:54:52.060 --> 00:54:53.605
but you pretty much just fake

00:54:53.605 --> 00:54:57.780
out the content that you're
going to be displaying.

00:54:57.780 --> 00:54:59.805
Then you need to bind

00:54:59.805 --> 00:55:02.520
this attached property
is loading to something.

00:55:02.520 --> 00:55:04.250
So I haven't is busy,

00:55:04.250 --> 00:55:07.480
and you probably all have in
his busy in your view models.

00:55:07.480 --> 00:55:08.980
So that's pretty much it.

00:55:08.980 --> 00:55:10.885
This code is all up on my GitHub.

00:55:10.885 --> 00:55:12.250
There is one more thing.

00:55:12.250 --> 00:55:15.430
I'll point you to, it's in
my slides because I think

00:55:15.430 --> 00:55:18.985
that this is a really great
resource to check out.

00:55:18.985 --> 00:55:23.150
Do this, display that action.

00:55:24.240 --> 00:55:28.510
So Kym Phillpotts who
works on MS learn,

00:55:28.510 --> 00:55:30.910
formerly Xamarin University has

00:55:30.910 --> 00:55:33.280
been twitch streaming his examples.

00:55:33.280 --> 00:55:34.705
This is one that he did.

00:55:34.705 --> 00:55:37.075
I think it's crazy good.

00:55:37.075 --> 00:55:39.090
I may, you do this kind of stuff,

00:55:39.090 --> 00:55:41.345
your boss is going
to give you a raise.

00:55:41.345 --> 00:55:44.155
Seriously, look at that.

00:55:44.155 --> 00:55:46.270
So check his stuff out.

00:55:46.270 --> 00:55:51.265
This demo is up on his GitHub as
well as well as several others.

00:55:51.265 --> 00:55:55.180
Animation can really be
a nice touch on top of everything.

00:55:55.180 --> 00:55:57.340
But there's a lot of
other basic things

00:55:57.340 --> 00:55:58.795
you can take care of. So anyway.

00:55:58.795 --> 00:56:01.750
Thank you so much for your time
for listening to my jokes.

00:56:01.750 --> 00:56:04.040
Hope you learned something.

00:56:06.000 --> 00:56:08.200
Everybody stay.

00:56:08.200 --> 00:56:10.000
[MUSIC]