Visual Studio Toolbox

What’s New in Xamarin.Forms

Rate this post
(Video Transcript)
[SOUND] Hi, welcome to Visual Studio Toolbox. I’m your host Robert Green and joining me today is James Montemagno, hey James.

>> Hey, how’s it going Robert?

>> We’re back in the cozy confines of Studio B.

>> So cozy.

>> I know you’re very excited.

>> I’m super excited.

>> The previous show we did that here.

>> Yeah. And coincidentally we’re wearing the same clothing.

>> Yeah who would have thunk?

>> As the previous one.

>> Yeah I like these clothes and I was like let’s just keep these on for the next recording.

>> Why not? [LAUGH] We’re gonna talk about today is what’s new in Xamarin forms.

>> Yes super excited. We’re talking about.

>> We’re doing a quick review of what Xamarin forms is and then what’s new. It’s really really interesting and very exciting technology.

>> And on some of the earlier episodes if you go back in the tool box, Robert James connection, this is tenth time that have been on. I don’t know if I’m still up there, number one. I’m hoping. But-

>> For a number of times on the show?

>> Yeah.

>> Behind me. Probably.

>> Behind you hopefully. And we had talked about what Xamarin is, how you get set up, and when you talk about Xamarin forms it’s like this big awesome library. We have .NET. On IOS and Android already with Xamarin.

>> Yeah.

>> This huge library of awesome. Xamarin Forms is a way of constructing IOS, Android, and Windows user interfaces from shared code with one XAML. One Xamarin forms XAML. And we made this because a lot of developers were coming to us and said it’s amazing I have access to every API in Xamarin with iOS and Android. I can create and finely tweak and tune every little bit of that user interface because I get all of the native controls I get all that goodness. You know what I’m building applications that are maybe doing a lot of crowd operations, just reading over data. Or I’m building applications that kind of look and feel the same. Or I’m not doing anything that requires me to do that finessing. I would love to create one user interface that’s still native. That’s the cool part. Xamarin is 100% native. We don’t draw anything or anything like that. It’s not cross compiled. It’s not interpreted it’s fully native. I wanna create one user interface and I want it to be native on each platform.

So if I have tabs, I want them to be tabs on the bottom on iOS, I want to be on top on Android and I want it to be in the correct spot on Windows 10. Or any version of Windows and I want to be able to fling through them I want them to work like they should and that’s what we created with Xamarin forms.

>> Yeah.

>> So it’s not for every application but it’s for a lot of them and I’ve created some really cool stuff that we’re going to show

>> That really I think pushes Xamarin forms. So I didn’t even take it to the limit. I’d say maybe 80 or 85% out there and you could do a lot with it. It’s very powerful. I’m super happy and it’s come a long way. Last time I was on they were like on one point something.

>> Yeah, it was clear that a want to release that had a lot of promise. It wasn’t quite as polished. And now we’re up to version 2.3 or something,

>> Yeah. Something like that it’s very cool we got a 2.0, last year. We’ve done a lot. So I want to go through some of the new features of what’s out there and this is cool because if you’re brand new we talked about we want to make sure that you know what the heck is the examiner forms? And how does it work how do I get started? But also if you’ve been doing examiner forms or maybe pick up some tips and tricks to bring you along for the ride.

>> Yeah and then you’re going to at least tell us about an upcoming feature which is really going to be cool.

>> Yes. We have a lot of cool upcoming feature some available today. Some coming to some ideas in the future. So let’s take a look at that too.

>> All right.

>> Cool.

>> Awesome. So just in floods.

>> Then you know Robert that I love slides. And if you’ve watched me on Visual Studio it’s a little box I love the slides. Right before this recording we cut it down to very minimal slides like always.

>> Slides.

>> I’m very happy, got to do it so let’s hop over.

>> You’re actually the only one, the only guest who automatically gets to do slides.

>> Slides.

>> We’ve done slides in the past. Right, you aren’t the only one that does it. But you’re the only one who has basically been grandfathered in, if you will. [LAUGH]

>> Now this course, you’re gonna start this line off with a beautiful photo of myself.

>> When was that taken?

>> That was taken in Hawaii on Big Island, up north, pretty adorable. And that was that this overlook up there, it was very beautiful, it was about a year ago that Heather and I went out there. And this is me and I like this side because it has my name, and then you can find me by Google or Binging my name and you’ll find me on Twitter or GitHub right there. Now, we talk about Xamarin.

>> Yes.

>> This is the traditional approach, shared back end, all that business logic, models, view model, SQL services, everything like that, Azure services. It’s all great. 100% API access up top. Building user interfaces with iOS storyboards, Android XML files. Now notice look at that Shared C# back end, and when I click this button, boom, it’s still there. Now we have the Xamarin.Forms you I layer on top. Now this is going to enable you to share more code, be more proficient, it’s 100% native. Because you still get access to those iOS and Android and Windows API’s. Furthermore, we get all these pages, layouts and controls that we can build in XAML or in code behind C#, and this is XAML form, we’re gonna talk a little bit more about that.

>> Right, it’s not necessarily the same XAML but on the other hand Silverlight XAML wasn’t the same as WPF XAML and Windows 8 XAML wasn’t exactly the same and Windows 10 XAML is, it’s pretty similar.

>> It’s pretty similar-ish.

>> So, new controls.

>> It’s sound 100% the same but if you know XAML you can learn it and if you haven’t learned XAML you’re gonna have to bite the bullet sometimes so.

>> You’re gonna love this.

>> This is a great time to start.

>> It’s a great time to start but we have the two-way data binding same binding the nice thing is that even though it’s our controls and our layouts. So we talk about this is what I need to know if I need to learn XAML and all this stuff and it’s an XML-based language, but just because we made it in XAML we have our controls in our properties but it’s gonna feel very familiar. You still have all of your data templates, your item templates, your data bindings, your converters. We have triggers for things that are gonna feel very I commands. It’s going to feel very much the same. So you’re in a learn some new controls cuz these are new platforms. That’s it. And a lot of them are the same. Like a grid. It’s a grid, it’s a grid. It’s a button, it’s a button.

>> A button’s a button.

>> A button’s a button. So you get a lot of cool stuff in here. Navigation, animation API and these are using the underlying things. So XAML forms is a lot more than just the UI it’s Open Source.

>> Yes.

>> So cool. You’re go to, and let’s do it on here. Check this out. If I go here and I go to, you can learn all about Xamarin, iOS, Android, Xamarin forms. You can explore the source code. It’s all on GitHub. And there’s tons of pool requests that have been coming in. You can contribute, you can take a look. It’s huge. I mean, this thing is massive.

>> So what this means, correct me if I’m wrong, but if you A, had huge amounts of time and B, possibly you’re out of your mind, you could fork this and change the XAML to be just the same XAML that you’re used to.

>> You can do whatever you want. It’s yours. You can compile it, make your own assemblies.

>> Potentially be a massive undertaking. But you could if you want to.

>> That could if you wanted to.

>> Yeah.

>> Yeah and essentially.

>> Let’s say there’ll be less time to learn the news and yeah you could.

>> You could.

>> All right.

>> But it’s all here and you can help contribute. You can come down you can learn about how to get it set up and more importantly you can learn how to contribute. Right here and we have this evolution guide which essentially is how we’re going to evolve IOS Android or components and learn about the XAML of evolution and how we’re gonna release XAML forms 3.0.

>> You could potentially do is there were controls that were missing, that would be a nice people to contribute. Absolutely but who learned all about it right on github and start contributing.

>> Cool.

>> Which is very cool. Now we have some themes.

>> I’d like to go back to that first for a second cuz I forgot to change the screen.

>> Go back here.

>> Yeah.

>> Okay. All right.

>> All right..

>> I sometimes forget it [LAUGH].

>> All right.

>> You can move over.

>> So we wanna talk about a few features today. I’m gonna go back here into my slideshow. We’re gonna talk about some cool of features Windows 10, some performance, some new design, and some ways to spice up. Now this kind of encompasses Xamarin.Forms from 2.0 to 2.3 which is, 2.3 is in preview today 2.2 is the current stable but 2.3 is almost basically out. Now I wanna show you some enhancements that we’ve made. But I first wanna start with Windows 10 UWP support for Xamarin forms. It’s fully supported, including maps, including everything out of the box.

>> And not preview, this is stable release?

>> Stable release, good to go.

>> Cool.

>> Right out of the box, so let me show you how to get started. Now, when you come into Visual Studio and you say file, new project here, and you go to cross platform, these are your Xamarin form templates, this is gonna create your iOS Android And you need a VP project, for you.

>> Good.

>> Does it for you.

>> Because in 1O had created an eight. Created eight.

>> Right. Eight. >> You could. Okay, cool. So now a 10.

>> 10. As long as you’re on Windows 10.

>> Of course.

>> Now if you’re on older versions, it will create you’re eight versions for you.

>> Right. >>

>> You can always go and add it though. Now notice this is my weather app that I like to show and we’re gonna kind of spice this application up. But if I actually magnify over here I want to kind of walk you through the set up of a Xamarin forms application. It’s very similar to a Xamarin application. We have a portable class library, all of our shared code. We go in here we have our .net our some plug ins and Xamarin forms inside of here. So our platformer is XAML and we have models, view models and views right inside of here. Notice that we still have an Android, iOS and a Windows 10 project. And I did this because if I wanted to there’s some set up code if I look at the main activity. We have a little bit of code down here Xamarin forms in it. LoadAppication Not much, same with iOS. And the same with actually Windows 10 UWP. All I’ve done is I’ve gone in is I’ve gone in and added Xamarin Forms as a nuget package. I’ve added it, so if maybe you already had a Xamarin Forms application, you want to add UWP.

Then I come in to my App.xaml.cs. And over here I’m gonna go ahead and zoom down for you here. I’m going to simply say initialize. That’s it, Init it. This is in my init code, initialize it. And then I have a main page. This is where things get a little bit interesting. My main page is, zoom out here. MainPage.XAML essentially is no longer a Windows page it’s a Xamarin Forms Windows page. Okay? So the templates

>> Can you mix and match in the same application?

>> You totally can. We’ll talk about a feature later called native embedding. You can just add it in there, but all this does is it gives Xamarin Forms an entry point to load our application. That’s the set up. So if you already had a Xamarin Forms application, you add the nuget, change a little bit of thing inside of there.

>> What if you already had the EWP application and you now wanted to add iOS and Android.

>> Same exact thing. You would go in to my iOS or Android application, add your nugets, and inside of iOS you go into your app delegate and you say load application inside of Android and you initialize Xamarin Forms. Same thing, main activity here, you’d end your Android application. We have guides on to walk you through setting that up.

>> So it kind of begs the question of, like we said, if you haven’t learned XAML yet, you should just learn it once and use it in all three places. Because that totally makes sense. But if you’re somebody like myself who has been doing XAML for quite some time and had built some UWPs using the Win10 XAML, and now Xamarin Forms comes along. I love the idea of continuing to be able use XAML, write the UI once and the back end code once. That’s awesome. How do I approach already having Windows 10 XAML knowledge or potentially already having a Windows App?

>> Sure.

>> That I now want to extend.

>> So let’s say that you have a Windows 10 app and if you followed MVVM really well you can actually just create a new portable class library and just put your Xamarin forms UI in that.

>> Okay.

>> Like you could just say listen I have a portable class library that’s just the user interface and another one that’s just my business logic. Now your Windows 10 application would just consume that business logic and carry on it have its Windows 10 UWP with all your visual states all that stuff and then you could have an iOS and Android app and you’d rebuild the user interface there. That’s one option if you already have an app. Now if you’re gonna start from scratch you would just have one XAML for all.

>> Okay.

>> You pick and choose what you want right? Just because XAML forms can go to iOS, Android and Windows 10 doesn’t mean you have to do all of them. You can say listen I want to do it on Android. I want to do it all crazy but remember that C# logic back end just shifts over. You pick what user interface, which route you want to go. Now I wanted to show you what you could do with the Windows 10 iOS and Android application that I built for a Xamarin Evolve conference. So I’m going to switch over here and what I want to do is I want I pull up the iOS Android simulators here. This is our iOS simulator for the PC. And I’m going to launch our Xamarin Evolve application. This is a Windows 10 application over here and I’m gonna go ahead and make it a little bit smaller. There we go. Just maybe a little bit smaller. There we go. Now this is an application that’s now running on all three platforms side by side that we can see here. There we go. Perfect. And this is 100% Xamarin Forms.

Has an Azure online, offline, back end synchronization to it. I can login with my Xamarin account. I can browse sessions, so I can go into sessions down here. We’re getting tabs on the bottom, fly out navigation. Here’s my sessions here. For some reason this one didn’t load. Let’s go ahead and load that here, there we go. Now I’m getting look and feel of each platform. I integrate into calendar,s into favorites inside of here. There we go. But look I’m getting this similar look and feel but it’s optimized for each platform that’s in here, which is very cool. I can rate this session. I can go in here, I can rate this session. I have to log into my account, but we’re getting the iOS, Android, and Windows 10 look and feel of this actual event. I could go in and I could look at different conference information, set up the WiFi, I could go into the event setter in here, and these are all the different events. And the same thing here on iOS, and over on Android of course, I get my flyout navigation.

I’m getting a tailored look and feel for each platform but from the same shared XAML. All I’ve done really in this application is said hey, iOS uses tabs on Windows 10, on Android, use the master detail fly out navigation. What’s really nice is that this is just a desktop application. If I wanted to, I could run it on Windows 10 mobile. I could run it on HoloLens. In fact I’ve had people take the source code, cuz it’s open source, pull it up on a Windows 10, a HoloLens, you put it on XBox or put it anywhere.

>> You can also use the HoloLens emulator.

>> A Hololens emulator.

>> Which works pretty well.

>> Because it’s just a Windows 10 app. Now but I’m getting a look and feel like my users are gonna expect.

>> Okay.

>> This applications integrates into barcode scanning, it does geolocation, it does maps, it does customer authorization, online offline sync, push notifications, it’s doing calendar integration. It’s very complex, doing sharing, doing all this great stuff between the different platforms. But as a developer I’m building everything once, right inside here, which is very cool but my users are getting this great look, and feel. I’m employing a social feed inside of here like I’m gonna expect. So I could do favorites, I could add a calendar, location, and read all the abstracts. But my users are gonna kind of look and feel, so this application really pushes it very far. And it’s open source, you can find it, we’ll put in the show notes. But it’s on the Xamarin hq gitHub page, app-evolve. And it’s all 100% open source. And it’s here. And this is what it looks like. This is what I really wanted to show. Notice that I have it on a Windows 10 Mobile device and I’m getting the fly out, kind of hamburger button here, but on Windows 10.

Desktop, I said I always wanted out, because I think that’s a good experience that I want. On here just always have it out. You can resize it and you can you can download this app on the app store today. So if you actually click on this, all the different app stores, here it is on Google Play. You can download it.

>> Mm-hm.

>> You can try it out for yourself.

>> Cool.

>> So you don’t have to actually build and compile it. It’s a full app and there’s all the different things that I’ve integrated into this app and here’s the shared code. Check this out. iOS at 93%, Android 90%, Windows 10 99% shared code. Server. I have a .net backend for the Azure. 23% share codes, it’s the same models. I’m sharing the same code between all of these different operating systems. And you see, I spiced up a little bit of iOS and Android. I do very minimal work on Windows 10 to make it look really great, which is very cool. This is integrated with Test Cloud, with Hockey app, with the VS TS. It’s very cool and you can learn all about it here and how to set it up. And all your keys that you need is done by me and peers, one of our developers here. So this was about five weeks, four to five weeks to development, in my spare time if you will. It’s basically me so check it out. I think it’s really awesome. And I like that you can kind of get this nice beautiful look and feel between all the different platforms that you’re going to kind of expect that you’d want.

Which is really cool. So let’s look at the application that we’re looking at today which is our forms weather application and let me just go ahead and run it really quick here on the different platforms. So this here is using open weather map in our back end. It’s going out and you can enter your latitude and longitude to find out what the current weather and forecast is. This is just Donek code and our shared code. Again, here, you can enter the city. And we can deserialize some JSON. I have this big weather object. This is all of our models that are coming in from the actual service. You can see we have code lines up here. And you see when I updated it last. And then I have the views the user the view model so kind of the code behind. So this weather service location getters and setters just literally don that code inside. Inside of here I say execute get weather command service get weather command here. I go out I say do you want to use geo location. If so I’m going to use the geo locator plugin from shared code with these plugins for Xamarin and Windows.

That piece of code here will go into iOS, Android, and Windows 10. Use the native implementations to grab the current location of where I’m at. Else, I can go and get the city just whatever I enter, and then I go and I get the forecast, and then do some string interpolation to update it. And then, here inside the forecast or the weather view, I go and have an entry I have a label and switch, if I want to use the G.P.S., and then over here I just have a button that I click in a command. And a label to display the temperature and a little activity indicator, kind of a progress bar.

>> Okay.

>> So this is Xamarin form XAML, and you can see that it’s the Xamarin form spec. So we can update that later on and we could change names or we do whatever we want. And then I can bring in custom name spaces. And that’s just XAML that’s there.

>> Right.

>> I could run this over here. I can set the Android one as the startup. Let’s see what I have let’s go ahead and close some of these pages here. There we go it’s actually booting it up.

>> It’s gonna deploy here so we’re gonna take a look at it on just Android and iOS and then we’ll kind of or, Android and Windows 10 and we’ll kind of spice it up, then we’ll talk about some of the new features of what I’m doing.

>> Okay.

>> Inside of here. So I’ll wait for this to deploy and I’m just click the marshmallow emulator. Deploy successful. Starting debug, boom. You always know when Visual Studio’s doing stuff cuz then there’s all these little locals and exceptions

>> Yeah.

>> stuff happen. So we just want to take a look at the application. There it is, get weather. And we’re gonna say get weather and what is it? Light rain, classic. I can swipe over and I get all the different forecasts coming in here. This is all built with just a XAML. I could go in and touch this, of course, cuz it’s a touch screen.

>> Good.

>> And I could I could use GPS if I wanted to. And it’s probably gonna figure out where we’re at. We’re in, it says we’re in Sammamish. Even though we’re in Redmond, whatever the IP is of this machine. Or in fact, I think this is actually using, this is the Visual Studio emulator for Android so I can go into location and think I can like tap and say I’m actually over in Tukwila, now we’re in SeaTac, there we go, light rain. Pretty cool, I could actually like drag and drop that around and crazy. Very cool. Now what’s cool is that we’re talking about Windows 10. I’ve done that setup, there’s no other code that I’ve added into Windows 10 but here I can just go ahead and launch on my local machine, I can run around on Windows 10 emulator, a hollow lens emulator.

>> Yep.

>> Or a hollow lens device. And then we can actually see it deploy here and it’s going to pop up our Windows 10 application right here and it’ll start debugging tool and diagnosing and you know all those Windows 10 features that you would kind of expect when launching an application. So it’s going to start our debugger here and here we go. Now, we’re inside of here. I can scale it, right, I can do all that stuff. Can say get weather. There we go light rain I get the forecast. I’m on a touchscreen so I can actually go back and forth and flip around. If I wasn’t on a touchscreen I wouldn’t be able to but I have my tabs on top that I would expect. But I’m getting the Windows 10 controls here and I could say use GPS. Let’s do it and it probably knows that I’m over here in Redmond hopefully now whatever the IP address of Sammamish so it’s the same IP.

>> Yeah.

>> Or wherever I’m at. So very cool. I could enter Cleveland, Ohio. Get that, get weather. Cleveland, broken clouds, 80 degrees, probably super humid. Cool.

>> I assume.

>> So there we go. Running Windows 10 all from the same XAML. This is the XAML but it’s laying down the native controls.

>> Yeah.

>> I think that’s what’s really cool about Xamarin Forms.

>> Write the UI once, run it across, tweak as needed, write the code once.

>> Exactly.

>> It’s awesome.

>> Exactly. So that’s Xamarin form so now if anyone said.

>> So quick overview of when you would use Xamarin forms versus native when it first came out was you could use it for prototyping but now that it’s more advanced, what’s your current advice on.

>> Sure.

>> When to use it?

>> So I think that so when we started Xamarin Forms, it was really amazing at applications, of doing a lot of forms over data, things like that. I built the Xamarin evolved 2014 application with Version 1.0 essentially.

>> Yeah.

>> And I thought it was really good, I thought it was great. Obviously the new one built on 2.x. Even better right? And it’s cuz we’ve optimized performance and added controls and styling and all this stuff over time. I think Xamarin form’s extremely highly capable of doing all sorts of applications. There’s apps that I can’t talk about but there’s some good case studies that are out there that are built with forms.

>> Okay.

>> On our blog. The only time that I would say that you really want to use the traditional approach of creating each different UI is maybe if an application it’s like very image and video rich. You want to optimize the bitmap and the consumption you’re doing like a super media heavy application You have tons of images or you want grids.

>> Okay.

>> That’s really you need to optimize per platform. You just do, you just do. If you have an application that’s very map heavy, maybe you’re creating a Uber or a Lyft type application, we created the My Driving Application for Build which is this really cool application that tracks when you drive. It’s very map intense, I’m doing custom drawing, custom things. You can do it in Xamrin forms.

>> Okay.

>> But it’s a lot of custom work because we’ve abstracted common UI controls. There’s a list about 40 or so that are out there. What I say is take a look at what Xamarin forms includes. Does your application match what’s in here? And if not, is it every page? Like is 90% of my application doable in Xamarin Forms? Because else I can do this thing called a custom render or native embedding, where I can take a whole page of XAML, Windows 10, and shove it into a Xamarin forms application. You can do that. But if you’re like, you know what? 50, 60% of my application doesn’t seem like it’s going to fit the Xamarin.forms controls because my designer is very nit picky.

>> Okay.

>> What I want, maybe go the traditional route, but you’re still gonna share 50, 60, 70, 80% of code between the platforms.

>> Right okay.

>> Which is good. It’s all important. I say start. If you’re starting, learn Xamarin iOS, Xamarin Android and then Xamarin Forms because.

>> Okay.

>> Yeah, do that.

>> That’s gonna be my next question. So you wouldn’t just start with forms?

>> You can’ but I recommend doing at least a hello world type application.

>> Because then you don’t you haven’t learned enough about the native platforms. You’re learning at the UI level, if you use the word abstraction layer.

>> Yeah. It’s what it is. It’s an abstraction layer.

>> Okay.

>> Yeah.

>> So you would recommend learning the native to get a feel for what the platforms are like.

>> Yeah.

>> And then learning forms?

>> Do a very simple, what I like to say is, do a very simple master detail.

>> Right.

>> I have a list of things, and our guides walk you through that. So master detail flow. I have a page, I click a button, I go to page two.

>> Right.

>> Learn how that works. On iOS and Android. And then when you start building Xamarin.Forms applications, you’re going to know why Xamarin.Forms looks a little bit different on iOS and android. Why does it do that thing? Why does it do that thing there? It’s because we’re natively doing these things, right?

>> Okay.

>> So I think that’s important to know.

>> It’s good advice.

>> Yeah.

>> Yeah. So let’s go through some new stuff. All right.

>> All right.

>> We got Windows 10. Got some awesome stuff. Let’s go back in here but I wanna talk about is performance all right, performance. What we’ve done is we’ve done this thing called XAML compilation. This is brand new. Normally with XAML it’s just you’re coating it. It’s parsed and inflated at run time. We said no more we’re gonna do compilation time XAML. We parse it, we turn into IL and that’s at runtime. This does a lot of things for you. It makes your app faster, smaller, because it’s compiled we don’t have to put all those XAML files in there but it also does a lot of things when it comes to error handling. If you mistype something you get an error.

>> Right.

>> Because it’s compiled, which is very nice. This is a flag that you set in your application. Very simple. We’ll take a look at that. But I also wanna talk about really quick the sync on ListViewCachingStrategy. Lot of applications are built with a lot of lists of data.

>> Yep.

>> That’s usually a lot of the Xamarin Forms apps, or just apps in general. Normally all these cells that you’re create would be created over, and over, and over again.

>> Yep.

>> But what we wanted to do is say, listen all these cells are the same type. Let’s super optimize them, make them super fast so ListView Caching Strategy enables you to say all these cells are very similar so recycle them and, just turning on this one flag will give this huge boost to your application which is very cool. Let’s take a look at this in the code. So what I want to do is come to our application here. And let’s first go into our shared code and look at the assembly info and right here, I have Xaml compilation turned off. So that means if I come in here and I say this is actually stack and this is stack, it’s going to be, this will actually be okay. And if I actually compile it, it’s not stack, right? It’s gonna be like, I don’t know what to do. It’s successful. If I run this it’s gonna crash.

>> Right.

>> Let’s turn on this flag. It’s actually for all platforms. Compile it. There we go. This is gonna compile all the XAML on my page. And I go here and say let’s do it. Build failed. Right there stack is not found.

>> Does that happen only on compile time or is it live?

>> So it’s not live, it’s when you compile it.

>> Okay. All right. But it’s now gonna say stack layout. You have IntelliSense, right?

>> Yeah.

>> So that’s gonna help. We have StackLayout. It’s gonna do that. And this is really nifty where you fat finger text.

>> Right.

>> And you put like txt.

>> Yep.

>> Or something. I do it all the time. Now what this is gonna do. It’s even gonna improve the build time. It’s gonna improve everything along the way cuz it’s gonna make sure that all of your customization through your application. It’s gonna improve performance. It’s gonna improve just developing on day to day basis.

>> Right.

>> I go to hit debug it like it’s just gonna work. Very nice.

>> But also I would imagine it helps you learn because if I’m typing XAML by hand that I’m gonna type text box.

>> Text box, right.

>> But there is no text box.

>> Exactly.

>> And then I’m gonna ignore the fact that I’m not getting the right IntelliSense.. And then, I’m gonna compile and it’s broken.

>> It’s broken, yeah.

>> Or no, I’m sorry. I’m gonna compile and it works, and then when I run it.

>> Yeah.

>> Then it’s broken.

>> I’ve done that a lot sometimes. I would stack panel a few times.

>> Yeah, yeah.

>> And then you’re like, there’s that.

>> So then our enhancement request is that you get real-time. Telling you that it’s broken.

>> Coming in probably most likely coming.

>> Yeah sure. You want baby steps.

>> You can’t have everything now.

>> You can’t.

>> Otherwise would be never be an incentive to upgrade

>> Exactly [LAUGH].

>> So all right so that’s one thing. Now if you looked at that forecast for you.

>> I so that you have to turn that on.

>> Gotta turn it on and the new templates it’s gonna be on by default. Now the reason this is And you turn it on in the code?

>> Mm-hm.

>> Or you don’t turn it on in tools, options, or?

>> You turn on in the code.

>> In the code, okay.

>> Now what’s cool here, if we look at the code, this is an assembly level.

>> Okay.

>> Now what I could’ve done is I could’ve went into the code behind of here and I could’ve actually, I think I’ve turned it on right in here and I say, Xamal compilation for this page and then I would bring in some namespaces, then I would compile this page. Now the reason this is off by default it’s cuz it’s a new feature and you can compile or skip. So if for some reason, you have this crazy, crazy complex page and for some reason something’s wonky when it runs, you might want to skip that page. Now the entire of all the application, I had no problem with it, it’s super complex.

>> Okay.

>> So I think just turn it on on everything, see how it goes, go for it. But if you need to, this is nice cuz you can turn on and on and off. You turn that off in code on a per project setting, which is cool. Now this forecast view, you notice that I have this caching strategy recycle element?

>> Mm-hm.

>> I could’ve also said retain element and that would create a cell each time. For recycle is essentially gonna to recycle all these cells, which is this thing over and over and over again. You almost always want to use recycle element because most likely your elements or your cells aren’t super complex and they’re a bunch of data. So you want it to scroll, right? Super fast. So when your user comes in and they go, let’s go ahead and get rid of this page.

>> So how many cells do you think it, on average or as a rule of thumb, how much data, how many cells do you need before you’ll even notice the difference?

>> So if this cell had like ten, fifteen, twenty different controls in it all with different data binding with converters, the big important part isn’t morphing height often. Right now notice here I can go really fast and just kinda go up and down, right? That’s crazy fast. This is not what users do, but it’s loading images, it’s doing all this stuff. Cuz it’s recycled. If I had a cell that was taking up the whole page and it was super complex, that’s like Facebook, right? Facebook cells are all crazy different. If your cells are dramatically different probably, retain.

>> Okay.

>> But you can easily flip it on and off and just see how it performs.

>> Okay.

>> Super great.

>> Yep. Just for that, which I love and that’s super-optimized on all the platforms which is nice. But these are just small enhancements that you could take advantage. Let’s talk design really quick, okay. So let’s talk design and some controls. We’ve optimize Android to be all material design through and through. The new templates set this all for you. Uses the same templates if you’re doing Android, this is gonna give you a consistent look and feel and a huge performance boost. I love these things called Data Templates, you remember data templates? It’s been on for a while, right? We got them, we have them. People don’t know what data templates are. Data templates is like I have a list view, and there’s different types of content inside of it. I just say, this instance of MonkeyChat is a sender receiver. So these cells are similar but different, right? The monkey’s on the left, the monkey’s on the right, different cells. They’re pretty dramatically different. If I was to do this in Zambia in different converters, different things but imagine if I had a monkey, a dog, a cat.

They all look different. Well, you’re gonna use a data template selector. It’s very simple. You have different cells and you have one thing that says, get cell, get cell type, and you just say, return the monkey cell, return the cat cell and it’ll be super optimized for you. Boom, data templates.

>> Cool

>> Cool. Now effects are cool. Let’s say you want to do something in an application but it’s not there in Xamarin Forms.

>> Okay.

>> And normal, let’s say it’s a control that we didn’t expose. You create this thing called a custom renderer. My very famous one is a circle image. It’s an image but it’s a circle. So it’s a circle image, it does a lot of things. It’s pretty complex to cut out, surprisingly complex to cut out a circle out of an image on different platforms, and that was custom preach. Now, effects are brand new and they’re like a custom renderer lite. They’re stringly-typed. There’s no methods, nothing to control. Essentially, you spice up a control.

>> Stringly-typed.

>> And I’m gonna show you this-

>> You make up that term?

>> Someone in Xamarin did but it’s very, very stringly typed. It’s optional. It allows you to change properties without having to worry about this entire lifecycle event of all this stuff. So let’s take a look at what we can do here. And I’m gonna show you even some new cool stuff. So here’s what I want to do first. Inside our weather view, I have a few code snippets and the first thing I want to do, I didn’t even talk about this, I’m gonna add a trigger here. Drag and drop this in. So on this entry, I thought I would show you this data trigger thing which is very cool, it’s a new feature in 2.0. Thing is it may be in an earlier version. But I’ve added a trigger here that says, any time that this value changes, enable or disable this field, okay? So if I toggle the switch to use GPS, I shouldn’t be able to actually enter text into my entry field. Why would I enable that, right? It doesn’t make any sense. Now I could create a converter, I could say enable, then I can do a bunch of stuff but that means I have to write code.

This is all in XMLA, it says a trigger, that is whenever this data changes, set it to true or false. So if UseGPS is true, set is enabled property to false. Kind of cool. So watch this. Watch this. This is just a little bit of Zamil. This is cool, I like little snippets of code that are in here, right? So we’re gonna let this recompile up and we’re gonna redeploy it here on Android. Right, compile, compile, compile, get our home screen. Better, better, better. Come on. Starting debugging. Boom, there we go.

>> So is it basically a converter, an inline converter?

>> An inline converter.

>> Is that the way to think of this?

>> An inline converter. Yeah. Totally.

>> That is very cool.

>> So notice here-

>> Cuz although converters are powerful, it’s a giant pain in the butt to have to leave your XAML, go over, write a converter.

>> Remember the name.

>> Remember what to call it.

>> Yep. Set up your resources.

>> That’s the hardest part of all. Yes.

>> Do all this. So here I’m gonna say you switch Disabled.

>> Sweet.

>> Turn it back on, it changes and it does the opposite of whatever’s there so it knows how to do that automatically on all platforms. Very cool

>> Very cool.

>> Now notice that this is using the material design, I’d talked about it a little bit before.

>> So explain for those of us that don’t necessarily know what that means. What does that mean?

>> Sure. So material design is Google’s design guidelines.

>> Okay.

>> Of what Android applications, some web elements, they wanted a design metaphor that would scale across all different types of devices that Google is making. Whether it’s something running on a Chromebook or Android or on a tablet or on a TV, this actually kind of gives depth and a consistent look and feel to your application. So inside this application, we’re getting our theming and accent colors.

>> Is it new material design, is relatively recent?

>> So material design was released with a Lollipop about a year and a half to two years ago.

>> So what did they have before that?

>> It was called Hollow.

>> Okay.

>> It’s a hollow design and it was kind of like more grayscale.

>> Okay.

>> And what this does is, why this is important is because Android moves a little bit slower than other operating systems. Lollipop and above, Lollipop and Marshmallow which are the two most recent, about 20 to 25% of the market. Now the sad part there is that means that 75% of your users don’t have access to this beautiful material design. App Compat brings all of the material design backwards to all versions of Android. We’ve integrated that in the Xamarin Forms. So now your Xamarin Forms app looks consistent no matter what type of Android device your users are running.

>> So material design was just their updated UI standards.

>> Exactly.

>> We updated our UI standards for Windows 8 and we tweaked them for 10. That’s what material design is.

>> It does.

>> Okay.

>> And then App Compat brings it all the way back.

>> Got it.

>> Very cool. All right, now let’s look at something inside of here, we talked about App Compat, we talked about this, let’s talk about the actual, not a custom control but inside of iOS we’re gonna take a look at an effect. Here’s an effect. It’s inside the iOS application and this instance, what I want to do is, if we launch the My Weather application. There we go. All right, so let’s launch this before adding the effect. So I’m gonna say set a start up, and start debugging. And what I wanted to do is I want to change the UI text field, the BorderStyle of it and we’ll see what it looks like without the effect and then add the effect onto it to see how we’re spicing it up. So it’s gonna build the iOS application and deploy it and this our iOS remote simulator here. I already have it with the effect, I was doing some testing earlier. There we go, go figure. And this’ll launch it here, boom, here we go. All right, so this is what, normally, an entry text looks like.

It’s kinda like this weird circular thing and I don’t really like it too much so I wanted to change it. And that’s changed by this border style. Now I wanted it to kinda maybe look a little bit like a box, like we saw earlier. That’s a line outline. I could say, you know what, no, I don’t want Any. I could have a rounded rock, I could have a bezel, I gotta give it a line. Now what this is is stringly typed, so resolution, group name and effect. Essentially this is your company and what the name of the effect is.

>> Okay.

>> What’s nice is that we’re not changing and replacing the control, we are spicing up a control. That means, Robert, if you create a bunch of effects and distribute them via a NuGet package, I could consume them, I could apply them to a custom control. I could stack effects on top of each other, and now it means that I don’t have to have a custom render of a custom render of a custom render and add this complexity. Look at this code, OnAttach, OnDetach. Two override methods, it’s a platform effect, that’s it.

>> Okay.

>> That means that it’s loaded and that means that it’s unloaded. Now what’s great about this, is that I could add it from the code behind or here I could make it easier cuz I wanna add it from XAML. So I created this routing effect and all I did was give it the name here. What this allows me to do is essentially, write it in my XAML, that’s what I wanna do.

>> Okay.

>> So back into my XAML I could come into this entry, I’m gonna add this effect in here, boom. It’s actually not very much. And here it is, Effects, and notice that I’ve given it a namespace here. So I have like an effects folder and put all my effects in here that are very simple for the name spaces. Now I don’t have to, I could and an end code behind but I don’t want to add an end code behind I want to add it in XAML. See here we go, effects EntryBackgroundEffects, I’m gonna hit deploy again. Now I’ve only implemented it on iOS, if I run it on Android and Windows 10, it’s not gonna have any impact at all.

>> Okay.

>> It’s smart enough to know that, I only wanna spice it up on this one platform, and that’s all I want to do. So here we’re gonna relaunch the application again, here we go. Just gonna relaunch, there we go. There we go, and now we’re in a box, it’s a completely different look and feel. I could come in, pick say Cleveland, Ohio to get weather. Should go off, get weather. This is kinda cool cuz I just like tapping and scrolling on stuff. Seeing what it is gonna get hot over there, come back and there we go. I could say use GPS, I could change everything this is nice, I wanna tweak stuff that’s not exposed in the abstraction. We talk about this abstraction and you’re like, James when should I use Xamarin.Forms and when should I not? Well, if there’s some stuff that you wanna get access to, that is not a lot of code to write. It’s like three or four lines of code just to do something simple like this and get access to it, which I think is very cool. All right, so one last thing I wanna talk about some controls.

They didn’t have any slides for it, but I wanna show you something cool.

>> What! [LAUGH] >> I didn’t have the slides. We’ve released this brand new control called, the carousel view. Allows you to flip through some stuff. This is very cool. So what I wanna do is, I wanna stop debugging here. And think of it like tab page, where you can swipe through tabs of information, but imagine when you go to any app store and there’s this big carousel thing going and there’s little things you’re swiping through and you can embed this anywhere. We had a carousel page before but it wasn’t really optimized, and it’s a full page. I want to actually embed stuff into my actual page and have carousels everywhere. So what if in our application, we have that forecast view, what if I just wanted to flip through the forecast, let’s do that. So here-

>> Let’s talk about the usability of that, is it the way people actually wanna use an app?

>> Swipe through some things?

>> Swipe through.

>> Well I think if you’re having promotional things, if you’re doing certain instances, maybe a promotion.

>> Yeah, or if you don’t know you’re looking for, maybe?

>> Yeah, some sponsors. Like in the Evolve application, I could have done some sponsors that are highlighted or some upcoming sessions that are automatically flipping through. I think it’s a cool control, people have been asking for it. They had a lot of images that are flipping through, or some videos, things like that and people want it. So it’s a NuGet package. So if we go to our install packages we’re gonna see that it’s a package, so we’re extending it, here’s a carousel view, I’ve installed it in to all my projects. So I’m gonna come back over to my weather view and underneath my activity, I’m gonna add the carousel view. Boop, here it is. Now it’s custom control, so it has a custom namespace. And I put cv, and if I look up here, we can see I added a namespace up here, it’s in this carousel view assembly. What’s really nice about this is it has an item source. So you tell it how many items you want it to have, it has a data template and you just give it a data template.

I literally stole the exact same data template that is over here but I wrapped it in this frame to give it like a nice card view on Android. I even have an OnPlatform cuz I don’t want to have a frame on iOS but I want to have it on Android, which is cool and then there’s a stacked layout. And then it’s the same forecast, if you actually looked at the forecast view, it’s exactly the same.

>> Right.

>> Finds a forecast, think of it like a listview, but now it’s left and right. Different use cases, it’s very cool. So let’s take this here and I’m gonna change the startup of this application and I’m gonna say you know what, I don’t actually want tabs in here at all. Like let’s do this, let’s go in here. What I really want is I want a var page = new weatherView, cuz now I don’t need that forecast view. I’m gonna say BindingContext = newWeatherViewModel, here we go. And I’m just gonna say page. This app here is the starting point of my application. So I’m gonna change it from having tabs to just having this one page, and now I’m just gonna say rebuild and start deploying. So again it’s gonna package up my Android, we’ll run on Android, iOS and Windows 10 so we can kind of see the look and feel of different platforms. So now our whole page is gonna be completely different, which is pretty nice inside of here. So again we’re gonna build it up, launch it here. I just love that I can just start running it right on my PC.

This is in preview, this is our iOS simulator and you can grab it and we’ll put show note so it’s on there. We have weather, say Get Weather. Now I’m just with my finger, flip right through, boom, I’m seeing everything. Now I would probably set up a timer so I can kind of flip through the different times that’s on there. That’s pretty cool. Cool new control and let’s do this on Android. And then we’ll do it on Windows 10, just to kinda see what it looks like, rebuild it here. What I like about this control is it shows what you can do and where we’re taking it and expanding it. So it’s open source, you can add your own controls. You can do a lot with Xamarin.Forms, and there’s awesome control vendors Telerik, Syncfusion, DevExpress, Infragistics. They’ve already made controls for iOS and Android they have the same controls on iOS and Android and Windows 10 for Xamarin.Forms. Which means your bar charts graphs controls and all that stuff that you know and love is now in Xamarin.Forms.

So here it is on Android. There we go we got this nice card view, we’re flipping through, very cool. Let’s do it one more time just to bring it full circle back on Windows 10. Run it here on my local machine, it’s gonna boot it up. What we’re gonna have here is a really kinda interesting view once our diagnostic tool starts up. It always takes a second, boom, there we go. Now, I could probably change the background look and feel, but I’m getting the same thing. If I have a mouse, notice that I get the correct things on here, and I could go and customize it per platform and everything that I would know and expect..

>> Very nice.

>> Super cool. So we’ve spiced it up with some effects, we have some new controls, have some optimizations. We’re almost at 50 minute mark so we have a few really cool things to flip through. Because at our Evolve conference, we announced some really cool things. And the first one was the XAML preview.

>> Ooo, previewer.

>> Previewer, it’s a preview of the previewer.

>> Not a designer.

>> Not a designer.

>> Okay.

>> But it renders, your iOS and Android applications, completely live as you code them.

>> Got it.

>> You can use mock data and see your mock data live like you have here. It’s only in Xamarin Studio today, but it’s coming to Visual Studio, in fact it was previewed, the preview of the preview was previewed at Xamarin Evolve. So you can actually see it, it’s coming. I don’t have a timeline is coming who knows, it may be out by the time-.

>> Is it alpha, beta? This isn’t stable yet, is it?

>> This is not stable this is in out alpha channel. So we like to talk about stable things but you can try it, it’s very cool. I really like it and it’s nice because, often I don’t need to drag and drop controls. I can write the XAML, but I want to see it, I don’t wanna have run and do all this stuff over. It’s coming, it’s awesome, which is very cool, from us. URL navigation, this is specific for iOS and Android, this allows you to deep link content from the web into your application. I did this in the Evolve app, it integrates into Spotlight, into app indexing. So someone can send you a link to let’s say the Evolve session, it would open automatically in the conference application, and it gives you a cross-platform implementation to do that. So, you just say, add this deep link and then open it here. I believe in future versions hopefully, hopefully in future versions of Windows 10, if they do that type of integration with Cortana or something we can do that and add it here.

>> Okay.

>> You can do that. DataPages, super cool, I’ll talk about one second DataPages. I didn’t talk about that, I wanna talk this at .NET con, and people even asked me afterwards they’re like, what if I just have Azure and I have a bunch of tables in Azure, I have a JSON file, it’d be really cool if you could just generate the page for me.

>> Okay.

>> So we said, sure, we can do that for you. So DataPages are brand new, there’s a preview, we have documentation. You pointed at a table, you just say, here’s where my Azure website lives, my Azure mobile apps backend. This is where it lives, this is the table and we demoed this at Evolve, then we have some sessions and speakers and it generates and creates everything for you automatically, master detail flow.

>> Nice.

>> Then you can spice it up if you need to.

>> Okay.

>> You can put in a JSON file or you can point it at an Azure backend, and it handles all of the integration code for you. It at least gets you prototyping within minutes, very cool. And that combined with themes which gives you a nice light theme and dark theme in car view and styling default control templates mixed together, does really cool things to spice up and start doing this automatically. And we have great documentation just on our developer portal on how to do that. Think of this as a a set of pre-built controlled templates.

>> Okay.

>> Say I have a card view, and I wanna use the card template I wanna put James in there and this is what DataPages uses automatically. You can get started at developer portal, the Evolve application’s open source. The Charles Petzold, who works for Xamarin, he created this amazing book.

>> The book is not done, right?

>> What’s that?

>> The book is not done.

>> The book’s done.

>> It’s been in preview for a while.

>> It’s been in preview, it’s done. I can grab it, I created this, you can grab it completely for free, which is very awesome.

>> Yep.

>> And of course I’m done with slides, my goodness, I’m done with slides, gotta have a few slides.

>> Excellent.

>> Awesome.

>> All right.

>> Hope everyone found some super awesome interest.

>> Yeah, awesome overview, it’s really come quite a long way.

>> Yeah, I love it. And I really encourage everyone to check out the Evolve app because I built so you can have questions with me on Twitter, James Monson Mango, on my GitHub.

>> That gives you a good feel for what you can do with it as you were saying, to kind of get a sense of of when you would use it.

>> How far can I take it.

>> How far you can take it, right.

>> And I think even that app I didn’t take it all the way.

>> That’s just a question of learning and, I mean you can’t necessarily decide ahead of time, for this type of app I should use something, you have to get in there and understand how to use it.

>> Yeah, and if you architect code in a way that you kinda put your views separate from your code behind, that’s what I did in the Evolve app. My view has no idea about my code behind it just consumes view models, it just consumes and it’s all XAML at the end of the day. Loosely couple it and then you could go back and forth no matter what, awesome.

>> Cool.

>> Yeah.

>> Thanks for coming on.

>> Absolutely, I’m glad I can show all this new awesome stuff and write a bunch of code.

>> Yeah, that’s cool.

>> Yeah, awesome.

>> All right, hope you enjoyed that, we will see you next time on Visual Studio Toolbox.

>> Bye. [SOUND]


Read the video

In this episode, Robert is joined by James Montemagno, who shows us what is new in the latest version of Xamarin.Forms, which enables you to build a native UI for three platforms with one shared C# codebase. Simply put, if you know C# then you already know how to build iOS, Android, and Windows apps. Xamarin.Forms is already packed with tons of awesome and recently had a major overhaul with Xamarin.Forms 2.0, but the fun didn’t stop there as there have been amazing new features introduced. James gives a full break down of all the spectacular features that have been recently released and a peek into the future of Xamarin.Forms.


Comments to What’s New in Xamarin.Forms

  • does Xamarin Forms support a WPF like Canvas control?

    SteveRichter July 6, 2016 11:37 am Reply
  • MoamenMohamed July 6, 2016 2:57 pm Reply
  • The Problem I see with Microsoft+Xamarin – it brings nothing to Windows. Seriously.It just helps windows developers to migrate to android/ios. RIP Windows Phone. 

    BlackTiger July 6, 2016 11:36 pm Reply
  • @BlackTiger: The beauty here is that you can now reach all platforms from a shared code base. No matter what platform you want to go to you can do it in C# inside of Visual Studio. The Xamarin.Forms UI library has full support for iOS, Android, Windows Phone 8, 8.1, Store 8.1, and UWP. Truly universal 🙂

    JamesMontemagno July 7, 2016 12:06 pm Reply
  • @James​Montemagno: What about RoboVM? Any plans to dump, open-source it?

    exim July 9, 2016 5:21 am Reply
  • @exim: You can read more about RoboVM on their website, I don’t have any more information than that.

    JamesMontemagno July 9, 2016 5:26 pm Reply
  • Can anyone point out where is the .iso image of visual studio 2015 update 3 enterprise?Not the online installer, not some .exe file… just plain raw .iso image.Thank you!

    exim July 11, 2016 10:31 am Reply
  • Just to point out, I've downloaded that exe file from VS website, run it with /layout flag (somewhere on VS forums it was mentioned that it will donwload the iso image), but it downloaded some 22GB crap… The iso image should be 5-6GB shouldn't it?

    exim July 11, 2016 10:33 am Reply
  • @exim: Try I just used that and got the 6GB ISO you are looking for.Robert

    rogreen July 11, 2016 10:56 am Reply
  • Thank you very much, Robert! (just to make sure, I want that 90 day trial enterprise variant, not the community version).

    exim July 11, 2016 12:31 pm Reply
  • Hi Robert, just to clarify, that link gives you an iso image for Update 3 only, i.e. you should already have VS 2015 installed (probably with Update 2, not sure…). Is there a link for a complete iso image for full VS 2015 update 3? (enterprise trial).

    exim July 12, 2016 12:42 am Reply
  • @James​Montemagno Can you help me find that toolbox extension you use for Xamarin.Forms Xaml I did some google search but couldn't find anything. Thank You.

    lecnier July 12, 2016 11:05 am Reply
  • @exim: If you download VS Enterprise Trial today, it has Update 3 already built in.Robert

    rogreen July 12, 2016 11:13 am Reply
  • Thank you, Robert.@James​Montemagno: Any plans for supporting desktop platforms for Xamarin.Forms?For some type of apps where Forms is a good option (e.g. business/CRUD), I also consider Qt/QML because it supports desktop out of the box (but you have to deal with JavaScript crap…).

    exim July 13, 2016 1:17 pm Reply
  • Which tool are you using for the iOS Simulator for Windows?

    Rashun Mosley July 13, 2016 9:51 pm Reply
  • What's missing is Xamarin.Forms for macOS. A version that integrates with UWP would be awesome too.

    Jeff Lewis July 13, 2016 10:47 pm Reply
  • @Rashun Mosley: You can install it from you will still need a mac on the network to connect to.

    JamesMontemagno July 14, 2016 10:42 am Reply
  • Ok.. Now.. how about MacOS? 🙂

    Jeff Lewis July 16, 2016 7:50 pm Reply
  • @JamesMontemagno:I second the need for macos support for Xamarin forms

    diakonia July 18, 2016 6:10 am Reply
  • @JamesMontemagno:I haven’t look at the code yet for Evolve app but how are you doing the login? are you using xamarin company registration login or custom login that I can use to build my own? thanks

    DRStrangeLove July 18, 2016 9:02 pm Reply
  • We need an equivalent control to UWP’s GridView control. This should be first priority. Not carousel.

    markti August 15, 2016 9:45 pm Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

1Code.Blog - Your #1 Code Blog