WEBVTT
00:00:08.410 --> 00:00:11.560
Welcome back everyone to another
addition of the Xamarin Show,
00:00:11.560 --> 00:00:13.238
snack pack edition.
00:00:13.238 --> 00:00:16.280
I'm here in the cozy and
quaint studio B of Channel 9, but
00:00:16.280 --> 00:00:18.960
don't worry, I've got some
awesome Xamarin content for you.
00:00:18.960 --> 00:00:21.460
And today we're gonna be
talking about the preview
00:00:21.460 --> 00:00:23.750
of the Xamarin Forms Previewer.
00:00:23.750 --> 00:00:26.230
That's right,
a preview of the previewer.
00:00:26.230 --> 00:00:28.770
Now the idea here is that
often we are building
00:00:28.770 --> 00:00:31.630
Xamarin Forms applications,
you're creating the user interface
00:00:31.630 --> 00:00:35.980
all in a cross platform XAML markup,
which is like an XML type markup,
00:00:35.980 --> 00:00:40.250
with some data bindings so it can
actually tie into your code bind.
00:00:40.250 --> 00:00:43.470
Now normally what you'd have
to do is write your XAML,
00:00:43.470 --> 00:00:47.540
deploy to a simulator or a device to
see it actually being rendered to
00:00:47.540 --> 00:00:50.690
make sure your data bindings
are all setup correctly.
00:00:50.690 --> 00:00:54.740
However, the Xamarin Forms Previewer
tries to get rid of that loop over,
00:00:54.740 --> 00:00:57.700
that kind of, that debug loop
over and over and over again.
00:00:57.700 --> 00:00:59.590
The idea is, what if you could just,
I don't know,
00:00:59.590 --> 00:01:04.560
see what your user interface looks
like inside of Xamarin Studio or
00:01:04.560 --> 00:01:07.270
Visual Studio before
actually having to deploy.
00:01:07.270 --> 00:01:09.150
So for little changes,
little tweaks and
00:01:09.150 --> 00:01:12.270
things like that it'd be easier
just to set a few properties.
00:01:12.270 --> 00:01:13.520
Now the Previewer is not a designer.
00:01:13.520 --> 00:01:15.460
It's not like a drag and
drop and things like that.
00:01:15.460 --> 00:01:17.190
But what it will do
is it will render and
00:01:17.190 --> 00:01:20.450
run your application live
inside of the actual IDEs.
00:01:20.450 --> 00:01:21.150
Now I'm gonna be demo-ing
00:01:21.150 --> 00:01:24.090
everything right here in my
MacBook inside of Xamarin Studio.
00:01:24.090 --> 00:01:25.600
But the Xamarin Forms Previewer is
00:01:25.600 --> 00:01:27.280
also available inside
of Visual Studio.
00:01:27.280 --> 00:01:29.200
Just in a little
different window option.
00:01:29.200 --> 00:01:31.140
And It'll have all the links and
if you're looking,
00:01:31.140 --> 00:01:32.290
if you're using Visual Studio or
00:01:32.290 --> 00:01:34.800
Xamarin Studio in
the show notes below.
00:01:34.800 --> 00:01:35.890
So make sure you check that out.
00:01:35.890 --> 00:01:37.770
So let's go ahead and
swap over and into my Mac.
00:01:39.140 --> 00:01:41.840
So here I am and I just have a very
simple application that I kinda like
00:01:41.840 --> 00:01:42.450
to show off.
00:01:42.450 --> 00:01:45.920
Which is like this little monkeys
application for iOS and Android.
00:01:45.920 --> 00:01:48.070
Has a few views of Home,
MonkeysPage,
00:01:48.070 --> 00:01:50.930
which is a list of monkeys,
a DetailsPage.
00:01:50.930 --> 00:01:54.196
And then some ViewModels
to do some data binding.
00:01:54.196 --> 00:01:57.330
Now if we see here we have a few,
a content page.
00:01:57.330 --> 00:01:58.100
We have a button.
00:01:58.100 --> 00:02:00.520
We have a few different buttons and
a switch down here.
00:02:00.520 --> 00:02:03.219
So very simple user interface,
no data binding.
00:02:03.219 --> 00:02:06.320
Now if I wanted to run that,
I'd have to actually run it.
00:02:06.320 --> 00:02:07.920
Put it on a similar device.
00:02:07.920 --> 00:02:10.170
But, now I can come up to
this little preview pane in
00:02:10.170 --> 00:02:11.530
the top right.
00:02:11.530 --> 00:02:14.680
I can actually open up
the Xamarin Forms Previewer.
00:02:14.680 --> 00:02:15.720
So here it is.
00:02:15.720 --> 00:02:19.332
And what we can see is, we have
a full Android view right here of
00:02:19.332 --> 00:02:21.965
the XAML that is
being rendered live.
00:02:21.965 --> 00:02:24.402
If I toggle over up here
to the platform of iOS,
00:02:24.402 --> 00:02:26.915
we see what it looks like
on an iOS application.
00:02:26.915 --> 00:02:30.355
If I come in and
I was to change a setting here,
00:02:30.355 --> 00:02:34.716
let's say background color,
and I set it equal to Aqua.
00:02:34.716 --> 00:02:37.670
For instance, it will now
update the background there.
00:02:37.670 --> 00:02:40.200
As you can see, as I'm typing, it
will actually tell me that there is
00:02:40.200 --> 00:02:44.500
an exception happening because
the actual XAML was incorrect.
00:02:44.500 --> 00:02:48.026
If I toggle back over here
to Android, it's back again.
00:02:48.026 --> 00:02:49.597
Now I can go ahead and
delete the access.
00:02:49.597 --> 00:02:51.446
It's not super pretty
to look at [LAUGH].
00:02:51.446 --> 00:02:53.455
But now as I said, if I come in and
00:02:53.455 --> 00:02:57.701
start adding more buttons into the
user interface, I can come in and
00:02:57.701 --> 00:03:00.851
I can say,
I really want this button down here.
00:03:00.851 --> 00:03:04.981
And it'll say "Hello Xamarin Show"
and I can start modifying and
00:03:04.981 --> 00:03:09.310
essentially playing around
with the different properties.
00:03:09.310 --> 00:03:12.850
So if I wanted to see what
the horizontal options of
00:03:13.870 --> 00:03:16.630
End to look like for
instance I can say,
00:03:16.630 --> 00:03:19.520
that's gonna move it all the way
over to the right hand side.
00:03:19.520 --> 00:03:22.720
If I put it over on the start,
now it's gonna be on the start.
00:03:22.720 --> 00:03:23.800
Then I can see what the default is,
00:03:23.800 --> 00:03:26.060
which is actually just gonna
be the fill all the way.
00:03:26.060 --> 00:03:29.650
I can start playing around with
margins, if I wanted to adjust this
00:03:29.650 --> 00:03:33.438
to 80 for some reason, and
I wanna say these would be 80, 80.
00:03:33.438 --> 00:03:36.499
And or what actually happens if
I just set the margin to 80?
00:03:36.499 --> 00:03:39.250
It doesn't move cuz
it'll fill in all sides.
00:03:39.250 --> 00:03:42.190
You can see what it looks like
when I set that to False.
00:03:42.190 --> 00:03:45.300
And now of course I can go and say,
what does that look like on iOS?
00:03:45.300 --> 00:03:49.260
So I tap on iOS, and sure enough,
we have our iOS look and feel.
00:03:49.260 --> 00:03:51.570
So as I start building out these
buttons, I might wanna come in and
00:03:51.570 --> 00:03:56.950
say BorderColor= Aqua because
that's our new favorite color and
00:03:56.950 --> 00:04:03.000
then I can say a border radius
00:04:03.000 --> 00:04:07.720
equals two and border width
equals two for instance.
00:04:07.720 --> 00:04:09.780
And now we start to get a border
around it and I can actually
00:04:11.060 --> 00:04:14.010
zoom in here down the bottom right
and say okay that's interesting,
00:04:14.010 --> 00:04:18.030
what if I give it a bigger radius
of like nine for instance or 50,
00:04:18.030 --> 00:04:21.140
that's gonna look a little
bit too much there.
00:04:21.140 --> 00:04:22.680
So you can actually just
start playing around and
00:04:22.680 --> 00:04:26.790
see the actual user interface update
in real time which is really nice to
00:04:26.790 --> 00:04:30.240
do without having these little
small tweaks to the user interface.
00:04:31.290 --> 00:04:33.396
There and of course you can see
what it looks like over on Android.
00:04:33.396 --> 00:04:36.651
I mean there's no impact here
because the border impact doesn't
00:04:36.651 --> 00:04:38.020
affect the buttons there.
00:04:38.020 --> 00:04:40.420
So you can kind of see what happens
differently between iOS and
00:04:40.420 --> 00:04:42.990
Android or what's going on
inside the user interface.
00:04:44.520 --> 00:04:46.964
So what if you wanna do something
a little bit more complex?
00:04:46.964 --> 00:04:49.210
What if we have a list of data?
00:04:49.210 --> 00:04:51.620
So if we look at our MonkeysPage,
00:04:51.620 --> 00:04:56.130
here what we can see is that
we have a stack layout.
00:04:56.130 --> 00:04:59.880
We have a button that says how
many monkeys and right now.
00:04:59.880 --> 00:05:01.610
Actually usually when
I'm inside here,
00:05:01.610 --> 00:05:04.940
I like to drop down the entire view
so I should do something like this.
00:05:04.940 --> 00:05:07.030
You can see I have a button
that says how many monkeys,
00:05:07.030 --> 00:05:10.160
I have a label here that has
a data binding to MonkeyCount
00:05:10.160 --> 00:05:11.830
with a StringFormat.
00:05:11.830 --> 00:05:15.100
And if I actually was to do
something like put Monkeys in here,
00:05:16.470 --> 00:05:19.430
it's not being able to data bind
anything so nothing's happening.
00:05:19.430 --> 00:05:23.090
And then we have a list view here,
so there's monkeys and keys and
00:05:23.090 --> 00:05:24.740
grouping enabled.
00:05:24.740 --> 00:05:27.690
Well, the problem is that I
don't actually have any data
00:05:27.690 --> 00:05:28.930
that's being bound to it.
00:05:28.930 --> 00:05:31.970
In fact, if I toggle over to iOS,
there's no data inside here.
00:05:31.970 --> 00:05:33.090
It's just a blank list.
00:05:33.090 --> 00:05:35.760
And you can clearly see that
the list view is there, but
00:05:35.760 --> 00:05:36.720
it's a blank list.
00:05:38.040 --> 00:05:40.460
Now if I come over into
my solution explorer and
00:05:40.460 --> 00:05:43.120
go into the MonkeysViewModel,
it's a very simple,
00:05:43.120 --> 00:05:46.480
just like a grouping of
an observable collection of Monkeys.
00:05:46.480 --> 00:05:48.378
I have MonkeysGroup that
are inside of here.
00:05:48.378 --> 00:05:50.450
And I just have this
MonkeysViewModel.
00:05:50.450 --> 00:05:53.670
So how do I get that
data into here and
00:05:53.670 --> 00:05:55.950
how do I get it into my actual view?
00:05:55.950 --> 00:05:59.360
Well we can actually use this
pattern that became very popular
00:05:59.360 --> 00:06:02.050
with MVBM lite that I like
to use a lot which is,
00:06:02.050 --> 00:06:03.510
it's called the View Model Locator.
00:06:03.510 --> 00:06:06.290
And I have a blog about it that
again I'll put in the show notes.
00:06:06.290 --> 00:06:07.620
So I come into my app.cs,
00:06:07.620 --> 00:06:10.980
I've created a little
static helper class here.
00:06:10.980 --> 00:06:14.920
So it says hey,
this is gonna be a public
00:06:14.920 --> 00:06:18.408
static class view mode locator,
you can name it whatever you want.
00:06:18.408 --> 00:06:22.440
Here's the MonkeysViewModel and
just create a new one for me,
00:06:22.440 --> 00:06:24.730
and if you are on the details page,
we'll just go ahead and
00:06:24.730 --> 00:06:26.788
grab the first Monkey
that's inside of here.
00:06:26.788 --> 00:06:30.660
So the DetailsViewModel just takes
in a Monkey that's inside of here
00:06:30.660 --> 00:06:33.960
and assigns it to it, so
that's it and that's pretty cool.
00:06:33.960 --> 00:06:37.305
So now what you can do is you can
come back into the actual Monkeys
00:06:37.305 --> 00:06:42.780
page and we can come up and actually
assign the binding context up top.
00:06:42.780 --> 00:06:44.820
So what I can do is,
I can first create the name space.
00:06:44.820 --> 00:06:46.714
So, xmlns.
00:06:46.714 --> 00:06:48.849
And I'll say design.
00:06:48.849 --> 00:06:53.340
And I'll say equals
clr-namespace:Monkeys cuz that's
00:06:53.340 --> 00:06:56.310
the name of my portable
class library.
00:06:56.310 --> 00:06:59.730
I'll say assembly=Monkeys.
00:07:00.760 --> 00:07:04.200
And that's essentially where does
my view model locator exist.
00:07:04.200 --> 00:07:06.633
Well it exists in
the namespace of Monkeys and
00:07:06.633 --> 00:07:09.970
it's inside of my Monkeys
assembly that's gonna be output.
00:07:11.300 --> 00:07:15.306
Now what I need to do is I actually
need to put in another line of code.
00:07:15.306 --> 00:07:19.436
So what I'm gonna do is actually
grab this snippet cuz it's a little
00:07:19.436 --> 00:07:20.092
bit long.
00:07:20.092 --> 00:07:22.724
And we gonna set the binding
context right here.
00:07:22.724 --> 00:07:25.562
So let me show you what this looks
like while we will move this down.
00:07:25.562 --> 00:07:30.761
So we can see as I have a binding
context set to a static and
00:07:30.761 --> 00:07:33.331
it says where does it live?
00:07:33.331 --> 00:07:36.602
Well it lives on the design:ViewModelLocator.MonkeysView-
00:07:36.602 --> 00:07:36.996
Model.
00:07:36.996 --> 00:07:40.939
So there's a Static class somewhere
inside of the design namespace
00:07:40.939 --> 00:07:45.107
called ViewModelLocator, and go
assign it to the MonkeysViewModel.
00:07:45.107 --> 00:07:46.260
So there we go.
00:07:46.260 --> 00:07:47.940
So now what I can do is
I can hit Preview, and
00:07:47.940 --> 00:07:49.160
I actually get my Monkeys here.
00:07:49.160 --> 00:07:50.940
We can see that it
already says 9 Monkeys,
00:07:50.940 --> 00:07:52.220
which get the images loading in.
00:07:52.220 --> 00:07:54.770
Cuz again, it's actually
running our application.
00:07:54.770 --> 00:07:58.120
If I was to go ahead and change
some of this, and I'll say that
00:07:58.120 --> 00:08:02.000
it's not grouping, and we actually
just want Monkeys inside of here.
00:08:02.000 --> 00:08:06.090
We can actually see it update and
render our application live.
00:08:06.090 --> 00:08:07.511
And I can adjust this string here,
00:08:07.511 --> 00:08:09.670
it's actually updating
the total Monkeys.
00:08:09.670 --> 00:08:12.027
We can enable and
disable the grouping on here.
00:08:12.027 --> 00:08:12.840
So let's say, true.
00:08:12.840 --> 00:08:15.870
And I set this back
to MonkeysGrouped.
00:08:15.870 --> 00:08:20.450
It will actually now group
our actual Monkeys back and
00:08:20.450 --> 00:08:23.090
forth that we need so
make sure that you're
00:08:23.090 --> 00:08:26.290
actually doing the data binding
here, so MonkeysGrouped.
00:08:28.750 --> 00:08:30.640
MonkeysGrouped, so there it is.
00:08:30.640 --> 00:08:32.240
So as we start playing around,
00:08:32.240 --> 00:08:35.210
we could actually then modify some
of these different locations.
00:08:35.210 --> 00:08:37.200
So if I really was thinking that,
00:08:37.200 --> 00:08:41.020
well the name property or
I guess we could adjust some of
00:08:41.020 --> 00:08:43.842
the things like maybe the images
should be a little bit bigger.
00:08:43.842 --> 00:08:46.620
Or should be a little bit
smaller inside of here so
00:08:46.620 --> 00:08:49.810
the width and the height here,
we can set the height and
00:08:49.810 --> 00:08:53.120
width a little bit here and
say well the rows maybe should be,
00:08:53.120 --> 00:08:58.310
the row height should be 88 or
maybe be 100 here.
00:08:58.310 --> 00:09:02.250
So I'm going to start modifying
this around, there we go.
00:09:02.250 --> 00:09:03.690
So now we're actually
getting bigger views.
00:09:03.690 --> 00:09:06.690
There's some weird oddities going
on here because we're setting
00:09:06.690 --> 00:09:07.720
the row height.
00:09:07.720 --> 00:09:09.950
So it actually had to do some
other modifications to UI.
00:09:09.950 --> 00:09:11.080
This is looking pretty good already.
00:09:11.080 --> 00:09:13.790
So I have the Monkeys,
I'm doing a few other things.
00:09:13.790 --> 00:09:16.350
And I can adjust my different
views without having to redeploy
00:09:16.350 --> 00:09:17.060
my application.
00:09:17.060 --> 00:09:19.600
Now every time I make the change,
it will go ahead and
00:09:19.600 --> 00:09:21.980
reevaluate a few different
things in my user interface.
00:09:21.980 --> 00:09:23.440
So it may take a little bit of time,
but
00:09:23.440 --> 00:09:25.540
it's a lot faster than
having to redeploy.
00:09:25.540 --> 00:09:27.050
And if you don't want the preview,
00:09:27.050 --> 00:09:29.470
just go ahead and toggle down
the preview, and it goes away.
00:09:31.000 --> 00:09:31.870
So there you have it,
00:09:31.870 --> 00:09:35.780
taking a look at the Xamarin Forms
Previewer that is in preview today.
00:09:35.780 --> 00:09:37.300
I have all the links
in the show note.
00:09:37.300 --> 00:09:40.276
Until next time, I'm James
Montemagno and this has been,
00:09:40.276 --> 00:09:41.236
The Xamarin Show.
00:09:41.236 --> 00:09:47.366
[MUSIC]