WEBVTT 00:00:00.000 --> 00:00:04.230 >> Hello. Dan actually got a wonderful laugh out of me. 00:00:04.230 --> 00:00:05.580 I was supposed to be quiet but when he 00:00:05.580 --> 00:00:07.320 said monkeys that type really fast, 00:00:07.320 --> 00:00:10.110 that speaks to the Xamarin monkey, right? 00:00:10.110 --> 00:00:11.505 So welcome. 00:00:11.505 --> 00:00:13.800 We're going to be talking about how a Xamarin Forms 00:00:13.800 --> 00:00:16.395 is more productive and beautiful than ever. 00:00:16.395 --> 00:00:19.020 So I'm glad that you've joined us. I need your help. 00:00:19.020 --> 00:00:20.240 I am David Ortinau, 00:00:20.240 --> 00:00:24.630 Principal Program Manager for mobile developer tools covering the 00:00:24.630 --> 00:00:29.895 Xamarin mobile SDK's with our tooling. 00:00:29.895 --> 00:00:31.280 There are many of us that work on 00:00:31.280 --> 00:00:33.260 this product and I'm really excited today to 00:00:33.260 --> 00:00:36.770 share with you the cool new stuff that we've been doing. 00:00:36.770 --> 00:00:39.800 So first of all I want to hear from you. 00:00:39.800 --> 00:00:42.230 So I've been livestreaming once a 00:00:42.230 --> 00:00:44.700 week for quite a while now on Twitch, 00:00:44.700 --> 00:00:48.470 and I find that people tune in from all over the world. 00:00:48.470 --> 00:00:50.360 So we're talking about the weather 00:00:50.360 --> 00:00:52.955 today and we've talked a lot about the weather in Redmond, 00:00:52.955 --> 00:00:55.310 but where are you, where are you watching from? 00:00:55.310 --> 00:00:57.470 Go to your Twitter client 00:00:57.470 --> 00:00:59.360 whatever your favorite Twitter client is, 00:00:59.360 --> 00:01:03.575 use the.NET conf hashtag and tell me where you're watching from. 00:01:03.575 --> 00:01:06.770 Are you in North America? 00:01:06.770 --> 00:01:09.155 Yes I went back to the slides, sorry. 00:01:09.155 --> 00:01:12.095 Are you in North America, where you? 00:01:12.095 --> 00:01:13.790 You're clearly supposed to be 00:01:13.790 --> 00:01:15.955 working right now if you're in North America, 00:01:15.955 --> 00:01:17.460 but this is work, 00:01:17.460 --> 00:01:19.460 this is education for what you 00:01:19.460 --> 00:01:21.740 do on a day-to-day basis. So that's all good. 00:01:21.740 --> 00:01:24.215 How about South America, 00:01:24.215 --> 00:01:27.200 and of course North America I included Central America. 00:01:27.200 --> 00:01:30.425 I'm going to skip over something. 00:01:30.425 --> 00:01:33.530 How about the great continent of Africa? 00:01:33.530 --> 00:01:35.060 I know that we have a lot of people that 00:01:35.060 --> 00:01:37.160 will tune in from Africa when I stream, 00:01:37.160 --> 00:01:41.375 so it's always great to see people from that region of the world. 00:01:41.375 --> 00:01:44.570 Xamarin is such a global community, it's really awesome. 00:01:44.570 --> 00:01:47.840 It's one of the things I prize most about working for Microsoft is 00:01:47.840 --> 00:01:49.460 being able to interact with people all over 00:01:49.460 --> 00:01:51.490 the world. How about Europe? 00:01:51.490 --> 00:01:52.710 Where are you come in from? 00:01:52.710 --> 00:01:53.925 I'm looking for some tweets here, 00:01:53.925 --> 00:01:56.085 come on, hit me with some tweets. 00:01:56.085 --> 00:02:00.210 All right we've got one and St. Louis, my hometown. 00:02:00.210 --> 00:02:04.080 Kerala India, Norway, Olympia Washington, 00:02:04.080 --> 00:02:06.135 not too far away, Mexico, 00:02:06.135 --> 00:02:09.285 Belgium sweet. All right. 00:02:09.285 --> 00:02:12.110 Oceanside California, I don't know exactly where 00:02:12.110 --> 00:02:15.065 that is but it's ocean side so I need to go visit. 00:02:15.065 --> 00:02:16.870 That sounds amazing. 00:02:16.870 --> 00:02:20.025 Awesome. Well, and the land down under, 00:02:20.025 --> 00:02:22.800 we cannot forget the land down under, right? 00:02:22.800 --> 00:02:24.150 Because I know that we've got a strong 00:02:24.150 --> 00:02:26.150 vibrant.NET Xamarin community. 00:02:26.150 --> 00:02:28.010 They're passionate about the technology, 00:02:28.010 --> 00:02:31.100 trying to get more and more adoption where they work, 00:02:31.100 --> 00:02:33.530 and we want to help support them as best we can. 00:02:33.530 --> 00:02:37.700 One of my favorite Twitch streamers little teaser is in Australia. 00:02:37.700 --> 00:02:40.295 So let's talk about the weather. 00:02:40.295 --> 00:02:43.430 So as I mentioned if you saw the keynote this morning 00:02:43.430 --> 00:02:45.080 I believe it was Glenn that said that 00:02:45.080 --> 00:02:47.055 Redmond is the only weather that matters, 00:02:47.055 --> 00:02:49.970 and given where you are in the world I 00:02:49.970 --> 00:02:53.420 imagine you think not that the weather all over the world matters. 00:02:53.420 --> 00:02:55.820 So let's look at how we can address this. 00:02:55.820 --> 00:02:58.640 I'm going to jump over to my Visual Studio. 00:02:58.640 --> 00:03:02.935 Let my Android emulator resize. 00:03:02.935 --> 00:03:06.530 All right. We're good. So this is the demo 00:03:06.530 --> 00:03:10.250 you saw from James Montemagno earlier during the keynote. 00:03:10.250 --> 00:03:13.220 Again, same code if I zoom in 00:03:13.220 --> 00:03:16.390 here if I know my keystrokes I don't know my keystrokes. 00:03:16.390 --> 00:03:19.110 Yes oh I do, look at that. All right. 00:03:19.110 --> 00:03:22.185 So same solution, it's called the Blazor, 00:03:22.185 --> 00:03:24.330 the server side stuff all that here. 00:03:24.330 --> 00:03:25.770 Then I added some stuff right, 00:03:25.770 --> 00:03:28.045 of course I have to add my stuff. 00:03:28.045 --> 00:03:32.735 So this is the same project running and you've got Seattle here, 00:03:32.735 --> 00:03:34.940 but I've done some things, of course. 00:03:34.940 --> 00:03:37.775 I want to show you what's new and great in Xamarin Forms. 00:03:37.775 --> 00:03:38.960 So first of all, 00:03:38.960 --> 00:03:40.475 let's start with shell. 00:03:40.475 --> 00:03:42.890 So what shell provides you is 00:03:42.890 --> 00:03:46.520 a new container for your applications to make them more flexible, 00:03:46.520 --> 00:03:49.190 make it easier for you to create the flyout menus, 00:03:49.190 --> 00:03:51.560 the tab bars whether they're at the bottom or the top, 00:03:51.560 --> 00:03:53.480 as well as some navigation services 00:03:53.480 --> 00:03:55.295 which we'll dig into here in just a minute. 00:03:55.295 --> 00:03:59.210 But the first thing I need is to be able to get to that side menu. 00:03:59.210 --> 00:04:01.715 So I'm going to come on down here and I'm going to use 00:04:01.715 --> 00:04:05.140 another new thing that we have in Xamarin Forms. 00:04:05.140 --> 00:04:06.770 Actually, as I'm looking at this there's 00:04:06.770 --> 00:04:09.605 at least two new things here in Xamarin Forms. 00:04:09.605 --> 00:04:11.930 So let me go "Ku." 00:04:11.930 --> 00:04:13.760 So now I'm adding an image button. 00:04:13.760 --> 00:04:15.935 I'll go ahead and save that and it'll update. 00:04:15.935 --> 00:04:19.355 Now, I've got a button over here that I can open my menu. 00:04:19.355 --> 00:04:21.340 So what are those new things that I just mentioned? 00:04:21.340 --> 00:04:24.130 Well, first of all we now have an image button. 00:04:24.130 --> 00:04:27.110 Of course, before you could've used an image, 00:04:27.110 --> 00:04:28.160 you could have used a button, 00:04:28.160 --> 00:04:29.960 and you could have potentially come up with 00:04:29.960 --> 00:04:31.940 something that met your design needs. 00:04:31.940 --> 00:04:34.160 But there's a good reason to explicitly have 00:04:34.160 --> 00:04:36.860 an image button for accessibility reasons, 00:04:36.860 --> 00:04:40.160 for findability so that you can find the thing that you need, 00:04:40.160 --> 00:04:42.170 and it behaves slightly differently. 00:04:42.170 --> 00:04:45.545 The other new thing that I used is the font image source. 00:04:45.545 --> 00:04:47.870 So this is actually font awesome, 00:04:47.870 --> 00:04:51.830 and I have a static class here that brings in the unicode, 00:04:51.830 --> 00:04:55.100 special characters that I need to be able to use that and 00:04:55.100 --> 00:04:58.700 then I can come in here and pick something else. 00:04:58.700 --> 00:05:00.560 What do we have here? Air freshener, 00:05:00.560 --> 00:05:02.450 I don't know why I would ever use an air freshener 00:05:02.450 --> 00:05:05.700 but it's important to have, right? 00:05:05.700 --> 00:05:08.400 So you can change that 00:05:08.400 --> 00:05:11.235 out and then of course I can do it like this. 00:05:11.235 --> 00:05:14.920 Now, I could have done this, 00:05:14.920 --> 00:05:19.480 because what I've actually done and I'll show you, 00:05:19.480 --> 00:05:23.770 is up here at the top I have my shell and I can access this 00:05:23.770 --> 00:05:25.630 from anywhere in my application and 00:05:25.630 --> 00:05:28.555 control how I want my app shell to behave. 00:05:28.555 --> 00:05:31.690 So at this point, I have hidden the nav bar, but I can go 00:05:31.690 --> 00:05:34.750 ahead and flip that back to true and it'll bring it back in, 00:05:34.750 --> 00:05:37.135 but it's not designed for this. 00:05:37.135 --> 00:05:40.150 The beautiful design that James 00:05:40.150 --> 00:05:42.925 pulled together for this really doesn't work with that. 00:05:42.925 --> 00:05:44.590 So that's why I decided to hide it. 00:05:44.590 --> 00:05:46.450 Now with it available, 00:05:46.450 --> 00:05:48.505 that menu works out of the box. 00:05:48.505 --> 00:05:51.340 You don't have to go add a button like I just did, 00:05:51.340 --> 00:05:55.755 but I wanted to because hey, I wanted to show off. 00:05:55.755 --> 00:05:58.594 So I'll go ahead and hide that again, 00:05:58.594 --> 00:06:00.770 and let's look at the shell file itself. 00:06:00.770 --> 00:06:02.300 So what's going on here? 00:06:02.300 --> 00:06:09.165 So let's move this out of the way, go away. 00:06:09.165 --> 00:06:11.855 There we go. All right so super simple. 00:06:11.855 --> 00:06:14.855 I've got those three flyout menu items that you just saw, 00:06:14.855 --> 00:06:16.640 I open that back up again. 00:06:16.640 --> 00:06:19.820 So I've got my flyout menu for the Seattle and 00:06:19.820 --> 00:06:23.190 then St. Louis which we're going to next, my hometown. 00:06:23.190 --> 00:06:25.935 Then we've got the world map. 00:06:25.935 --> 00:06:30.420 So essentially, it's just a shell file, nothing supermagic here. 00:06:30.420 --> 00:06:33.155 Then I start declaring what it is that I want, 00:06:33.155 --> 00:06:37.025 three flyouts and these are the pages that you should go to. 00:06:37.025 --> 00:06:38.960 Note that I am using data templates. 00:06:38.960 --> 00:06:40.730 This is a good practice to get into, 00:06:40.730 --> 00:06:42.920 because it allows things to load upon 00:06:42.920 --> 00:06:45.170 demand and you don't have to worry 00:06:45.170 --> 00:06:48.950 about things eagerly loading 00:06:48.950 --> 00:06:50.480 and slowing down your app startup time. 00:06:50.480 --> 00:06:52.460 So it's a good practice to get into. 00:06:52.460 --> 00:06:55.830 All right, let's see where do we want to go next? 00:06:55.830 --> 00:06:59.040 So I think we need to go to St. Louis, 00:06:59.040 --> 00:07:01.490 and let's correct this Seattle 00:07:01.490 --> 00:07:03.110 is the only whether that matters thing. 00:07:03.110 --> 00:07:05.300 So it looks like it's currently 78 in St. Louis. 00:07:05.300 --> 00:07:07.775 I already did the view model magic 00:07:07.775 --> 00:07:09.230 to make that happen which is not really 00:07:09.230 --> 00:07:11.610 magic. It's just a view model. 00:07:11.630 --> 00:07:14.850 So let's go up here first to where does it 00:07:14.850 --> 00:07:17.610 say Seattle, let's correct that. 00:07:17.610 --> 00:07:20.120 Of course, we don't want just one location. 00:07:20.120 --> 00:07:23.000 I saw Dan in the previous session did a very nice job of 00:07:23.000 --> 00:07:27.290 showing how to upgrade the app to support multiple locations. 00:07:27.290 --> 00:07:30.455 We'll go ahead and bind that location, so we can get 00:07:30.455 --> 00:07:33.905 St. Louis coming off of our view model, excellent. 00:07:33.905 --> 00:07:36.245 Then he has the space needle here. 00:07:36.245 --> 00:07:38.675 We don't have a space needle in St. Louis, 00:07:38.675 --> 00:07:40.210 what do we have in St. Louis? 00:07:40.210 --> 00:07:42.125 Well, clearly we have the arch. 00:07:42.125 --> 00:07:44.630 So I have an image here of the St. Louis 00:07:44.630 --> 00:07:49.115 skyline that shows off the arch, very beautiful. 00:07:49.115 --> 00:07:55.550 I love that, but really I would be remiss not to include this. 00:07:55.550 --> 00:08:02.735 So St. Louis currently is the proud possessor of the Stanley Cup. 00:08:02.735 --> 00:08:05.735 So that's important to know. 00:08:05.735 --> 00:08:08.720 It keeps showing up all over town in St. Louis. 00:08:08.720 --> 00:08:13.010 So now I think we have a proper St. 00:08:13.010 --> 00:08:18.020 Louis representative map or weather page there. 00:08:18.020 --> 00:08:21.200 But let's go a little bit further and let's show you 00:08:21.200 --> 00:08:25.205 a couple of other new things that Xamarin Forms has for you now. 00:08:25.205 --> 00:08:29.330 So I've just gone to this page and you would be forgiven if you 00:08:29.330 --> 00:08:33.435 thought that the city list page is utilizing a ListView, 00:08:33.435 --> 00:08:34.710 it is not a ListView. 00:08:34.710 --> 00:08:36.450 This is CollectionView, CollectionView 00:08:36.450 --> 00:08:38.615 we've been previewing for several versions. 00:08:38.615 --> 00:08:43.580 It's now in, were shipping Xamarin Forms 4.3 pre-release, 00:08:43.580 --> 00:08:46.415 and so you can use it today. 00:08:46.415 --> 00:08:50.510 When 4.0 goes stable we expect to call this a stable release. 00:08:50.510 --> 00:08:53.870 We're vetting the last of the bugs and making 00:08:53.870 --> 00:08:57.695 sure that the features meet that MVP bar for shipping this. 00:08:57.695 --> 00:08:59.720 I think it's really useful. 00:08:59.720 --> 00:09:02.690 So let me show you a few things that we have going on here. 00:09:02.690 --> 00:09:06.320 So first of all, here is my CollectionView, 00:09:06.320 --> 00:09:09.095 and the syntax is very similar to what you would 00:09:09.095 --> 00:09:12.365 be experiencing or used to if you use the ListView. 00:09:12.365 --> 00:09:14.660 This is built on all modern controls. 00:09:14.660 --> 00:09:17.960 Uicollectionview on the iOS side, 00:09:17.960 --> 00:09:19.860 I believe it's RecyclerView on the Android side, 00:09:19.860 --> 00:09:23.435 and we also have a UWP implementation based on that control. 00:09:23.435 --> 00:09:26.510 So I have this inside of a grid. 00:09:26.510 --> 00:09:28.520 I have my item source bound here. 00:09:28.520 --> 00:09:31.160 It's a flat list of cities as you can see. 00:09:31.160 --> 00:09:33.755 I have declared a linear layout. 00:09:33.755 --> 00:09:35.470 Now if I remove that, 00:09:35.470 --> 00:09:38.800 I believe it actually defaults to a linear layout. 00:09:38.800 --> 00:09:42.320 But I wanted to add the item spacing to it 00:09:42.320 --> 00:09:45.905 which is why I declared it so that I could add this nice spacing. 00:09:45.905 --> 00:09:48.755 Now, something else that you can do is 00:09:48.755 --> 00:09:51.785 it can do horizontal orientation, 00:09:51.785 --> 00:09:54.230 and the crowd goes wild. 00:09:54.230 --> 00:09:57.230 Of course, now my design starts to 00:09:57.230 --> 00:10:01.090 look a little funky so let's clean this up a little bit. 00:10:01.190 --> 00:10:06.245 We'll give the columns a width so that they spread out a bit, 00:10:06.245 --> 00:10:10.295 that didn't really do all the magic that I wanted but we're okay. 00:10:10.295 --> 00:10:13.280 So let's look at a couple of other layouts. 00:10:13.280 --> 00:10:18.410 So in addition to a linear layout we also have a grid layout. 00:10:18.410 --> 00:10:21.290 Then within the grid layout I can 00:10:21.290 --> 00:10:24.110 declare how many grid items I want to have. 00:10:24.110 --> 00:10:26.425 So I'm going to start with two, 00:10:26.425 --> 00:10:31.310 and let's see, orientation I'll go ahead and stay with vertical. 00:10:31.310 --> 00:10:35.975 I believe I have both vertical spacing 00:10:35.975 --> 00:10:41.580 and horizontal spacing. Very nice. 00:10:41.580 --> 00:10:45.880 Save that. All right, 00:10:45.880 --> 00:10:48.520 we're looking a bit better. Let's see here. 00:10:48.520 --> 00:10:51.660 I think I want to make this a little bit wider. 00:10:51.660 --> 00:10:53.500 I bet you if I comment that 00:10:53.500 --> 00:10:55.465 back out that'll make it a little bit better. 00:10:55.465 --> 00:10:59.900 But let's do this, let's go to a horizontal. 00:10:59.900 --> 00:11:03.150 Let me look at a couple of other looks here. 00:11:03.150 --> 00:11:07.065 So of course what I'm doing now is this is all hot reload. 00:11:07.065 --> 00:11:11.850 XAML Hot Reload which is in Visual Studio 00:11:11.850 --> 00:11:14.490 2019 16.3 which ships today 00:11:14.490 --> 00:11:18.075 as well as Visual Studio for Mac 8.3 shipping today. 00:11:18.075 --> 00:11:19.890 So you can go experience this. 00:11:19.890 --> 00:11:22.890 Make sure you go to your preferences tools options or 00:11:22.890 --> 00:11:27.090 final preferences and go turn on the XAML Hot Reload option. 00:11:27.090 --> 00:11:30.525 Make sure that you're also using Xamarin.Forms 4.1 or newer. 00:11:30.525 --> 00:11:31.500 Of course, you're going to want to 00:11:31.500 --> 00:11:32.820 experience all of this goodness, 00:11:32.820 --> 00:11:36.060 so you already be on 4.3.0-pre2. 00:11:36.060 --> 00:11:39.675 So that'll be no problem for you. 00:11:39.675 --> 00:11:43.320 Let's do a few more things here. 00:11:43.320 --> 00:11:46.215 So I am inside my data template and I'm just 00:11:46.215 --> 00:11:48.330 manipulating things inside the data template to see 00:11:48.330 --> 00:11:51.330 what all I could possibly do here with this 00:11:51.330 --> 00:11:55.065 and you'll notice that I am getting horizontal scrolling here. 00:11:55.065 --> 00:11:57.210 Let's see. Let me fix this. 00:11:57.210 --> 00:11:59.670 How did I have that layout before? 00:11:59.670 --> 00:12:03.130 So I've got a row and a row. 00:12:03.470 --> 00:12:05.910 Vertical and bottom. 00:12:05.910 --> 00:12:07.470 So I just need to make my row 00:12:07.470 --> 00:12:11.850 taller and get a little more space 00:12:11.850 --> 00:12:14.920 there so that my label is at the bottom. 00:12:15.250 --> 00:12:18.200 Here we go. So that's looking a bit better. 00:12:18.200 --> 00:12:20.495 Then if I do this, 00:12:20.495 --> 00:12:22.595 I want to show you what it looks like. 00:12:22.595 --> 00:12:25.970 I created this cool color converter 00:12:25.970 --> 00:12:29.375 to spice things up and bring some color to the picture here. 00:12:29.375 --> 00:12:33.285 So let's uncomment this puppy. 00:12:33.285 --> 00:12:38.400 So what this is is I'm just binding to the current weather temp. 00:12:38.400 --> 00:12:40.290 So based on what the temperature is, 00:12:40.290 --> 00:12:43.080 we're going to have a color that represents that temperature. 00:12:43.080 --> 00:12:44.670 Then I have a little convertor here, 00:12:44.670 --> 00:12:47.265 temp to color converter, no big deal. 00:12:47.265 --> 00:12:50.400 At this point it's not doing the fancy math which would 00:12:50.400 --> 00:12:53.490 be awesome to do with the hexadecimal colors, 00:12:53.490 --> 00:12:56.895 it's just using a big old Honking switch statement. 00:12:56.895 --> 00:12:59.520 Gets the job done. That's the kind of developer I am. 00:12:59.520 --> 00:13:02.355 I am definitely in the get the job done camp. 00:13:02.355 --> 00:13:05.370 Then we save this, and now, you see we're starting to get 00:13:05.370 --> 00:13:10.890 some pretty sweet colors and you can do a lot of things with this. 00:13:10.890 --> 00:13:13.035 Of course, it supports commanding, 00:13:13.035 --> 00:13:16.875 supports pull to refresh and actually, 00:13:16.875 --> 00:13:19.350 I've seen this come up in some of 00:13:19.350 --> 00:13:22.515 our CollectionView and other challenges, 00:13:22.515 --> 00:13:25.410 is where's the pull to refresh and eat a pull to refresh? 00:13:25.410 --> 00:13:28.140 Well, refresh is a reusable control 00:13:28.140 --> 00:13:30.390 so it's actually its own thing. 00:13:30.390 --> 00:13:32.130 So you would set it up like 00:13:32.130 --> 00:13:37.560 this and then up here on the RefreshView, 00:13:37.560 --> 00:13:40.785 you can tell it what your command is. 00:13:40.785 --> 00:13:44.040 I'm not sure that I have a refresh command but let's check it out. 00:13:44.040 --> 00:13:46.155 Yeah, I do have a reload command. 00:13:46.155 --> 00:13:48.555 So now if I save this, 00:13:48.555 --> 00:13:51.540 we're in dangerous territory I've never actually tested this. 00:13:51.540 --> 00:13:54.045 Yeah, see I totally gifted up. 00:13:54.045 --> 00:13:57.360 There's the RefreshView though. Here you go. 00:13:57.360 --> 00:14:06.820 Probably need to make that bigger. That's what it is. 00:14:06.860 --> 00:14:12.330 Do this, uncomment that puppy, 00:14:12.330 --> 00:14:16.180 make this thing like a 100. 00:14:16.610 --> 00:14:21.525 We're in good shape. So refresh view is pretty awesome. 00:14:21.525 --> 00:14:22.890 So that's it for the demos. 00:14:22.890 --> 00:14:24.900 I've got a ton of slides to get through and 00:14:24.900 --> 00:14:27.855 how much time do I have left? I need a hustle. 00:14:27.855 --> 00:14:30.210 There's just so many good things to celebrate. 00:14:30.210 --> 00:14:33.675 So we'll go ahead and kill that puppy. Let's get on over here. 00:14:33.675 --> 00:14:36.420 So I wanted to recap some of the announcements from the morning 00:14:36.420 --> 00:14:39.345 in case you missed it or just in case you needed a reminder. 00:14:39.345 --> 00:14:43.020 Here are the links for XAML Hot Reload as well as 00:14:43.020 --> 00:14:44.730 the Hot Restart that we 00:14:44.730 --> 00:14:47.055 announced a private preview of this morning. 00:14:47.055 --> 00:14:51.330 I have used the Hot Restart and it is pretty magical. 00:14:51.330 --> 00:14:53.070 It's going to blow your mind. 00:14:53.070 --> 00:14:54.810 Now, it is a private preview so it's 00:14:54.810 --> 00:14:56.580 very early bits, and things will 00:14:56.580 --> 00:14:58.440 continue to mature at a very nice pace. 00:14:58.440 --> 00:15:00.015 Same thing with Hot Reload. 00:15:00.015 --> 00:15:03.675 Very nice to see these productivity things improving quickly. 00:15:03.675 --> 00:15:07.320 Then for the latest SDKs we have iOS 13 is out, 00:15:07.320 --> 00:15:09.465 Xamarin Android 10 is out, 00:15:09.465 --> 00:15:12.795 as well as Xamarin Forms 4.3.0-pre2. 00:15:12.795 --> 00:15:16.815 So all those good things for you to go play with today. 00:15:16.815 --> 00:15:22.210 I should probably make my slides full screen. I can do this. 00:15:22.490 --> 00:15:27.240 So let's dig into a few other things after I give a quick plug. 00:15:27.240 --> 00:15:28.620 Come on you can do it. 00:15:28.620 --> 00:15:31.060 Presenter mode. 00:15:33.320 --> 00:15:37.860 We have quite a few other awesome sessions coming up. 00:15:37.860 --> 00:15:40.590 These right here. Take a picture of that. 00:15:40.590 --> 00:15:42.000 Take a screenshot of that. 00:15:42.000 --> 00:15:43.935 Excellent sessions coming up. 00:15:43.935 --> 00:15:45.570 They will go deeper into a lot of 00:15:45.570 --> 00:15:47.910 the things that I'm skirting over the top of. 00:15:47.910 --> 00:15:49.350 So if you want to know more about 00:15:49.350 --> 00:15:50.970 especially those productivity tools, 00:15:50.970 --> 00:15:52.965 Maddy Leger session on day 3. 00:15:52.965 --> 00:15:54.480 All these sessions are going to be amazing, 00:15:54.480 --> 00:15:55.800 Jon Douglas, they're all 00:15:55.800 --> 00:15:57.720 going to be amazing so check them all out. 00:15:57.720 --> 00:15:59.670 Beautiful UI. Let me show you 00:15:59.670 --> 00:16:01.695 some things that are just pretty mind-blowing. 00:16:01.695 --> 00:16:04.200 So I've got to give a huge shout out here to 00:16:04.200 --> 00:16:07.380 former Xamarin University instructor and 00:16:07.380 --> 00:16:11.225 current MS learn awesome guy, 00:16:11.225 --> 00:16:13.945 Kym Phillpotts down in Australia. 00:16:13.945 --> 00:16:16.500 On every Friday, he does a twitch stream where he 00:16:16.500 --> 00:16:19.590 takes a different design from dribble and creates 00:16:19.590 --> 00:16:21.780 these gorgeous things in 00:16:21.780 --> 00:16:23.400 just a few hours using 00:16:23.400 --> 00:16:24.750 just Xamarin Forms and 00:16:24.750 --> 00:16:26.550 the community of plug-ins that are available. 00:16:26.550 --> 00:16:29.130 So this is a trend I'm sitting across 00:16:29.130 --> 00:16:30.870 the Xamarin community that people are 00:16:30.870 --> 00:16:32.670 creating just amazing things. 00:16:32.670 --> 00:16:35.460 This is the maturity of the platform and where we've gotten to. 00:16:35.460 --> 00:16:37.110 It's just awesome. 00:16:37.110 --> 00:16:39.390 So how does Xamarin deliver this awesome? 00:16:39.390 --> 00:16:44.340 Here's a quick recap for anyone that might be new to Xamarin. 00:16:44.340 --> 00:16:47.580 This is all.NET. We create bindings to 00:16:47.580 --> 00:16:51.750 the iOS Android and any other.NET framework for the runtimes. 00:16:51.750 --> 00:16:53.820 We have shared Native UI which is 00:16:53.820 --> 00:16:57.690 the Xamarin Forms layer as well as SkiaSharp 00:16:57.690 --> 00:16:59.760 and different things like that that can share 00:16:59.760 --> 00:17:03.735 the same UI across platforms and then all the shared logic. 00:17:03.735 --> 00:17:07.650 So you get a 100 percent access to native APIs, native experience. 00:17:07.650 --> 00:17:10.200 You can be sharing tons of code depending on how you 00:17:10.200 --> 00:17:12.885 architect your application all with.NET. 00:17:12.885 --> 00:17:14.970 It's an awesome promise. 00:17:14.970 --> 00:17:17.370 Again, we love to celebrate this every 00:17:17.370 --> 00:17:19.950 year but iOS 13 just shipped. 00:17:19.950 --> 00:17:21.690 Matter of fact, I believe there was another 00:17:21.690 --> 00:17:23.850 released late Friday from 00:17:23.850 --> 00:17:26.040 Apple and our iOS team is doing 00:17:26.040 --> 00:17:29.220 an amazing job supporting that so that on day 1, 00:17:29.220 --> 00:17:31.590 customers such as seeing AI as 00:17:31.590 --> 00:17:33.900 you see here in the tweet can be utilizing 00:17:33.900 --> 00:17:37.035 dark mode and all the other iOS 13 features 00:17:37.035 --> 00:17:39.630 for access to the store on day one. 00:17:39.630 --> 00:17:41.280 That's a proud tradition we have. 00:17:41.280 --> 00:17:44.115 We're excited to be able to support our customers in doing that, 00:17:44.115 --> 00:17:46.380 and I know of several other customers that I've 00:17:46.380 --> 00:17:48.720 worked with directly to help make sure that 00:17:48.720 --> 00:17:51.524 their apps for their high profile 00:17:51.524 --> 00:17:55.575 very important needs are there on day one. 00:17:55.575 --> 00:17:58.950 So the platform itself is maturing growing. 00:17:58.950 --> 00:18:01.320 We've got all these controls and so many more. 00:18:01.320 --> 00:18:03.900 There is a swipe view that's about to be merged. 00:18:03.900 --> 00:18:05.730 We've got camera views coming, 00:18:05.730 --> 00:18:07.575 we've got media elements coming, 00:18:07.575 --> 00:18:09.840 we've got radio buttons coming, 00:18:09.840 --> 00:18:12.510 but we've recently added also the image button, 00:18:12.510 --> 00:18:15.105 the checkbox, the carousel view, collection view. 00:18:15.105 --> 00:18:18.885 It's fantastic and it's not us saying, 00:18:18.885 --> 00:18:20.460 "Oh, we've got to ship feature, feature, feature, 00:18:20.460 --> 00:18:22.560 feature," it's us listening closely to 00:18:22.560 --> 00:18:25.080 you about what you need from the platform to be 00:18:25.080 --> 00:18:28.170 successful building your apps and that is what's driving 00:18:28.170 --> 00:18:29.730 us in delivering these things 00:18:29.730 --> 00:18:31.545 to the point where you're telling us, 00:18:31.545 --> 00:18:32.640 "Oh, it's very rare." 00:18:32.640 --> 00:18:34.650 I have to create something custom on my own. 00:18:34.650 --> 00:18:37.740 I just pull what's already shipped in the box and use that. 00:18:37.740 --> 00:18:39.435 So that's fantastic. 00:18:39.435 --> 00:18:45.555 Then the great ecosystem of vendor providers. 00:18:45.555 --> 00:18:50.250 Then the third party ecosystem of you basically in 00:18:50.250 --> 00:18:53.235 the community shipping things that are useful to you to help 00:18:53.235 --> 00:18:56.490 others is a huge tremendous help. 00:18:56.490 --> 00:18:58.155 Some really cool stuff on here, 00:18:58.155 --> 00:18:59.910 and the icon start to make you hungry 00:18:59.910 --> 00:19:01.950 when you start seeing stacks of pancakes. 00:19:01.950 --> 00:19:06.480 I know that James in his demo showed off the pancake view. 00:19:06.480 --> 00:19:07.860 It's in this code as well. 00:19:07.860 --> 00:19:09.240 It's just awesome. 00:19:09.240 --> 00:19:13.410 Of course, all the wonderful enterprises companies that 00:19:13.410 --> 00:19:18.210 bank on.NET and Xamarin and have great success with it. 00:19:18.210 --> 00:19:21.270 So I want to give a big shout out to our contributors. 00:19:21.270 --> 00:19:23.340 Last year at this time, actually, 00:19:23.340 --> 00:19:25.290 this is a slide from my presentation last year. 00:19:25.290 --> 00:19:27.930 We celebrated all the Xamarin Forms contributors. 00:19:27.930 --> 00:19:29.460 I'm here to say that we've 00:19:29.460 --> 00:19:31.530 expanded that and we are going to be sending 00:19:31.530 --> 00:19:35.310 out wonderful gifts to all of the Xamarin contributors from Docs, 00:19:35.310 --> 00:19:37.380 to essentials, to iOS and Android, 00:19:37.380 --> 00:19:41.010 to Forms, SkiaSharp, all the things that we maintain. 00:19:41.010 --> 00:19:43.320 We really appreciate your collaboration with us, 00:19:43.320 --> 00:19:44.550 bringing us your ideas, 00:19:44.550 --> 00:19:46.410 as well as your help and your love. 00:19:46.410 --> 00:19:47.835 So look forward to that. 00:19:47.835 --> 00:19:50.460 I will be shooting out a request for e-mails. 00:19:50.460 --> 00:19:53.580 Then I wanted to highlight a few things from the community. 00:19:53.580 --> 00:19:55.440 This was in February, 00:19:55.440 --> 00:19:57.885 a ton of awesome blog posts from you. 00:19:57.885 --> 00:19:59.185 I had nothing to do with this. 00:19:59.185 --> 00:20:00.380 We had nothing to do with this. 00:20:00.380 --> 00:20:02.810 This is the community that is just rising up with 00:20:02.810 --> 00:20:05.675 excitement about what you can do today with Xamarin Forms. 00:20:05.675 --> 00:20:07.234 And then in July, 00:20:07.234 --> 00:20:08.930 we have the Xamarin UI July 00:20:08.930 --> 00:20:10.925 another community led thing and you can 00:20:10.925 --> 00:20:14.690 see these screens are just gorgeous. I'm drooling here. 00:20:14.690 --> 00:20:17.110 It's crazy good. 00:20:17.110 --> 00:20:19.230 I wanted to give a shout out to 00:20:19.230 --> 00:20:20.790 all of those who started streaming. 00:20:20.790 --> 00:20:22.500 I remember when James Montemagno 00:20:22.500 --> 00:20:24.390 and Jeff Fritz were the only streamers out there 00:20:24.390 --> 00:20:28.230 doing anything.NET and here we are it's just growing, 00:20:28.230 --> 00:20:30.180 it's exploding, it's very cool. 00:20:30.180 --> 00:20:33.870 Check out this link. I got a list of those that I was aware of. 00:20:33.870 --> 00:20:36.390 If there are more, let me know. 00:20:36.390 --> 00:20:39.780 I have just a few more things to highlight for you from 00:20:39.780 --> 00:20:41.190 Xamarin.Forms that I've already 00:20:41.190 --> 00:20:43.575 mentioned so I'll just touch on them briefly. 00:20:43.575 --> 00:20:48.270 Shell. The easiest way today to be starting off your applications, 00:20:48.270 --> 00:20:50.490 you don't necessarily need to migrate your existing stuff, 00:20:50.490 --> 00:20:52.530 but for for new applications this is 00:20:52.530 --> 00:20:55.735 a great quickstart for you that's extremely flexible. 00:20:55.735 --> 00:20:59.810 You can see just how simple the code is to do a flyout menu, 00:20:59.810 --> 00:21:01.819 to do the bottom tabs, 00:21:01.819 --> 00:21:05.510 and then of course to do top tabs if your app needs that as well. 00:21:05.510 --> 00:21:09.305 Very little code, very explicit about what it is that you want. 00:21:09.305 --> 00:21:11.460 Then that navigation service that I mentioned, 00:21:11.460 --> 00:21:14.415 when you want to go from a list page to a detail page, 00:21:14.415 --> 00:21:16.470 now it's as simple as using 00:21:16.470 --> 00:21:19.440 that global navigation service that's available everywhere. 00:21:19.440 --> 00:21:21.405 You don't have to worry about it not being there 00:21:21.405 --> 00:21:23.850 and you can even pass in query string parameters. 00:21:23.850 --> 00:21:26.310 So you pass in that city ID and 00:21:26.310 --> 00:21:28.995 then on the receipting page, the detail page, 00:21:28.995 --> 00:21:32.820 you attribute the query property to make sure that that is 00:21:32.820 --> 00:21:34.620 applied to the public property of 00:21:34.620 --> 00:21:35.880 your binding contexts whether that's 00:21:35.880 --> 00:21:37.605 the view model or the page itself. 00:21:37.605 --> 00:21:40.065 So very easy to use. 00:21:40.065 --> 00:21:42.810 I didn't mention this much today but Visual. 00:21:42.810 --> 00:21:44.085 If your goal is to have 00:21:44.085 --> 00:21:46.320 the same look and feel between iOS and Android, 00:21:46.320 --> 00:21:48.345 Visual is a great start for you. 00:21:48.345 --> 00:21:50.610 Material design components ship with all of 00:21:50.610 --> 00:21:52.065 these components out of the box 00:21:52.065 --> 00:21:54.655 so that you don't have to spend time tweaking. 00:21:54.655 --> 00:22:00.110 Then of course, I 00:22:00.110 --> 00:22:02.990 showed you-all these wonderful things coming from CollectionView. 00:22:02.990 --> 00:22:04.900 I would love to see what you're working on. 00:22:04.900 --> 00:22:06.590 Then right now we're actually 00:22:06.590 --> 00:22:08.390 running a carousel view challenge and 00:22:08.390 --> 00:22:11.840 these are some of the actual contributions from the community, 00:22:11.840 --> 00:22:13.880 from you that what you're able to 00:22:13.880 --> 00:22:16.600 do with the current CollectionView or the CarouselView. 00:22:16.600 --> 00:22:19.310 Pardon. So this is still open. 00:22:19.310 --> 00:22:21.050 There is swag on the line. 00:22:21.050 --> 00:22:22.745 You could be getting that monkey. 00:22:22.745 --> 00:22:24.230 I don't think it'll help you type very 00:22:24.230 --> 00:22:26.300 quickly but it'll look great on the mantle, 00:22:26.300 --> 00:22:29.450 and you can make sure that your children don't steal that monkey. 00:22:29.450 --> 00:22:31.040 So please enter that, 00:22:31.040 --> 00:22:34.120 it expires end of the day Wednesday. 00:22:34.120 --> 00:22:37.010 You can check the blog for all the details 00:22:37.010 --> 00:22:39.875 on that if you just go to the dev blog Xamarin. 00:22:39.875 --> 00:22:45.810 With that, I sped through to the end for questions.