WEBVTT 00:00:00.000 --> 00:00:02.715 >> Hello everyone. I'm Olia. 00:00:02.715 --> 00:00:05.310 I'm Program Manager on.NET Team. 00:00:05.310 --> 00:00:08.355 Super excited to be a part of this event. 00:00:08.355 --> 00:00:10.980 I will be with you guys all day today 00:00:10.980 --> 00:00:14.610 introducing speakers and running questions with James. 00:00:14.610 --> 00:00:18.930 We just heard an amazing keynote, very inspiring. 00:00:18.930 --> 00:00:21.585 Now, I'm super excited to introduce 00:00:21.585 --> 00:00:24.720 our next speakers, Javier and Gerald. 00:00:24.720 --> 00:00:29.230 They will talk on visualizing your data. 00:00:29.390 --> 00:00:32.340 >> Hello. Yes, here we are. 00:00:32.340 --> 00:00:33.790 >> Hello. 00:00:34.070 --> 00:00:37.640 >> Thank you so much. So let 00:00:37.640 --> 00:00:40.580 me just go in directly and share my screen. 00:00:40.580 --> 00:00:44.330 Here we go, and getting this session started. 00:00:44.330 --> 00:00:47.105 So yeah, like already mentioned, 00:00:47.105 --> 00:00:50.060 we're going to talk about today visualizing your data, 00:00:50.060 --> 00:00:51.965 so we're going to talk about CollectionView, 00:00:51.965 --> 00:00:54.725 CarouselView, a couple of other more things. 00:00:54.725 --> 00:00:57.110 I think, David and Maddy 00:00:57.110 --> 00:01:00.290 already shared some of the goodness that we're going to show. 00:01:00.290 --> 00:01:02.720 But we'll do our best to give you a little bit more 00:01:02.720 --> 00:01:05.375 of a deep dive and show you what 00:01:05.375 --> 00:01:08.000 is actually possible with all these awesome controls 00:01:08.000 --> 00:01:11.195 that are in Xamarin Forms available today. 00:01:11.195 --> 00:01:13.055 So this is us, 00:01:13.055 --> 00:01:17.080 then at least you'll know who you'll be listening to. 00:01:17.080 --> 00:01:22.085 My name is Gerald Versluis from the Netherlands, 00:01:22.085 --> 00:01:23.840 and my good friend Javier, 00:01:23.840 --> 00:01:28.280 we are both part of the Xamarin Forms Team, Software Engineers. 00:01:28.280 --> 00:01:31.070 So yeah, we are creating some of the stuff 00:01:31.070 --> 00:01:34.490 that you, hopefully, enjoy using. 00:01:34.490 --> 00:01:37.280 Today, we're going to talk about these things basically. 00:01:37.280 --> 00:01:39.245 We have a lot to cover. 00:01:39.245 --> 00:01:42.620 So we're going to have a lot of different demos combining 00:01:42.620 --> 00:01:46.495 all these awesome controls and features. So try to keep up. 00:01:46.495 --> 00:01:47.690 If you have any questions, 00:01:47.690 --> 00:01:49.340 please reach out to any of us, 00:01:49.340 --> 00:01:51.470 we're happy to answer any questions. 00:01:51.470 --> 00:01:53.810 Javier and I will switch a couple of times. 00:01:53.810 --> 00:01:55.430 So if you see your screen 00:01:55.430 --> 00:01:57.470 flickering or anything else funny going on, 00:01:57.470 --> 00:01:58.940 don't worry, it's all us, 00:01:58.940 --> 00:02:01.775 it's not you. Let's get started. 00:02:01.775 --> 00:02:04.475 I'm going to talk a little bit about the CollectionView first, 00:02:04.475 --> 00:02:07.025 and Javier will take over. 00:02:07.025 --> 00:02:10.250 Yeah, like I said, we'll switch over a couple of times. 00:02:10.250 --> 00:02:13.055 So whenever you hear a beautiful Spanish accent, 00:02:13.055 --> 00:02:15.180 then Javier took over. 00:02:16.660 --> 00:02:19.265 Let's start with the CollectionView. 00:02:19.265 --> 00:02:20.960 CollectionView is basically 00:02:20.960 --> 00:02:23.285 the spiritual successor of the ListView. 00:02:23.285 --> 00:02:29.155 The ListView we all know or you know and love, we've all used it. 00:02:29.155 --> 00:02:31.970 But yeah, you can love it, you can hate it. 00:02:31.970 --> 00:02:35.105 The fact is we needed in basically all of our apps. 00:02:35.105 --> 00:02:36.830 We need to show data in our apps, 00:02:36.830 --> 00:02:38.960 that's basically the fundamental of 00:02:38.960 --> 00:02:42.290 every application that you're using. 00:02:42.290 --> 00:02:45.230 But yeah, there has been some things with 00:02:45.230 --> 00:02:47.990 ListView that could be improved. 00:02:47.990 --> 00:02:50.615 So that's why we came up with the latest view. 00:02:50.615 --> 00:02:52.940 We've taken all the learnings from 00:02:52.940 --> 00:02:56.390 the ListView and put it in to this new control, 00:02:56.390 --> 00:03:01.730 and you can use this to show all data in different layouts. 00:03:01.730 --> 00:03:03.320 You have more flexibility, 00:03:03.320 --> 00:03:06.545 and most of all it's more performing than ever before. 00:03:06.545 --> 00:03:11.045 So you can see down here a little sample, 00:03:11.045 --> 00:03:13.500 where you can define the CollectionView. 00:03:13.500 --> 00:03:15.680 This all works of course in XAML and 00:03:15.680 --> 00:03:19.580 encode just like you're used to from Xamarin Forms. 00:03:19.580 --> 00:03:23.150 You can specify your item source just like on the ListView. 00:03:23.150 --> 00:03:26.480 But now, you can also specify the items layout. 00:03:26.480 --> 00:03:27.500 So you can specify, 00:03:27.500 --> 00:03:29.900 do you want it vertical or horizontal, 00:03:29.900 --> 00:03:33.710 and you can also say do you maybe want to have it in a grid. 00:03:33.710 --> 00:03:35.990 So yeah, there's already 00:03:35.990 --> 00:03:39.020 some flexibility that you can see happening in right here. 00:03:39.020 --> 00:03:41.180 This is all the things that you can 00:03:41.180 --> 00:03:44.060 use today out of the box with CollectionView. 00:03:44.060 --> 00:03:45.470 So if we have data bindings, 00:03:45.470 --> 00:03:47.480 then you can use data templates, 00:03:47.480 --> 00:03:49.670 templates selectors of course. 00:03:49.670 --> 00:03:51.275 You can use the different layouts. 00:03:51.275 --> 00:03:55.175 On the right here, you can see the grid layout for example. 00:03:55.175 --> 00:03:57.170 You can use item selection, 00:03:57.170 --> 00:03:59.630 so you can click on one item in 00:03:59.630 --> 00:04:03.840 the CollectionView and do your magic on that. 00:04:03.840 --> 00:04:06.290 You can drill down to a detailed view from there. 00:04:06.290 --> 00:04:07.715 We have the empty view. 00:04:07.715 --> 00:04:09.875 So whenever you might mix this with 00:04:09.875 --> 00:04:13.370 a search bar and there's no results for your search action, 00:04:13.370 --> 00:04:16.400 you can pop up this empty view without a sweat. 00:04:16.400 --> 00:04:20.840 You don't need to swap out any views in your own visual tree. 00:04:20.840 --> 00:04:23.510 You can just do that directly from the CollectionView. 00:04:23.510 --> 00:04:25.715 We also have improved the scrolling. 00:04:25.715 --> 00:04:28.430 So you now have an event with lots of information. 00:04:28.430 --> 00:04:30.920 You can determine how fast someone is scrolling, 00:04:30.920 --> 00:04:32.390 which way they're scrolling, 00:04:32.390 --> 00:04:34.865 and we'll also have to scroll to method. 00:04:34.865 --> 00:04:36.770 So you can easily scroll to 00:04:36.770 --> 00:04:38.900 a certain point in your CollectionView. 00:04:38.900 --> 00:04:42.530 This is just a few things that we have implemented in 00:04:42.530 --> 00:04:46.730 this amazing new control that is Xamarin Forms right now. 00:04:46.730 --> 00:04:51.695 So let's just quickly jump into Visual Studio and show some demos. 00:04:51.695 --> 00:04:55.450 Hopefully, there we go. 00:04:55.450 --> 00:04:57.530 So here we have Visual Studio for Mac. 00:04:57.530 --> 00:04:59.750 If you have not seen it before, 00:04:59.750 --> 00:05:03.155 you can just use Visual Studio on a Mac right now. 00:05:03.155 --> 00:05:06.140 Let's just first go into some visual demo. 00:05:06.140 --> 00:05:09.505 So I have the iOS emulator open right here. 00:05:09.505 --> 00:05:12.575 Javier and I have created a little sample app. 00:05:12.575 --> 00:05:17.330 Now, mind you, this demos are taken from our gallery app, 00:05:17.330 --> 00:05:19.430 which is part of the Xamarin Forms repository, 00:05:19.430 --> 00:05:21.350 where we run all our tests on. 00:05:21.350 --> 00:05:25.160 So it might not necessarily be a beautiful app, 00:05:25.160 --> 00:05:27.350 but it's functional, and we have 00:05:27.350 --> 00:05:30.290 some more beautiful samples to show you. 00:05:30.290 --> 00:05:33.620 You can style this any way you want at the end of this session. 00:05:33.620 --> 00:05:37.160 So don't be confused if it doesn't look totally amazing, 00:05:37.160 --> 00:05:39.920 but focus on what's functionally happening here. 00:05:39.920 --> 00:05:42.320 So we basically took the agenda, 00:05:42.320 --> 00:05:43.490 and here's all the different things, 00:05:43.490 --> 00:05:44.630 we have the CollectionView, 00:05:44.630 --> 00:05:48.185 the CarouselView, IndicatorView and all the things. 00:05:48.185 --> 00:05:51.445 But let's go with the CollectionView right now. 00:05:51.445 --> 00:05:55.845 Like I mentioned, you can just go with 00:05:55.845 --> 00:05:59.600 a collection of strings we have right here. 00:05:59.600 --> 00:06:01.310 This is it. 00:06:01.310 --> 00:06:03.110 This is just a collection of strings. 00:06:03.110 --> 00:06:05.840 You hook that up to the item source and boom, 00:06:05.840 --> 00:06:08.505 you have a CollectionView with strings. 00:06:08.505 --> 00:06:10.490 As you can see, this is also 00:06:10.490 --> 00:06:13.130 with the selection capabilities enabled. 00:06:13.130 --> 00:06:15.560 So you can select items right here, 00:06:15.560 --> 00:06:17.630 and based on the selected event or 00:06:17.630 --> 00:06:19.865 the command that you hook up to this, 00:06:19.865 --> 00:06:23.160 you could go to the next screen from here. 00:06:23.360 --> 00:06:26.990 As you can see, there's a lot of stuff in here, 00:06:26.990 --> 00:06:30.005 so you probably want to check this out for yourself. 00:06:30.005 --> 00:06:32.944 All the functionalities are 00:06:32.944 --> 00:06:35.630 listed and you can have a play with this. 00:06:35.630 --> 00:06:38.990 So the most of these things will also have different variance in 00:06:38.990 --> 00:06:42.800 code in maybe XAML and horizontal, vertical. 00:06:42.800 --> 00:06:45.845 Like I said, this is also used to run our tests on. 00:06:45.845 --> 00:06:47.660 So there's a lot of stuff in here. 00:06:47.660 --> 00:06:49.220 The other thing that I want to show you 00:06:49.220 --> 00:06:51.590 here that this combines a couple of the things that 00:06:51.590 --> 00:06:55.265 I talked before is the data template selector. 00:06:55.265 --> 00:06:59.765 So this template selects whenever it's a weekday. 00:06:59.765 --> 00:07:02.780 It uses a template for a plus for some reason. 00:07:02.780 --> 00:07:07.400 Whenever it's weekend, we see this other icon here. 00:07:07.400 --> 00:07:10.490 So this is repeated for a couple of times. 00:07:10.490 --> 00:07:12.140 But you can easily filter this. 00:07:12.140 --> 00:07:14.660 So if I just go for Monday, 00:07:14.660 --> 00:07:16.580 discovery isn't really optimized, 00:07:16.580 --> 00:07:17.970 so this takes a little bit, 00:07:17.970 --> 00:07:19.670 and I should press "Enter", 00:07:19.670 --> 00:07:21.320 you will see all the Mondays. 00:07:21.320 --> 00:07:24.200 If we search for something that is not in here, 00:07:24.200 --> 00:07:26.870 so a Monday day, you can see this is 00:07:26.870 --> 00:07:29.720 the empty view because we don't have any search results here. 00:07:29.720 --> 00:07:31.715 So it will pop up the empty view, 00:07:31.715 --> 00:07:35.180 and this is just what you'll get out of the box 00:07:35.180 --> 00:07:40.210 whenever your collection doesn't have any items in there. 00:07:40.210 --> 00:07:43.170 So what do we have more? Of course this all 00:07:43.170 --> 00:07:45.844 works with observable collections. 00:07:45.844 --> 00:07:48.800 So you can just take this and you can see 00:07:48.800 --> 00:07:52.490 here we have a couple of controls here at the top. 00:07:52.490 --> 00:07:54.380 We also have headers and footers. 00:07:54.380 --> 00:07:57.410 I think Javier will show you a little about that. 00:07:57.410 --> 00:07:59.630 But here we have items, 00:07:59.630 --> 00:08:02.210 and because it's an observable collection, 00:08:02.210 --> 00:08:05.300 you can observe any changes that will happen in this collection. 00:08:05.300 --> 00:08:07.580 So we can remove a couple of here, 00:08:07.580 --> 00:08:10.700 and you see that it updates automatically. 00:08:10.700 --> 00:08:13.970 Whenever we want to insert a couple of things, 00:08:13.970 --> 00:08:16.550 it will be here inserted at the top. 00:08:16.550 --> 00:08:19.070 I can also specify a different index to 00:08:19.070 --> 00:08:22.160 insert it in a different position if I want to. 00:08:22.160 --> 00:08:26.705 So yeah, and I can also move a couple of these things around. 00:08:26.705 --> 00:08:32.085 So you see this just works instantly. 00:08:32.085 --> 00:08:33.780 Very performant, it looks good, 00:08:33.780 --> 00:08:37.870 it has this fade animation. It looks amazing. 00:08:38.820 --> 00:08:41.650 So what do we have more? We have snap points. 00:08:41.650 --> 00:08:43.510 That's also something we've introduced. 00:08:43.510 --> 00:08:45.310 So if you've never seen it before, 00:08:45.310 --> 00:08:47.930 let's take a vertical list this time. 00:08:48.030 --> 00:08:51.310 Snap points basically mean that whenever you scroll, 00:08:51.310 --> 00:08:52.690 I mean, now, it doesn't do anything. 00:08:52.690 --> 00:08:53.800 But whenever we select 00:08:53.800 --> 00:08:57.670 a snap point here and we set it to mandatory, 00:08:57.670 --> 00:09:00.520 then you see whenever I scroll here and I set it to something, 00:09:00.520 --> 00:09:04.150 it snaps to get a certain item and you can 00:09:04.150 --> 00:09:08.275 influence that behavior by setting here the start or the center. 00:09:08.275 --> 00:09:10.240 So whenever I set it to center, 00:09:10.240 --> 00:09:11.755 it will center an item. 00:09:11.755 --> 00:09:14.740 So right now, you see two items here, 00:09:14.740 --> 00:09:16.015 but now I start scrolling, 00:09:16.015 --> 00:09:19.600 and whenever I don't have an item in the center here, 00:09:19.600 --> 00:09:24.430 it will make sure that it snaps to a center item right here. 00:09:24.430 --> 00:09:26.530 So this will look beautiful in your designs, 00:09:26.530 --> 00:09:28.390 and you can make it work anyway you want. 00:09:28.390 --> 00:09:30.940 You can configure a couple 00:09:30.940 --> 00:09:33.730 of things here to make it work with your design. 00:09:33.730 --> 00:09:35.500 So what do we have more? 00:09:35.500 --> 00:09:37.915 We also have to scroll too, I already mentioned. 00:09:37.915 --> 00:09:40.480 Again, multiple options here to choose from. 00:09:40.480 --> 00:09:43.060 Let's just pick one and we can say, "Okay, 00:09:43.060 --> 00:09:46.570 scroll to index, so we have a number of items here again," 00:09:46.570 --> 00:09:51.175 like I mentioned, not necessarily very pretty but it works. 00:09:51.175 --> 00:09:54.235 So if I say scroll to index and I say 10, 00:09:54.235 --> 00:09:56.065 which is not in view right here, 00:09:56.065 --> 00:09:57.385 and I do this, 00:09:57.385 --> 00:09:59.845 then it will make sure that it scrolls to 10. 00:09:59.845 --> 00:10:02.470 Because I set the scroll to position to make visible, 00:10:02.470 --> 00:10:03.670 it will just make it visible. 00:10:03.670 --> 00:10:05.065 So it will be at the end now. 00:10:05.065 --> 00:10:07.900 But I can also configure this to be at the start center or end. 00:10:07.900 --> 00:10:11.275 So if I set this to be at the start and I press "Go" again, 00:10:11.275 --> 00:10:14.900 it will make sure that this item is presented at the start. 00:10:17.130 --> 00:10:19.450 What do I have more? 00:10:19.450 --> 00:10:22.090 [inaudible] , we're going to see that later on. 00:10:22.090 --> 00:10:23.620 Empty view, we've already seen that 00:10:23.620 --> 00:10:25.510 a little bit and selection as well. 00:10:25.510 --> 00:10:28.015 But let's just quickly dive into this one. 00:10:28.015 --> 00:10:29.980 We have multiple selection modes. 00:10:29.980 --> 00:10:33.550 So you can have single or multiple selections here or none, 00:10:33.550 --> 00:10:35.320 which is also a possibility. 00:10:35.320 --> 00:10:37.600 So right now, I can select anything. 00:10:37.600 --> 00:10:39.580 But when I set it to single, 00:10:39.580 --> 00:10:41.320 then you can select one of the options here. 00:10:41.320 --> 00:10:43.990 You can see that also works in the grid layout, 00:10:43.990 --> 00:10:49.240 and you can see here all the info coming in from the event. 00:10:49.240 --> 00:10:51.520 We can also do multiple. 00:10:51.520 --> 00:10:56.860 So right now, you see that I have a selection of multiples. 00:10:56.860 --> 00:10:59.230 I would go into the code right here, 00:10:59.230 --> 00:11:02.380 but I see that I'm taking up some time already, 00:11:02.380 --> 00:11:06.400 so I think I'll just hand it off to Javier right now and Javier 00:11:06.400 --> 00:11:10.360 can then show a little bit of code and dive into that. 00:11:10.360 --> 00:11:12.475 So Javier, take it away. 00:11:12.475 --> 00:11:16.630 >> I will try. So let's continue with more staff 00:11:16.630 --> 00:11:19.330 about collection view because in 00:11:19.330 --> 00:11:22.405 fact we have a crazy amount of samples. 00:11:22.405 --> 00:11:28.900 So I don't know exactly where you do you leave the sample. 00:11:28.900 --> 00:11:31.390 Let me execute, in this case, 00:11:31.390 --> 00:11:35.720 using android, anything that you use with iOS. So let's see. 00:11:39.360 --> 00:11:42.760 >> I'll just talk while you get this running. 00:11:42.760 --> 00:11:44.980 I knew you were going to show Android. 00:11:44.980 --> 00:11:46.825 I mean, it's all Xamarin Forms. 00:11:46.825 --> 00:11:49.165 So whatever we implemented, 00:11:49.165 --> 00:11:52.600 you can do this on Android whenever the emulator works and you 00:11:52.600 --> 00:11:56.365 can do it on iOS and it will both show similar results. 00:11:56.365 --> 00:12:02.350 So yes, that's why I chose to do it on iOS. 00:12:02.350 --> 00:12:07.000 >> So I feel that I have a problem with the simulator. 00:12:07.000 --> 00:12:10.150 I don't know why it's not working. Anything? 00:12:10.150 --> 00:12:12.895 >> All right. You want me to just continue? 00:12:12.895 --> 00:12:16.120 >> Yes. Please continue with the demo. 00:12:16.120 --> 00:12:17.230 >> All right. 00:12:17.230 --> 00:12:20.245 >> I made a mistake and I prepare 00:12:20.245 --> 00:12:21.925 all of the demos, 00:12:21.925 --> 00:12:23.815 like one hour ago, 00:12:23.815 --> 00:12:28.555 I feel that maybe it wasn't the best idea. 00:12:28.555 --> 00:12:33.955 >> No way. I'll just fill the time. 00:12:33.955 --> 00:12:35.305 Let me know whenever you are ready. 00:12:35.305 --> 00:12:38.845 So let's see. 00:12:38.845 --> 00:12:40.420 Here we go. Sorry for the 00:12:40.420 --> 00:12:42.370 flashing screens and everything, here we go. 00:12:42.370 --> 00:12:44.530 Let's just see whatever we have more here. 00:12:44.530 --> 00:12:49.555 So what you can do more with collection view, we have selection. 00:12:49.555 --> 00:12:51.220 You can also do grouping. 00:12:51.220 --> 00:12:54.250 So that's also something that you might know from the list view. 00:12:54.250 --> 00:12:56.815 So here we have some grouping 00:12:56.815 --> 00:13:00.550 and I see we have some superheroes in here. 00:13:00.550 --> 00:13:04.270 This has a header and a footer per group. 00:13:04.270 --> 00:13:08.215 So here we have the Avengers with all the members there 00:13:08.215 --> 00:13:10.480 and the Fantastic Four and the defenders 00:13:10.480 --> 00:13:13.135 and all kinds of other superheros. 00:13:13.135 --> 00:13:16.200 They are mostly grouped in a group, 00:13:16.200 --> 00:13:19.350 as you would expect, which is also something that you could do. 00:13:19.350 --> 00:13:20.835 I think we're working 00:13:20.835 --> 00:13:24.120 on actually snapping this group headers here, 00:13:24.120 --> 00:13:27.330 so that something that's still coming. 00:13:27.330 --> 00:13:28.860 But at least you have 00:13:28.860 --> 00:13:31.350 the possibility to do these groups right now. 00:13:31.350 --> 00:13:34.005 You can also do this without any templates, 00:13:34.005 --> 00:13:37.990 so then it doesn't look that good. 00:13:37.990 --> 00:13:40.150 Javier, you have it up and running again because 00:13:40.150 --> 00:13:42.310 I'm just swimming here. 00:13:42.310 --> 00:13:45.080 I'll just go to Item spacing. 00:13:45.420 --> 00:13:48.250 Which is also something that you can do. 00:13:48.250 --> 00:13:51.820 So let's use it with a grid, that's always good. 00:13:51.820 --> 00:13:54.460 Here you can specify 00:13:54.460 --> 00:13:57.610 how much space there should be between the different items. 00:13:57.610 --> 00:14:02.470 So if I just start playing here and I say 10 and update spacing, 00:14:02.470 --> 00:14:04.750 you can see that between the columns, 00:14:04.750 --> 00:14:07.230 there will be 10 spacing. 00:14:07.230 --> 00:14:13.260 I can also do this between the rows because this is a grid view. 00:14:13.260 --> 00:14:16.775 So whenever I do that, 00:14:16.775 --> 00:14:19.510 then you should also see the spacing here. 00:14:19.510 --> 00:14:21.310 So that's something that will also give you 00:14:21.310 --> 00:14:23.230 more control over how things 00:14:23.230 --> 00:14:29.030 look and to make it work with your design better. 00:14:30.000 --> 00:14:33.520 All right. You got it? 00:14:33.520 --> 00:14:34.600 >> I can continue if you want. 00:14:34.600 --> 00:14:36.680 >> Okay. Yeah. 00:14:42.270 --> 00:14:46.810 >> Let me swap the screen. 00:14:46.810 --> 00:14:48.850 You talked about, I think, 00:14:48.850 --> 00:14:52.585 spacing and then we can continue talking about all the stuffs, 00:14:52.585 --> 00:14:54.430 like the item size. 00:14:54.430 --> 00:14:57.370 There are different options here but I 00:14:57.370 --> 00:15:00.310 want to talk about the item inside this strategy, 00:15:00.310 --> 00:15:04.120 sub property, where you can use different values. 00:15:04.120 --> 00:15:07.630 There are a value that this is first item. 00:15:07.630 --> 00:15:11.290 This means that we will calculate the size of the first item, 00:15:11.290 --> 00:15:15.310 and we will use the same size for all the cells. 00:15:15.310 --> 00:15:18.025 But of course, there are 00:15:18.025 --> 00:15:22.015 options to calculate the size of all the different size, 00:15:22.015 --> 00:15:25.165 as you can see in this specific sample, 00:15:25.165 --> 00:15:28.840 all of the sales of different size. 00:15:28.840 --> 00:15:30.400 So what's the difference? 00:15:30.400 --> 00:15:33.820 The difference in this case is about performance. 00:15:33.820 --> 00:15:36.985 If all your cells have a certain distance size, 00:15:36.985 --> 00:15:41.080 just calculate, onetime is something interesting. 00:15:41.080 --> 00:15:43.930 Then of course, we have talked before. 00:15:43.930 --> 00:15:45.760 We have option to set 00:15:45.760 --> 00:15:48.265 the header and the footer of the collection view. 00:15:48.265 --> 00:15:53.740 We can use simple streams but we can also use 00:15:53.740 --> 00:15:57.640 templates and we can 00:15:57.640 --> 00:16:01.495 directly chain the visibility of the header and, 00:16:01.495 --> 00:16:04.190 of course, from the footer. 00:16:05.790 --> 00:16:10.675 The last one, and I think that this is just demo, 00:16:10.675 --> 00:16:12.850 well, [inaudible] look very, very nice, 00:16:12.850 --> 00:16:13.975 but this is amazing. 00:16:13.975 --> 00:16:17.545 Take a look at this amazing performance. 00:16:17.545 --> 00:16:19.990 I want to stop a little bit in 00:16:19.990 --> 00:16:22.900 the sample because what we are seeing here is 00:16:22.900 --> 00:16:26.560 a nested CollectionView and that 00:16:26.560 --> 00:16:29.860 means that every thing that 00:16:29.860 --> 00:16:33.220 we were seeing before was user CollectionView, 00:16:33.220 --> 00:16:36.955 where every item is another CollectionView. 00:16:36.955 --> 00:16:39.550 So we are nesting all these CollectionViews to create 00:16:39.550 --> 00:16:44.260 this layout where probably you have seen. 00:16:44.260 --> 00:16:47.500 For example, multimedia application, streaming application, 00:16:47.500 --> 00:16:49.720 and is very simple to create, 00:16:49.720 --> 00:16:53.425 and, yeah, it works very nice. 00:16:53.425 --> 00:16:58.060 I think, that we can continue focus on CollectionView, 00:16:58.060 --> 00:17:01.570 but let's jump to another control. 00:17:01.570 --> 00:17:06.775 In this case, CarouselView is another very nice control. 00:17:06.775 --> 00:17:10.720 One of the very nice points that is 00:17:10.720 --> 00:17:14.515 sharing a lot of code with the CollectionView, 00:17:14.515 --> 00:17:17.530 and by default, we get a lot of functionality 00:17:17.530 --> 00:17:20.755 from the CollectionView working in the CarouselView. 00:17:20.755 --> 00:17:24.730 But let's get some time 00:17:24.730 --> 00:17:29.965 with Gerald talking about the CarouselView with more details. 00:17:29.965 --> 00:17:32.545 >> Well, you told everything already. 00:17:32.545 --> 00:17:36.430 Let's see. Let's jump into the CarouselView. 00:17:36.430 --> 00:17:37.960 So like Javier already mentioned, 00:17:37.960 --> 00:17:41.050 it is built on top basically of the CollectionView. 00:17:41.050 --> 00:17:45.280 So the CarouselView is 00:17:45.280 --> 00:17:47.334 basically the thing that you probably 00:17:47.334 --> 00:17:50.530 know from the web and other popular apps. 00:17:50.530 --> 00:17:53.815 So most of the time they just show a horizontal list which 00:17:53.815 --> 00:17:57.295 slides tiles or that stuff. 00:17:57.295 --> 00:17:59.050 So think Netflix, I mean, 00:17:59.050 --> 00:18:03.265 we're all working from home now so we all know Netflix by now. 00:18:03.265 --> 00:18:05.725 You have these rows where you have 00:18:05.725 --> 00:18:07.510 all this CarouselViews where you can just 00:18:07.510 --> 00:18:10.060 scroll through all your series and movies, 00:18:10.060 --> 00:18:14.260 and each tile is a series or movie. 00:18:14.260 --> 00:18:19.150 So that's basically all CarouselViews right there. 00:18:19.150 --> 00:18:21.220 That's what we implemented here as well. 00:18:21.220 --> 00:18:24.040 You can see a little sample here at the bottom. 00:18:24.040 --> 00:18:27.625 So it's basically just a specialized view of 00:18:27.625 --> 00:18:32.680 the CollectionView that has a very specific use case. 00:18:32.680 --> 00:18:34.780 So you can use that to show 00:18:34.780 --> 00:18:37.555 your data in a visually very appealing way. 00:18:37.555 --> 00:18:41.410 It's very popular in today's modern apps. 00:18:41.410 --> 00:18:44.965 It's more suitable for limited length data. 00:18:44.965 --> 00:18:47.230 It doesn't mean that performance is 00:18:47.230 --> 00:18:49.810 something that will not work for this control, 00:18:49.810 --> 00:18:53.515 but it's just more suited for yet a limited number 00:18:53.515 --> 00:18:55.360 of items in your collection 00:18:55.360 --> 00:18:57.880 that you want your users to scroll through. 00:18:57.880 --> 00:19:01.810 You can use a lot of things that are also in the CollectionView. 00:19:01.810 --> 00:19:03.520 So you can also use orientation, 00:19:03.520 --> 00:19:05.620 you can also use layout if you want to. 00:19:05.620 --> 00:19:08.575 Data templates will be big for this control as well. 00:19:08.575 --> 00:19:10.600 It works perfectly together with 00:19:10.600 --> 00:19:13.795 IndicatorView that we will see a little bit later on. 00:19:13.795 --> 00:19:16.450 This control is in preview right now. 00:19:16.450 --> 00:19:18.445 So if you want to use this today, 00:19:18.445 --> 00:19:22.990 you can, but you need to enable it with the experimental flag. 00:19:22.990 --> 00:19:26.110 So you'll see this in a couple of 00:19:26.110 --> 00:19:30.040 slides more for other controls that are in preview as well. 00:19:30.040 --> 00:19:33.520 Then just remember that we're still working on it. 00:19:33.520 --> 00:19:34.840 Some things may change, 00:19:34.840 --> 00:19:37.960 but yeah, most of the stuff should just work. 00:19:37.960 --> 00:19:41.635 So let's quickly go and do a little demo of that as well. 00:19:41.635 --> 00:19:44.390 This should work. 00:19:45.480 --> 00:19:49.375 Again, I'll just pop in to this demo app here. 00:19:49.375 --> 00:19:51.610 Here we have the CarouselView. 00:19:51.610 --> 00:19:52.750 So this big button, 00:19:52.750 --> 00:19:55.045 don't forget to press that because 00:19:55.045 --> 00:19:58.255 that enables the actual experimental flag. 00:19:58.255 --> 00:19:59.770 Here we have a couple of options. 00:19:59.770 --> 00:20:01.225 So we can do this in code, 00:20:01.225 --> 00:20:03.340 horizontal or vertical, and we have 00:20:03.340 --> 00:20:05.860 some snap and also an empty view that kind of stuff. 00:20:05.860 --> 00:20:09.280 So let's just see if we can get this. 00:20:09.280 --> 00:20:12.070 Here you can see so we have five items. 00:20:12.070 --> 00:20:15.070 I can easily update this to 50 and I should have 00:20:15.070 --> 00:20:18.265 a lot of more Carousel items here. 00:20:18.265 --> 00:20:20.740 So we have a little scroll bar here. 00:20:20.740 --> 00:20:22.960 So you can see we have a lot of items and you 00:20:22.960 --> 00:20:25.180 can see a lot of things going on here when I'm scrolling. 00:20:25.180 --> 00:20:27.835 So this fires the scrolling event 00:20:27.835 --> 00:20:30.025 so you can see which item is visible, 00:20:30.025 --> 00:20:31.270 the first one, the last one, 00:20:31.270 --> 00:20:33.040 also the Delta and the offset. 00:20:33.040 --> 00:20:35.200 So that's what I talked about before. 00:20:35.200 --> 00:20:38.365 A lot of data coming in from that scrolling event. 00:20:38.365 --> 00:20:41.110 Also, here the spacing is just something you 00:20:41.110 --> 00:20:43.615 can use so you'll get a little bit more spacing, 00:20:43.615 --> 00:20:45.310 10 is not that much, 00:20:45.310 --> 00:20:46.690 100 is a bit much, 00:20:46.690 --> 00:20:51.235 but you get the idea so you can play with that. 00:20:51.235 --> 00:20:57.085 Also, you have something that we call PeekAreaInsets, I think. 00:20:57.085 --> 00:21:00.640 So you can see this little items here to the left and 00:21:00.640 --> 00:21:02.215 the right and you can 00:21:02.215 --> 00:21:04.660 determine how much of that item you will see. 00:21:04.660 --> 00:21:08.575 So it looks a bit funny whenever you change this while running, 00:21:08.575 --> 00:21:11.440 but you can see that you can tease a little bit 00:21:11.440 --> 00:21:14.740 of the item that is previously or next. 00:21:14.740 --> 00:21:16.540 You can also see it's dragging. 00:21:16.540 --> 00:21:20.680 So that's mostly to see if the user is dragging yes or no, 00:21:20.680 --> 00:21:23.890 and we have some other properties like can we animate this? 00:21:23.890 --> 00:21:25.210 Can we swipe this? 00:21:25.210 --> 00:21:27.549 The bounce. So basically, 00:21:27.549 --> 00:21:29.890 whenever you reach the beginning or the end of the list, 00:21:29.890 --> 00:21:33.950 does it bounce like this or does it just stand still? 00:21:34.710 --> 00:21:37.075 Of course, also here, 00:21:37.075 --> 00:21:39.445 the go-to thing so you can go to 00:21:39.445 --> 00:21:44.240 a certain item in this CarouselView. 00:21:46.080 --> 00:21:49.270 So also here, I see I have a tab 00:21:49.270 --> 00:21:51.850 open for the snap. Yeah, sorry? 00:21:51.850 --> 00:21:54.490 >> Under scrolls, if you 00:21:54.490 --> 00:21:57.715 go back very quickly to the list of samples, 00:21:57.715 --> 00:22:00.475 you centering the vertical CarouselView, 00:22:00.475 --> 00:22:05.590 to notice that it's more common to have horizontal CarouselView. 00:22:05.590 --> 00:22:09.715 But of course, you can create vertical ones without problems. 00:22:09.715 --> 00:22:13.750 >> Yeah, no problem. Although, here we 00:22:13.750 --> 00:22:15.700 have the snapping mechanism so 00:22:15.700 --> 00:22:18.355 this doesn't have any snapping at all. 00:22:18.355 --> 00:22:20.260 Sorry, it does have snapping. 00:22:20.260 --> 00:22:23.020 So I should just slow this down and you'll see it. 00:22:23.020 --> 00:22:26.020 So whenever I don't land on one specific item, 00:22:26.020 --> 00:22:30.070 it will make sure that it will go to the start right here. 00:22:30.070 --> 00:22:33.550 But I think I had a little code open for this right here. 00:22:33.550 --> 00:22:35.530 So for all these things 00:22:35.530 --> 00:22:37.660 we've made it as easy as possible for you to use. 00:22:37.660 --> 00:22:39.280 So here, you can just say, 00:22:39.280 --> 00:22:41.095 make a new CarouselView. 00:22:41.095 --> 00:22:43.270 You can specify which layout to use. 00:22:43.270 --> 00:22:45.520 We have some predefined for you. 00:22:45.520 --> 00:22:49.690 You might be able to create your own layouts right now. 00:22:49.690 --> 00:22:54.020 Javier, do you know? Or maybe we will enable that in the future. 00:22:54.210 --> 00:22:56.890 You can use the itemTemplates, 00:22:56.890 --> 00:22:59.230 the background color or the PeekAreaInsets, 00:22:59.230 --> 00:23:02.510 I already mentioned that. 00:23:02.790 --> 00:23:07.000 This is basically all you need to do to set up a new CarouselView 00:23:07.000 --> 00:23:11.390 and use all this discrete features right here. 00:23:14.340 --> 00:23:16.465 So IndicatorView, yeah, 00:23:16.465 --> 00:23:18.580 that's something that is tightly coupled with 00:23:18.580 --> 00:23:21.055 the CarouselView as I already mentioned. 00:23:21.055 --> 00:23:24.775 So if you have the CarouselView, 00:23:24.775 --> 00:23:26.710 you might also know that a lot of 00:23:26.710 --> 00:23:29.410 these controls have this little dots at 00:23:29.410 --> 00:23:31.840 the bottom which shows 00:23:31.840 --> 00:23:35.680 you how many items there are in the actual CarouselView, 00:23:35.680 --> 00:23:39.010 but also, which index currently you selected. 00:23:39.010 --> 00:23:41.860 So that's what we want to do with the IndicatorView. 00:23:41.860 --> 00:23:44.200 Again, also in preview, 00:23:44.200 --> 00:23:48.625 here you see a little bit of code of how to use that. 00:23:48.625 --> 00:23:52.435 We have the options to of course do some layout with that, 00:23:52.435 --> 00:23:54.339 how do you want to center it horizontally, 00:23:54.339 --> 00:23:58.510 vertically, but also what color do you want to indicate it to be. 00:23:58.510 --> 00:24:00.760 What color should the selected indicator 00:24:00.760 --> 00:24:04.030 be and what shape do you want to use. 00:24:04.030 --> 00:24:08.155 So you can see here a little sample, 00:24:08.155 --> 00:24:11.080 on this slide right here, the color, 00:24:11.080 --> 00:24:12.310 I've already mentioned that, 00:24:12.310 --> 00:24:14.290 the shape, but you can also use a template. 00:24:14.290 --> 00:24:19.180 So you can also give your own template for the indicator, 00:24:19.180 --> 00:24:20.920 and of course you can give it a size, 00:24:20.920 --> 00:24:23.305 so you can make it bigger or smaller. 00:24:23.305 --> 00:24:26.860 So let's quickly jump into that as well. 00:24:26.860 --> 00:24:29.270 We have a lot of demos. 00:24:30.530 --> 00:24:35.325 So my mouse pointer sometimes disappears when I switch. 00:24:35.325 --> 00:24:39.540 Here we go. So here we have the IndicatorView. 00:24:39.540 --> 00:24:41.550 Again, don't forget to enable it. 00:24:41.550 --> 00:24:43.290 This is a very straightforward gallery. 00:24:43.290 --> 00:24:46.020 We just have one. On iOS, 00:24:46.020 --> 00:24:48.270 we forget to use the save area things here. 00:24:48.270 --> 00:24:50.400 So it's a little bit down the bottom here, 00:24:50.400 --> 00:24:52.740 but you can see, whenever I go to the next one, 00:24:52.740 --> 00:24:56.255 you can see the selected one pops over to the next one, 00:24:56.255 --> 00:24:59.440 and this all works nicely with the CarouselView. 00:24:59.440 --> 00:25:04.000 We can set this to blue if you want to, 00:25:04.000 --> 00:25:06.505 and you can see it's still black. 00:25:06.505 --> 00:25:08.500 You can play with the size here a little bit, 00:25:08.500 --> 00:25:11.050 so you can make it bigger or tiny, 00:25:11.050 --> 00:25:15.370 and you can also just pop it over to 00:25:15.370 --> 00:25:17.380 square or we can make 00:25:17.380 --> 00:25:20.815 a little Xbox logo out of it by using the templates. 00:25:20.815 --> 00:25:25.195 This only works on Android I see. 00:25:25.195 --> 00:25:27.535 Because this is probably using an icon font, 00:25:27.535 --> 00:25:31.510 Javier, which is not added to use. 00:25:31.510 --> 00:25:33.730 >> But just remember that we keyed by 00:25:33.730 --> 00:25:37.450 default the circle and the rectangle 00:25:37.450 --> 00:25:41.590 because are probably the most common indicator views 00:25:41.590 --> 00:25:43.795 using in general applications, 00:25:43.795 --> 00:25:47.200 common application, but with the indicator template, 00:25:47.200 --> 00:25:49.990 you can use another template and set 00:25:49.990 --> 00:25:54.219 any kind of content inside every indicator. 00:25:54.219 --> 00:25:58.000 >> Yep. So I quickly switched over to Android and here you can 00:25:58.000 --> 00:26:01.180 see we're using this the small thing 00:26:01.180 --> 00:26:02.950 here to also show the template. 00:26:02.950 --> 00:26:07.885 So you can load everything into your indicators whatever you want. 00:26:07.885 --> 00:26:12.325 So again, this is very simple to just initialize. 00:26:12.325 --> 00:26:14.800 We have the CarouselView, 00:26:14.800 --> 00:26:17.395 you have the IndicatorView, 00:26:17.395 --> 00:26:20.245 and then you just say CarouselView.IndicatorView 00:26:20.245 --> 00:26:21.985 is this instance right here, 00:26:21.985 --> 00:26:23.290 and they will be linked together. 00:26:23.290 --> 00:26:24.340 It will automatically know 00:26:24.340 --> 00:26:27.340 how much items there are based on the item source. 00:26:27.340 --> 00:26:30.760 One last thing I want to note quickly is the IndicatorView 00:26:30.760 --> 00:26:33.850 is built as a separate control because in the future, 00:26:33.850 --> 00:26:36.025 we might open it up to other controls as well. 00:26:36.025 --> 00:26:38.830 Right now, you can use it for the CarouselView, 00:26:38.830 --> 00:26:41.155 but who knows what the future might bring? 00:26:41.155 --> 00:26:43.210 So this way we will have 00:26:43.210 --> 00:26:46.315 the flexibility to also use it for other controls. 00:26:46.315 --> 00:26:49.945 >> All right, Javier, you want to talk about RefreshView? 00:26:49.945 --> 00:26:51.610 >> Yes, actually. 00:26:51.610 --> 00:26:54.265 So let's continue with more controls. 00:26:54.265 --> 00:26:58.135 In this case, let's continue with the RefreshView. 00:26:58.135 --> 00:27:02.140 So especially in release, 00:27:02.140 --> 00:27:06.595 one of the common patterns in UX to refer to the data is the 00:27:06.595 --> 00:27:11.890 pull-to-refresh effect that you suggest to retrieve your data. 00:27:11.890 --> 00:27:13.630 Paulo what is this thing of stuff, 00:27:13.630 --> 00:27:16.615 we have included a new control called RefreshView, 00:27:16.615 --> 00:27:21.070 which you place like a wrapper in any scrollable content. 00:27:21.070 --> 00:27:23.800 That's the important thing because you 00:27:23.800 --> 00:27:28.640 only most refreshes scrollable content. 00:27:28.710 --> 00:27:30.955 To use, it's pretty easy. 00:27:30.955 --> 00:27:32.230 At the end, as we say, 00:27:32.230 --> 00:27:34.750 we block up any control. 00:27:34.750 --> 00:27:38.410 In this case, we are using a ListView around the RefreshView. 00:27:38.410 --> 00:27:40.960 The two main properties stays for refreshing. 00:27:40.960 --> 00:27:42.205 That is how is a Boolean, 00:27:42.205 --> 00:27:45.250 that of course we can bind and 00:27:45.250 --> 00:27:49.300 use using MVPA and all the stuff that probably love. 00:27:49.300 --> 00:27:52.225 We can use also a command to 00:27:52.225 --> 00:27:55.735 indicate and execute the logic to refresh the list. 00:27:55.735 --> 00:27:58.225 Of course, there are also options related 00:27:58.225 --> 00:28:00.310 with customization of the control. 00:28:00.310 --> 00:28:05.005 So you can customize what's the color of refresh indicator, 00:28:05.005 --> 00:28:08.425 what's the color of the background of the RefreshView. 00:28:08.425 --> 00:28:11.819 All this stuff, that again, 00:28:11.819 --> 00:28:15.300 we are going to see with a quick demo. 00:28:15.300 --> 00:28:20.230 So I move to the previous sample. 00:28:25.530 --> 00:28:31.850 I don't know why I'm losing that touch sometimes. 00:28:33.150 --> 00:28:37.104 It's crazy. I don't know if this is with the presentation, 00:28:37.104 --> 00:28:43.210 but you can see in this simulator, the rest is working. 00:28:43.210 --> 00:28:47.180 >> Work with the emulator boots really quickly these days, right? 00:28:48.600 --> 00:28:51.400 >> Now it's working. I don't know. 00:28:51.400 --> 00:28:54.295 Whatever. In this case, 00:28:54.295 --> 00:28:56.965 we have many samples, but at the end, 00:28:56.965 --> 00:28:58.450 the important thing is that you 00:28:58.450 --> 00:29:00.265 can use with any scrollable content, 00:29:00.265 --> 00:29:03.190 and that means that of course you can 00:29:03.190 --> 00:29:08.080 refresh any content that is using the ScrollView. 00:29:08.080 --> 00:29:10.975 Of course, you can use ListView, CollectionView, 00:29:10.975 --> 00:29:16.300 and CarouselView to trigger the pull-to-refresh. 00:29:16.300 --> 00:29:18.910 You can use it, of course, 00:29:18.910 --> 00:29:22.030 with the adjuster and also we 00:29:22.030 --> 00:29:25.330 can directly invoke the command to, for example, 00:29:25.330 --> 00:29:28.420 pressing a button, show 00:29:28.420 --> 00:29:32.305 IndicatorViews and RefreshView in the same way. 00:29:32.305 --> 00:29:34.480 Of course, it also worked with 00:29:34.480 --> 00:29:38.590 other kind of controls like WebView. 00:29:38.590 --> 00:29:43.015 Now, I think that this is loading the Xamarin block, 00:29:43.015 --> 00:29:47.210 and we can pull to refresh it. 00:29:47.730 --> 00:29:51.280 One interesting point is that, 00:29:51.280 --> 00:29:54.160 in many of the controls that we're showing today, 00:29:54.160 --> 00:29:56.439 we are some platform specific. 00:29:56.439 --> 00:29:59.800 Remember that our logic is specific to some platform. 00:29:59.800 --> 00:30:01.420 In this case, in Windows, 00:30:01.420 --> 00:30:03.400 you can set this white detection. 00:30:03.400 --> 00:30:05.500 You can swipe from the top, 00:30:05.500 --> 00:30:07.465 the bottom, the left, or the right. 00:30:07.465 --> 00:30:08.575 In the other platforms, 00:30:08.575 --> 00:30:11.515 it only work from the top by default. 00:30:11.515 --> 00:30:13.240 The code is very simple. 00:30:13.240 --> 00:30:20.720 Let's me just jump for sample to re-use with ListView. 00:30:27.210 --> 00:30:29.740 So here we are, 00:30:29.740 --> 00:30:33.400 the ListView, of course, binded to our list of items, 00:30:33.400 --> 00:30:35.290 and we are using the RefreshView. 00:30:35.290 --> 00:30:37.240 To customize the control, we are using 00:30:37.240 --> 00:30:39.400 the RefreshColor and BackgroundColor properties, 00:30:39.400 --> 00:30:42.100 but again, the most important properties are 00:30:42.100 --> 00:30:45.610 the refreshing property and the command. 00:30:45.610 --> 00:30:48.490 With the button that we execute the Refresh, 00:30:48.490 --> 00:30:51.070 but the only thing that we are doing is execute the same 00:30:51.070 --> 00:30:55.400 command binded to the RefreshView command. 00:30:55.440 --> 00:30:59.860 Continuing with more controls because we 00:30:59.860 --> 00:31:03.985 have a bunch of demos and more stuff to review, 00:31:03.985 --> 00:31:06.025 let's see the SwipeView. 00:31:06.025 --> 00:31:08.500 In the same way that we have seen before, 00:31:08.500 --> 00:31:11.320 the RefreshView that allow to do 00:31:11.320 --> 00:31:14.740 the pull-to-refresh gesture without 00:31:14.740 --> 00:31:17.650 be associated with any specific control. 00:31:17.650 --> 00:31:18.790 As we have seen before, 00:31:18.790 --> 00:31:21.025 it works with any [inaudible] content. 00:31:21.025 --> 00:31:27.385 Now, we have an option in a list of items, for example, 00:31:27.385 --> 00:31:34.975 access to execute a specific action in one of the items. 00:31:34.975 --> 00:31:38.725 For that we are allowing a swipe 00:31:38.725 --> 00:31:42.790 commanding without needing to change the state of the app. 00:31:42.790 --> 00:31:45.295 To do that we introduce the SwipeView, 00:31:45.295 --> 00:31:49.135 the SwipeView allow us to swipe in any direction, 00:31:49.135 --> 00:31:51.745 we can use as well swipe up, down, 00:31:51.745 --> 00:31:53.395 from left, and from right, 00:31:53.395 --> 00:31:54.970 and we have different modes. 00:31:54.970 --> 00:31:56.200 Let me explain very quickly 00:31:56.200 --> 00:31:59.350 the two different modes because they are very, very different. 00:31:59.350 --> 00:32:03.055 We have in one hand the Reveal mode, 00:32:03.055 --> 00:32:07.300 in this mode we swipe to open the SwipeView. 00:32:07.300 --> 00:32:09.340 We will see the different commands, 00:32:09.340 --> 00:32:13.540 and to execute that command we need to explicitly tap one of them. 00:32:13.540 --> 00:32:17.425 In the Execute mode it's totally different, 00:32:17.425 --> 00:32:19.240 we only need to swipe, 00:32:19.240 --> 00:32:22.510 and if we pass the swipe threshold 00:32:22.510 --> 00:32:27.190 the command associated with every item, 00:32:27.190 --> 00:32:28.990 with every command will be executed, 00:32:28.990 --> 00:32:33.490 and if not just the SwipeView will be closed. 00:32:33.490 --> 00:32:35.949 As other previous controls, 00:32:35.949 --> 00:32:38.740 this control is still in preview 00:32:38.740 --> 00:32:45.930 and this needs the use of the experimental flag. 00:32:45.930 --> 00:32:52.330 So here we have basic demo using the SwipeView. 00:32:52.330 --> 00:32:55.045 Of course, what we are seeing here is 00:32:55.045 --> 00:32:58.690 the Swipe content that can be any kind of content. 00:32:58.690 --> 00:33:02.455 We are here where we see basic layout with a level, 00:33:02.455 --> 00:33:05.290 and then the SwipeItem is 00:33:05.290 --> 00:33:08.755 a basic element that allows us to set a text, 00:33:08.755 --> 00:33:10.705 an icon, a background color, 00:33:10.705 --> 00:33:15.865 and then of course have commands and methods to be invoked. 00:33:15.865 --> 00:33:20.785 As you can see in the GIF that we will see later with a demo, 00:33:20.785 --> 00:33:23.740 you can swipe in any direction. 00:33:23.740 --> 00:33:27.535 We also have the BehaviorOnInvoked that is used, 00:33:27.535 --> 00:33:30.970 the behavior that will have the SwipeView when 00:33:30.970 --> 00:33:34.825 we press or tap in any of the commands. 00:33:34.825 --> 00:33:37.255 We have auto by default, 00:33:37.255 --> 00:33:40.855 that means that SwipeView by default will be closed. 00:33:40.855 --> 00:33:44.545 Of course, we can set this explicitly with the Close option, 00:33:44.545 --> 00:33:47.245 but there are another option that is RemainOpen, 00:33:47.245 --> 00:33:50.260 and with this option means that if we tap 00:33:50.260 --> 00:33:54.400 one of the commands the SwipeView will remain open. 00:33:54.400 --> 00:33:59.290 To execute and invoke any action it is easy using Commands, 00:33:59.290 --> 00:34:02.770 or in this case, the invoked method, 00:34:02.770 --> 00:34:05.260 and to use it in Collection is 00:34:05.260 --> 00:34:09.025 very similar to the use of RefreshView. 00:34:09.025 --> 00:34:10.870 We are using site, for example, 00:34:10.870 --> 00:34:16.780 the DataTemplate of ItemTemplate from a CollectionView to use and 00:34:16.780 --> 00:34:20.845 allow to have contextual options 00:34:20.845 --> 00:34:24.295 in every item from the collection. 00:34:24.295 --> 00:34:29.170 Last thing, we have seen SwipeItem before are 00:34:29.170 --> 00:34:31.644 very basic items allow 00:34:31.644 --> 00:34:34.480 to customize a little bit the background color, 00:34:34.480 --> 00:34:35.950 you can set the icon, 00:34:35.950 --> 00:34:37.000 you can set the text, 00:34:37.000 --> 00:34:42.655 but what if you want a custom content inside any of the items? 00:34:42.655 --> 00:34:45.280 Well, we introduce also another SwipeItem, 00:34:45.280 --> 00:34:49.975 I think [inaudible] SwipeItemView that allow any kind of view, 00:34:49.975 --> 00:34:52.285 so allow any kind of content inside here. 00:34:52.285 --> 00:34:58.525 So you can create a custom content inside any of the swipe items. 00:34:58.525 --> 00:35:03.200 Let's see a demo reviewing all this stuff. 00:35:03.840 --> 00:35:07.060 Let me move again to the emulator, 00:35:07.060 --> 00:35:10.100 let's see if continue working. 00:35:13.830 --> 00:35:19.720 So well, you can swipe in any direction, 00:35:19.720 --> 00:35:24.950 you can use it also in collections, 00:35:25.740 --> 00:35:31.435 well, let me move quickly to Custom SwipeView. 00:35:31.435 --> 00:35:34.420 This seems to be a content view, 00:35:34.420 --> 00:35:38.035 but if you swipe to any of the directions, 00:35:38.035 --> 00:35:41.800 you can access to more layouts, 00:35:41.800 --> 00:35:44.515 and at the end are SwipeItems. 00:35:44.515 --> 00:35:48.295 Gerald and I have some very 00:35:48.295 --> 00:35:52.675 nice and good-looking demos prepared using all this stuff. 00:35:52.675 --> 00:35:55.869 We have [inaudible] time to review everything, 00:35:55.869 --> 00:35:59.800 but let me move very quickly for all these demos, 00:35:59.800 --> 00:36:01.390 for example, in this one, 00:36:01.390 --> 00:36:03.610 Gerald if you want to talk very quickly about it. 00:36:03.610 --> 00:36:07.030 >> Yeah. So this one combines all the things. 00:36:07.030 --> 00:36:08.650 So on the top there you see 00:36:08.650 --> 00:36:12.280 a CarouselView with an IndicatorView right on top of it, 00:36:12.280 --> 00:36:15.370 and another CarouselView right down there. 00:36:15.370 --> 00:36:16.780 So you can see you can create 00:36:16.780 --> 00:36:19.330 beautiful designs with all of this together. 00:36:19.330 --> 00:36:23.065 At the bottom there you'll probably see a CollectionView. 00:36:23.065 --> 00:36:25.135 So yeah, I mean, 00:36:25.135 --> 00:36:30.265 don't let the functional design of our demo app get you off track. 00:36:30.265 --> 00:36:34.495 You can certainly create very awesome things with this. 00:36:34.495 --> 00:36:36.460 So Javier, you want to quickly show off 00:36:36.460 --> 00:36:43.240 your RefreshView Custom Animation Theater? 00:36:43.240 --> 00:36:45.010 >> Let's show it very quickly, 00:36:45.010 --> 00:36:48.820 so we can customize the colors of the RefreshView, 00:36:48.820 --> 00:36:50.020 but in this case, for example, 00:36:50.020 --> 00:36:51.610 what happens if you want to create 00:36:51.610 --> 00:36:54.610 a customized pull-to-refresh effect? 00:36:54.610 --> 00:36:57.370 Well, you can do it very simple. 00:36:57.370 --> 00:37:02.559 Again, what I'm doing here is just using the SwipeView, 00:37:02.559 --> 00:37:04.420 I'm using the top item to use 00:37:04.420 --> 00:37:06.640 a very beautiful Lottie animation 00:37:06.640 --> 00:37:10.465 that I only made based on the running time. 00:37:10.465 --> 00:37:13.420 So you can mix all these kind of 00:37:13.420 --> 00:37:16.540 controls and stuff to create very, 00:37:16.540 --> 00:37:19.130 very good looking UIs. 00:37:21.690 --> 00:37:26.110 We have more demos, but not much time. 00:37:26.110 --> 00:37:28.825 So we reach to the end. 00:37:28.825 --> 00:37:33.130 Let me share very quickly where you can find all these demos, 00:37:33.130 --> 00:37:37.420 and there are a lot of more demos and stuff that we have 00:37:37.420 --> 00:37:41.380 not shown because we have less time, 00:37:41.380 --> 00:37:46.090 that all these demos need to pass one by one. 00:37:46.090 --> 00:37:48.850 But you can find everything in these two links. 00:37:48.850 --> 00:37:51.190 Hopefully, it's helpful for you, 00:37:51.190 --> 00:37:55.009 and I don't know if we have questions. 00:37:55.890 --> 00:37:59.170 >> Yes, we have just one quick question 00:37:59.170 --> 00:38:01.885 before we hand over to the next speakers, 00:38:01.885 --> 00:38:05.770 and that is, is collection view 00:38:05.770 --> 00:38:10.460 have the lazy loading and infinite data feature? 00:38:11.910 --> 00:38:15.700 >> I think, I mean, 00:38:15.700 --> 00:38:18.370 you are able to implement it yourself. 00:38:18.370 --> 00:38:21.400 We could probably do more in that area 00:38:21.400 --> 00:38:24.670 to support you out of the box. 00:38:24.670 --> 00:38:26.800 But right now, you can do it with 00:38:26.800 --> 00:38:30.535 the SwipeEvents you can see which item is shown, 00:38:30.535 --> 00:38:33.610 and so you can start loading in new data. 00:38:33.610 --> 00:38:36.385 So yeah, that's definitely possible. 00:38:36.385 --> 00:38:37.180 >> Perfect. 00:38:37.180 --> 00:38:38.890 >> So by default the CollectionView have 00:38:38.890 --> 00:38:41.575 some commands to detect when you reach the end, 00:38:41.575 --> 00:38:43.810 and a lot more data, and all this stuff. 00:38:43.810 --> 00:38:46.300 So all this kind of stuff is possible. 00:38:46.300 --> 00:38:47.845 >> Much easier than with ListView. 00:38:47.845 --> 00:38:48.655 >> Yeah. 00:38:48.655 --> 00:38:51.850 >> Sounds great. All right. Thank you so much for your talk, 00:38:51.850 --> 00:38:54.805 and now, I hand it back to James. 00:38:54.805 --> 00:38:56.965 >> Awesome. Thank you so much, 00:38:56.965 --> 00:38:59.605 Olia, and Gerald, and Javier. 00:38:59.605 --> 00:39:02.560 Super awesome. I love all the amazing features that are happening. 00:39:02.560 --> 00:39:05.200 Now, I'm really excited because live from Italy, 00:39:05.200 --> 00:39:07.870 Codrina is here to talk to us about how we can 00:39:07.870 --> 00:39:10.630 actually test our Xamarin applications, 00:39:10.630 --> 00:39:12.700 our UI, and our source code. 00:39:12.700 --> 00:39:16.625 Codrina, I'm going to pop it over to you and take it away. 00:39:16.625 --> 00:39:19.560 >> Thank you, James. Hello everyone, 00:39:19.560 --> 00:39:24.105 and I'm going to share my screen, 00:39:24.105 --> 00:39:28.570 and I'll be ready to start.