Let’s Make Crazy Beautiful UI With Xamarin.Forms | Xamarin Developer Summit

July 25, 2019 posted by

awesome come on in come on in here you hear you gather for the word of xamarin amen cool awesome we have the right screen all right is everybody having a good time yeah glad you came have you made your friends jealous made your enemies jealous come on yeah this is great it's been absolutely wonderful to be surrounded by so many kinds nice like-minded people you know except for Dwayne up here on the front I don't know I tease I tease you know I tease cool so we're here to talk about making crazy beautiful UI with salmon forms so I would imagine you are interested in all kinds of tips and tricks that I hope to be able to share with you today of course these are not for gratuitous usage but we can do some really nice things I get asked you know a variety of questions all the time obviously through Twitter through email through speaking at conferences about how do you do XY and Z right probably the the main one is how do you do parallax it's anybody done parallax before maybe there I'm a few people has anybody attempted to do parallax and said screw that all right got a few of those so I will show you some parallax it's actually pretty awesome pretty easy and and I've got some other stuff I had a lot of fun building these demos because I was using hot reload so it was a lot of fun I filed some bugs some oak and got fixed some of them will get fixed some of the improvements are still yet to come but we knew that it was ready to be out there in the wild so I'm glad that you're going to be getting it in your grubby little greedy little hands soon and I hope that you'll take the opportunity to provide lots of feedback to the team let us know how it's working for you let us know where it's not cool so that's my Twitter handle at the end I have my email as well please reach out anytime I do apologize if I don't get back to you like immediately but I do read all of the emails and I try to respond to them all sometimes I suck at time management so you know how that is cool so I thought the first thing that we would talk about if my arrow works one of these buttons has to work it literally does not want to forward there it goes hello so I thought we'd talk first about themes colors fonts icons because I have you've probably followed the Apple announcements iOS 13 now has dark mode yeah more phone time in bed that's what we're talking about so so you know that's important and people are going to be asking you maybe you're already asking how can I better support these kinds of things in my app to make sure that your app feels like it belongs as it should on the iOS platform as well as Android of course and so how can I best address these things so I'm gonna share with you some of the things that I tend to look for now my background before joining Microsoft two-and-a-half years ago I had a company called render and we did consulting it was myself partner Ben Bishop and several contractors and so we did apps for startups we did them for enterprises we had big customers we had little customers but one of the common themes was it was very creative very forward thinking that there was a very high bar for user experience so we were constantly doing things that we couldn't find any precedent for or you just had to work it out so some of these are tips and tricks from useful resources and practices that I have so one of the first ones is finding resources like this this is colored adobe.com used to be called cooler kul ER and so this is a website and there's also a mobile app that you can use and you can take pictures of colors you can take pitch of a whole photo and it will tell you what the color palette is and so if you're looking for just a set of like five six colors that kind of fit a particular theme this is a good resource to go to if you're color challenged this is this is good now something to keep in mind from an accessibility standpoint just because there's a color palette doesn't mean that it's going to be great on your phone doesn't mean that it's going to be great for accessibility because when it comes to color contrast is very important you have to take into account colorblindness and things like that so you want to be aware of that I didn't promote this in my deck but I know on Mac in particular there is a plugin that you can install or it's not even a plug and it's an app you can install and it will turn your screen into a representation of what different color blind people see and that will really open your eyes to to what you're dealing with and what those people live with every day you know Green is not necessarily green as Green perhaps that sort of thing so this is one really good resource another one is coolers dot-coms that kulusuk um yeah coolers Co you know just Google for these check them out but again really good they'll give you the RGB so it'll give you the hex hexadecimal colors you can do monochromatic you can do you know contrasting all kinds of stuff but it's a really great resource and you can kind of start there now what are your options when you go to do themes within xamarin forms so you probably are thinking about themes so you search the word theme with salmon forums and you find this salmon forms theme package right does anybody use this one – wasn't it a pain of the butt to get set up yeah way harder than it needed to be so it was a preview that the team put out many years ago and it's still preview because it turns out it really wasn't the best approach and so a lot was learned but it still sits out there just in case anybody wants to use it because we really haven't replaced it with anything I would not recommend using it I would ignore it pretend doesn't exist we may remove it at some point I've been asked hey when can we ditch this thing we have a habit especially now that we're part of Microsoft that we don't want to remove anything that anybody might have a dependency on without plenty of warning and labels and things so then you've also got Bryl can I call it growl kit but I've heard it pronounced several different ways but I guess I'll just be an ignorant American and call it rock it cuz it's like the holy holy grail right Grail Grail so that's a really great one it's super easy to use I've grabbed that myself and used it they have a really robust theming engine inside of growl and you can you can use it it is commercial so you do pay a license fee I don't know what the current arrangement is and stuff like that but in my experience it's been worth every single penny I set up a High School Robotics team my son does the robotic stuff and they wanted to build a mobile app to basically track the other teams in their competitions and and basically do scouting but but they wanted to look good so I set him up with a with a license and everything and they were just blown away they're like this is exactly what I want I want to be the cool kid and my stuff looks awesome by default so then the other way you can go about it is writing it yourself of course writing it yourself means you're gonna do a little bit of work but you own it and you know it end to end and that's another one of the reasons that we really never evolved these Ameren forms theme package is because with Styles static resources and dynamic resources you really have everything at your fingertips you need so you don't necessarily need a whole package to make it harder we make it pretty easy so I'm gonna show a demo here in a little bit and that's the method that I use dynamic resources something I picked up from our customer advisory team I was looking through some of their code and I'm like that's awesome I'll use that so we'll show that some other stuff when it comes to fonts we added this recently I think it was in reforms 4.1 we added some new named sizes and it's good to use name sizes especially comes to accessibility so I have parents that are getting a little harder in the end the eyes to see things you know and so you pick up their phone and it's like smacking you in the face with the font because it's so big so I've actually have seen some of you here with really big fonts on your phones so this is good for you too yeah but we added some new stuff James Clancy one of our engineers sent in that PR we have some additional beneficial work coming for fonts as well to make it easier to do cross-platform we have in the works the plan to essentially drop a font file into your shared your dotnet standard project oops but you know what I mean by shared right we don't we don't talk about shared in terms of the dirty shared project thing we're talking about dotnet standard projects which is nothing wrong with shared projects but just to be clear about what I mean drop that font in there and it automatically does the the pre build stuff necessary so you don't have to worry about setting up info dot P lists you don't have to worry about combining the names or figuring out how does Android reference this font versus how does iOS reference this font I mean you've all enjoyed that I'm sure and you've used that trivia with your friends to wow them how you can do custom fonts on iOS and Android but we can make it easier so that's coming as well so you use these and then when when the user goes into the accessibility settings they switch their font size they automatically get the benefit of the resize whereas a few hard-code those text sizes then it's fixed now I would say it's up to you to to use your discretion and work with your team to figure out where to use named font sizes and where to use fixed font sizes perhaps everything does it need to scale right so that's something that's at your disposal it's not an all-or-nothing thing you use it as it makes the most sense all right so here are the ingredients of what I'm going to work with a theme service essentially I'm just going to utilize the existing app resources preset styles and then I'm gonna apply dynamic styles so let's look at some code shall we that didn't take very long to get into code all right cool cool all right where is zappy okay so here's what I got do let's see what is the zoom key what's the zoom key plus plus command plus Wow look at that mm all right so come here little cursor dude this is Windows it's so hard for me you guys alright so over here in my Styles folder I have a default theme I have a dark theme and then I have a white theme which is horrible naming one should maybe be a black theme or maybe the white theme should be a light theme why I'm mixed white and dark I can only blame on lack of sleep but I'm sure you name everything perfectly the first time right naming is easy for you it's hard for me I totally get it okay so we'll look at those files just second and then I've also got some other stuff split apart here Global's Amal which brings everything together really and then I've got icons over here sizes and text is this a practice that you use you kind of if you have a lot of resources or a lot of styles to find you break them up into categories like that yeah raise your hand for me if that's something you do cool alright so it's not crazy after all and get me out of here there we go alright so here is my global zamel file and so I've got all my colors up here and maybe that could be factored that we factored out into a separate file by the way we're looking at the zappy app maybe I should pull up that edge we're all using edge now right edge on Windows it's been great I enjoy it I'm on the canary I updated all of my stuff last night not just my edge all my visual Studios all my zamarons because I'm like hey I got to talks tomorrow what's the best thing to do update everything I have no regrets all right so zappy it's up on my github that's like a tree or whatever so this app is really it's kind of you know I did the the little things playground app during the three-dose series and I really enjoyed being able to kind of battle test some of those things as they were being released it also created a nice little reference but it was blood ugly right I'm like ah we can do better than this so how about we we build a reference app so zappy is that reference app for the 4.0 series where I'm just adding features showing how we do things adding scenarios when I twitch stream we usually add a screen or something to this to show off some technique and and and enjoy ourselves so that's what this app is you can clone it you can send me PRS if you want to see stuff in the series send an issue we'll work on it and be cool alright so that's what we're working on and so I have you know your typical resource dictionary here let's see here I've got some of the flyout gradient colors because zappy has a gradient of course everything has gradients these are you seeing more gradients requests for grades yeah it's back next thing you know we'll have beveled edges and then you know cuz you make that look like a leather it's coming y'all it's coming I mean really webassembly is kind of like the second coming of Silverlight isn't it a little bit yeah and then of course I pointed this out in a previous in my last session when you have a style and you have types that derive from other types you can use this property here apply to derive types this is in particularly useful with the way that we did the aliasing for shale so in shale it's a shale item shale section and shale content that's the hierarchy but it makes a whole lot more sense to be able to say I want a flyout item I want a tab I want it to be a tab bar with multiple tabs those are alias names to these things so you can use this property to make sure your styles get to where you expect them to be cool so that's that's something to be aware of and then I've got some a bunch of converters down here which probably could be its own file too so the way the theming works is that my default theme brings all those bits together that big enough no I know how to do this no not that I said not that there we go now I know I questioned myself there we go that's big enough yeah you can see that so this is this is my default it's using merge dictionaries which is what do we ship that and three something right there was like a 2/5 256 thing it's been so many years platform keeps maturing and emerging is awesome so this brings everything together and then I have my dark theme a my and my white theme so my white theme is based on the default theme so it it has a base source of that default theme but then it comes in and it customizes these particular colors now here's where the dynamic resources thing comes in you have to give these guys a key right so that I can reference these colors elsewhere and so let's go look at where that background color is being used in my global so background color no not that background color the other one search here we go so for my visual element background style I'm using it here uses the dynamic resource so what the dynamic resource is going to do for you it has awareness of basically on property changed right so when that color or anything that uses this color changes it's going to make sure that that change is reflected immediately so similarly down here inside of I believe it's our text yep so for my text headline the color being used is my text primary color so everything in my white theme is using essentially dark text on a white background right and as you would expect my dark theme is basically the reverse dark background and then light text so we take a look at how this looks I don't know I think I probably did redeploy this guy go ahead and do a build and deploy and then we'll have hot reload going and I've got a couple of other cool things to share with you thereafter but I didn't make any changes so this build shouldn't take you know till tomorrow I have noticed I've been testing some some hot internal builds oh don't you hate that when you like hit the home button on it just as it starts to launch and you're like I just killed the thing I'm deploying just me no oh what did I do isn't this the kind of stuff Maddy ran into yesterday where everything was working what what that's a lie don't deny I stand on the customer inter that's so weird like I literally have done nothing there that's really nothing all right so what do you do when that happens update how about we do a clean you know what would be interesting where's uh ninja Tara will take a look not that one this one what changed let's see here project project project designer ABS ammo you guys screw something up in the app sample let's look at it real quick and then we'll try to rebuild it one more time and if that doesn't work we'll move on because I have some other really sweet demos that are even better I don't see any problems I'm sure your stuff goes smoothly every single time right yeah so uh yeah so this is essentially going to give me the ability to swap themes and I'm going to be able to go into my settings panel and see my different themes change them and see my screen update immediately you can do it little Android now it's taken a long time to build right after you do that clean like what's up with that well while that's going because I can always come back to it I mean that demo is gonna have to work because it really has like all the best demos in it so let's talk for a minute about gradients and shapes while that's going since gradients are becoming so stinkin popular how do you how can you do this well you've got some options oh look there's my little emulator you can't see my emulator because it's on the other screen but it's so tiny all right we're back here we go exit the slide show you can do it all right you see that you can see that let's go back to the code so you can see it's running all right so I created a page within zappy called a style guide so I all my colors and I throw them into this collection view and so I have a collection view that is what four four rows spanning and then it goes across so collection view is still in preview but it's in 4.1 stable so if you choose to use it it's available to you I would love to know how you feel about us doing features like that basically baking them and working on them and adding features to them while they are in stable releases but putting them behind flags so it's we're kind of looking for you to tell us how things are going so not right now don't everybody like stand up and go to the microphone but all right so in this app you see I have a gradient which we're going to talk about in just a second but then I forgot those visual settings up here and so I've got this light and dark switcher so this is actually and I'm gonna add other themes as well fuchsia has been recommended as a theme style I don't know why but squeeky really likes has any big on to sui key sessions this week I hope she's yeah she's great right so she loves the fuchsia all right so there's my dark there's my light right light bright light right yeah so I go dark I close this guy you can see that my screen back here is now dark as well right so the way in which that switch is occurring if we go to do to my settings view model here so I have a change theme command it's gonna come up the selected theme is bound to the selected item of this you see my cursor yeah again so the light and dark that's actually a collection view it's a horizontal sliding collection view in our fact well and I'll do that next so yeah so I'm listening to the selected theme as the selected item and then based on that I'm going to new up my dark theme or my white theme and apply it to my apt current resources and you see how fast that worked and you see that I don't have a small amount of resources in there it's quite a bit of stuff so that works out really really well now that's one way in which you can do it you can certainly try many other ways to do it all this code is up on my github try it out I would love to know what you think yeah so I thought it was super easy it was much easier than I thought it was going to be and I'm I feel like now I'm a themeing pro I feel like I've got it nobody can stop me now fuchsias coming the fuchsia is now oh boy oh boy alright so let's talk about that gradient so how can we do gradients so native code of course skia sharp you have a canvas you can draw your gradients on that or the pancake view anybody familiar with the pancake view makes me hungry every time I talk about it so Stephen Thorson from the Netherlands who is not here as we have mentioned several times no shame to you Stephen for not being here let's all have an infomercial Stephen right now Stephen I know you're crying at home right now that you weren't able to make it to the Sam dev summit but you know what you've done wrong I think he's on family vacation or something anyway okay see I'm an equal-opportunity picker owner of people's so those are options that you can use pancake view is really almost a glorified frame essentially it's like frame on steroids if you take a look at it but very useful and and could be something you want to use but how would you do it if you wanted to do it yourself well oh I'm sorry we're not talking about gradients anymore but shapes you have a lot of options for shapes we're not gonna spend much time on shapes really skia sharp for drawing is kind of your best go to cross platform for that very powerful quite performant I've seen some examples from you that are pretty mind-blowing I don't know what this flutter business is all about you can do it in c-sharp you can do Askia sharp it's gorgeous animation is super easy so but you can use bitmaps that's something that gets overlooked a lot right if you have a design and it has like this really interesting shape to it if you go look at the visual challenge look what Ryan Davis did on the Qantas app up in the header it has this little notch with a nice curve to it it's really just an image in the background so sometimes when you look at a visual thing and you're like how am I going to achieve that that effect or that layout or I don't have a control that does exactly that maybe it's not as hard as you think you know maybe the second thought you should have is how can i how can I do it for real but how can I fake it like if I were gonna fake it and just make it look like it is right then how could I do that and sometimes it's as simple as just embedding an image thinking it's okay users don't know like oh did he really draw that if the developer didn't draw that this add this crap you know that's not how it goes they don't know all right vector image is of course SVG's there are different controls you can load your SPG's into and then I think I dimension drawing skia sharp or native code you can draw in native code so gradients and demos demos demos demos cool so let's look at well I'll show you first how I do the gradient and this um flyout okay so this is the shell renderer so if we go down here I am doing Android so let's look at the Android project I've got my renderers and I've got my zappy shell renderer right you so down here when I get my she'll fly out content render me ok can we see that cool so I get it I create a gradient drawable I grab notice I grab my colors cuz I've got my app theme up here this is a dependency injection this is coming from my resources yeah I showed you and my resources my global file that I had a gradient start and end color I kind of just mention it in passing and so I get my dependency for my service so that down here when I set this I can set it to colors that have been established in my shared code right and then the I was just talking to somebody about this we use the coordinator view which is the view that allows us to do some really interesting animations if you've seen any hero animations or some of the more advanced material design based animations a lot of them are based on the coordinator view and she'll uses it for quite a bit of the work which is why I have been encouraging people to use shell because it's the basis for us to be able to add those things more easily you know I know that transitions can be a huge pain to do otherwise so you certainly don't have to use shell I don't want to send you the message that if you don't use shell you are somehow in the Dark Ages you're good you you love your navigation pages your tab pages your master detail pages all that's still good they're not going anywhere you know it's not Toy Story they're not being sent to the you know orphanage or whatever what was it wasn't an orphan it's like a daycare thing right no no not the new movie this is like three the really sad one yeah the new ones like supposed to be good I'm sure it's still sad I heard people cried I won't cry there will be no tears coming from these eyes as far as you know all right this is bananas all right so so yeah so I get the coordinator layout I set the background to it here and here I set this to transparent because there's some other things laying over the top of it with the app bar so I want to make sure that my gradient goes all the way from the bottom to the top because up here at the top some of that is actually at that bar yeah so that's pretty much it and that's how I'm getting my gradient so I'm using native code there to do that now let's look at another example and this one is from Cyril Cyril is in France Paris he did a live stream with me on Twitch where he built a login screen so I have another version of zappy open here where he created a gradient button view or a gradient background view and a gradient button so if we look at what he did here and I'll run this demo shortly so in the background of the grid he has this custom control the gradient view and he's grabbing that starting that end style just like I mentioned from the static resources and putting it in here and so if we look at what that gradient View is it is as you would expect a custom renderer so when you come down to the Android code or the iOS code all it does is draws a gradient and sends it back so here's the Android code for the gradient view in this case it's a visual visual element renderer and it's going to create a linear gradient do the painting and then draw it on a canvas and then you can do the same thing in a button here so I can have a button that's a custom button not a real button it's a fake button and the only difference between a fake button and a real button is what you call it they're still buttons and you can declare them all as interactive elements and you get all the accessibility benefits that you should so you can use it here as well so if we run this watch it throw an error like the last one I dare you to throw an error you ever talk to your code like that I'd dare you it's like a person that's mean seeing people just stick you late at their screens you know what that gesture is all right so here come so one of the things I've been talking to oh I know there is an error it is the same error look at that unbelievable so how do you file a bug for that I mean the bug would basically say I ran it in my hotel room I closed the lid I went downstairs I waited about two hours I plugged the machine back in and then it didn't work I don't know don't know all right I'm cleaning isn't that what I did last time I just cleaned and restarted right I didn't restart I D I didn't do the full dance I did like I I just did like a sir I was gonna make like a dance joke like I didn't do the full Mambo I did like you know breakdance something I remember everything does anybody remember breaking breaking from the 80s all of them man all of them is that how you hurt your foot that's what you claimed but you may have been trying to reclaim the glory days you know all right we're still moving we haven't broken yet we're good this just gives us more time to talk about these things this is helpful so far are these interesting things things that challenges that you may have faced recently or in the future we will face in the future speaking of the future has anybody seen dark dark on Netflix I know it looks like a child abduction thing based on like the the best not what it's about it's like a it's like a sci-fi thing it's all in German you can work on your German alright there we go there we go come on keep it up for visual studio visual studio earning its money oh my gosh alright so there's a couple of cool things happening here of course you see the gradients that I mentioned a little bit of a gradient in the button and then you got this nice animation transition happening here so that is not a real segment to control it's a fake segment consent to control and the only difference between a real segment to control and a thig segmented control is what you call it when your boss says oh it's a segment control you see yeah it is what's it look like yeah so some cool transitions happening there and you notice the octa cat's tail waving oh that's Lottie so la dia is a library from Airbnb that they open sourced and you can use what is it Adobe is after yeah After Effects and with a little extension that you can install and you can output your animations I'm very sad that they actually don't allow you to do that from Adobe Flash or animate or whatever they call it now because that'd be way easier than After Effects but whatever yeah and so Martin Van Dyke who was running around here he may still be around here did the c-sharp implementation and he maintains the package for that so go thank him for the octocat cool so gradient school and you see that I've got material working here and everything else as well and I'll give you a quick look at how this animation works this is also up on my github but I need to merge this PR which is why it's a separate project right now because I only got it this morning which is totally fine all right so the login page is just your straightforward zamel as you would expect I can make that a little bit bigger I can get rid of this do this no not that anybody ever accidentally hit that button right there don't hit that yeah so really nothing fancy happening here you see that there are those animations but those are not being done in zamel I'm going to show you how to do them in zamel in a minute so if we look at the back and the selector option taps this is the tap event on this guy here this is what's triggering the animations it's doing some translations so translate to is just a helper animation method it's still using animation ap is on the back end you also have fade too and things like that and then you can do some await tasks and group some animations so it does both the translation and the fade too at the same time right and then of course you can manage some visibility and things like that so you can do your animation this way certainly nothing wrong with it but I'm also going to show you how you can do it in sam'l all right cool so that's gradients and shapes to dududu parallax all right I think this is my last or second to last demo I actually have an extra demo so we'll see we'll see all right so parallax so here's what's happening with parallax I kind of did an exploded view of what I'm going to show you as a matter of fact why don't know it's already here let's go ahead and build it and run it so that we don't run into the same problem we had previously this is the login page example I don't need that let's close it and if I come over here to done build run go alright oh you didn't see any of that that's okay just building building and running so what you have is you have different layers of things and grid is a really great way to kind of have different layers and then as things need to to span rows or span columns you use the span so a row span call span that sort of thing the wrong one sorry and so stop why did you run that code that's not the right code so weird I mean it's the same project but they're running in two different directories but I guess it does generate the same binary so that's really weird all right sorry let me clean this real quick get it down build clean clean clean all clean it all not like my kids don't just shove things in the closet clean it all cool all right so what's going to happen is we're going to move the list of content up but we're gonna move the header the background image at a different rate from the content that the users interacting with that creates the parallax effect right so in order to do that we need to be able to listen to the scroll data off of the thing I'm interacting with right and so traditionally that's what has caused problems for developers in xamarin forms is that not all things that scroll and xamarin forms tell you they're scrolling now scroll view does have a non scrolled method or an event that will dispatch as the user Scrolls so you can handle that and code behind but I don't want to do that in code behind because Zambo hot reload is reloading zamel it's not reloading code behind I want to stay in zamel as much as possible right so that I get the full benefit of reloading so what happens here it's gonna do that right now that little bar there is representative of the navigation bar and then we also are gonna do a fake navigation bar and once you see the animation you'll know why so here are the ingredients to make this happen I need to have some kind of scroll position or scroll percentage off of which I can trigger my other enemy I need to have bindings so that I can do it all and react to it appropriately in zamel and then I use liberally value converters so that I can apply the different effects that I want to and really the math is pretty easy on this stuff to get something to do something at a different rate than something else you take the percentage of the scroll times the max distance of the scroll times the factor right we all knew this it's just multiplied some things together and see what happens it's really what it all comes down to your boss is like oh did you use a real parallax algorithm for that or a fake algorithm depends on what you call it so you can mess around with these all you want to but really that's that's as simple as it gets so let's talk for a minute about transitions because I want to kind of do these demos all together so I'm not talking specifically about transitions from from one page to another page but I'm talking about from state to state so there's a nice library again from Steven Lewis and Steven um I don't know what you did that you couldn't be here but dude he's here in spirit but you see this when page content loads have some kind of loading indicator tell the user you're doing something and even better than just having a spinner why not give them that experience of seeing the content like in a fake state and then replace it right it's something you see a lot of apps doing these days I'm told Facebook does it you know I don't really use Facebook very much but I've seen it happen so it tells people something happens communicates what's happening animations communicate things and when you do an animation willy nilly or a transition willy nilly just because it might look cool you may be sending a wrong message to somebody and you may be frustrating them because it might take too long and they just want to get from point A to point B right so when should you use it I think when changing state is a great time updating the data let people know something's happening but don't give them a blank screen never give them a blank screen right if you're gonna have an empty view which collectionview supports MTV as a template so that's awesome list if you didn't have that that's a great place to put some indication to the user of what's happening or instructions about what they need to do to populate that content right short running processes are really good to use for transitions if you have a long-running process you might want to think closely about how you're handling that and then validation any kind of form validation that's a great time to practice your animation transition skills so a couple of do's and dont's some of these you know kind of say the same thing but I thought maybe this would be a good way to kind of express it you know don't be gratuitous don't make your animation a hindrance like if I have to wait for an animation to complete to get to where I'm going that's probably not the best place for it if you try to transition more than one thing at a time you run the risk of overwhelming the device and then they just become super choppy if you've ever used the flyout menu and you've noticed maybe on Android in particular the opening and closing the flyout menu while you're changing content makes it chopped and it doesn't go smoothly it's because it's doing too many things at one time so what you can do is you can set a delay on one of those things maybe let the let the menu close first then load the content to the page or vice versa then that's a way to get around that but be careful about trying to do too much at once make it reversible trigger it responds to a user action these things make it delightful right when the user feels like it's a real thing in their hands that's responding to their touch it's very delightful or responding to their voice or responding to their location it knows it's aware of where they are and what they're doing that's that's really delightful for people all right so let's look at let's look at the demo cool we're back in the right app so what you didn't see the last time was when I built it and ran it it was still that login screen which was super weird because that wasn't even the code that I was building from cool so I have a page here in my scenarios called product details please don't crash suite so you see that I've got my loading animation there and then hopefully if the Internet is behaving I'm gonna get an image oh come on you can do it take two it's trying to load from the Internet's do we have internets come on you can do it looks much better with my mom that was awesome I mean I felt uplifted as that music was happening didn't you all right well I don't know why my guitars not loading let's say well let's look at this animal real quick we've got hot reload going we can take a moment to look at this amel all right so I have a lot of sambal here y'all because like I said I was trying to stay in zamel as much as possible to benefit from hot reload and not go other places okay so first thing you'll probably notice is holy crap there's a lot of xmlns that's all namespaces I got a lot of files all over the place like I said I'm using this easy loading thing this is my page for which I need to bind to something for some reason now I remember why I have it this but it must be really important in this particular case I'm I'm I'm hiding some shell stuff because I just don't want it here for the purposes of this demo and then of course I'm forcing a couple of styles here for the purposes of the demo too I am setting my binding context here in the sample I don't know if this is a common practice for you I'm fine this works out quite well with shell and shell is kind of designed with this pattern in mind that you put off I shouldn't talk about shell too much Shane has a session later today on shell go see Shane's talk on shell it's gonna be great everybody planning on going to Shane's talk right I think it's right here should be right here all right so of course in my resources I have basically nothing except for some animations I have declared I am using Zam animation from Javier Suarez Ruiz he's on the via SMAC team and he's in Spain so he does some really nice examples online if you ever go look him up I think he has xamarin awesome or some github like that I know we've got a couple of those nowadays so check that out some really good examples so I've got a couple of pre-built animations here this one's a carousel fade-out this is a navbar fade-out carousel fade in fake Navigant call it a fake navbar I should be like Dave's navbar since like that's not fake it's real so then of course I have my grid and then the image at the top is this guy right here this carousel view so don't don't where are my images they're right here what's wrong with you image look at that awesome URL I know I just look I'm in love with guitars right now I can't control my keyboard I saw this picture this guitar I'm like that's what I'm gonna use in my demo let's just make sure the image even exists it does exist what's your problem see if I can bump it oh yeah man Android bites again let's do it I'm not scared let's update Visual Studio right now all right oh no I'm not gonna do that I do have a little glitch where it doesn't like to start the emulator from visual studio right now oh no I don't wanna know I know I also have a really weird glitch where hyper-v is actually slower than hax um does anybody have that going on is that your experience cool all right restarting the emulator this is why I like doing live-streaming it's much more low-key and your psychiatrist uh good I don't have to be up here being all pretty for you all right oh it started that was super fast is it actually alive or is it frozen cool it is alive all right redeploy so now you're saying that I'm gonna get my image who's who says I'm gonna get an image a couple people hesitantly saying yes one one very confident person most of you are like I think maybe that was fast – I wasn't in pain I'm used to this going a lot slower alright also why I enjoy doing live streaming in live coding because uh you all get to help me alright alright cool so here's what's happening I'll scroll a little bit slower you see the parallax going on there with the with the yeah and then you see that I have a nav bar and a nav bar and as I get up here to the top the image fades out boom and then my nav bar fades in so you know those here's here's the hard way to do that nav bar transition ok the hard way is to say I'm going to do all that work I'm only gonna have one back button I'm gonna have one zoom button I'm gonna have one Shopping Cart button I'm gonna have one background and I'm gonna do all those translations myself that's the hard way the easy way is to say I'm gonna have the first state and then I'm just going to create another nav bar and fade it in over the top of it and they're all going to do the same thing it's trust me much easier okay so that's actually what's happening there and basically as I scroll up I get to a certain point and it triggers that animation so I'm using event triggers and I'm using data triggers and I'm also using bindings so for the for the parallax scroll since that's what I'm supposed to be talking about I have everything inside of a scroller view you can see that the scroller view is a custom view it's just a scroll view on which I have exposed the scroll property because up here on the carousel which is the which is the Guitar Center you see that I am I have no not the data trigger or the translation I have this code Here I am translating the Y position of the carousel so as I scroll up my carousel moves my guitar moves right so I am binding to a scroll percentage which is just a property I exposed off of the scroll scroller view and then again I have a converter here and I'm using this this is a nice little trick that Stephane showed me maybe it's not trick I'm just using the parameters I have the ability because sometimes you want to pass more than one parameter right so I'm just passing that all as a string with a semi colon delimiter and I can pass as much as I want right so I'm passing a factor of what I wanted to do a minimum value a maximum value whether or not it is true or false I don't remember what that property was for and then I don't even remember what that one was for so but the thing is is that because that's all there now I don't have to go back and forth the c-sharp change anything I don't have to go back to code behind a change thing I can just tweak these values and reload reload reload so you know I could take this and I can say okay we're gonna do do just one and save that reload the page and then now now it's going the wrong direction right so it's like oh Dave you're a moron you're gonna have to rebuild this whole thing no we shall not rebuild that's your goal your whole goal is a developer now is to stop rebuilding so what can I possibly do to make this thing do something different so now reloads it reload so sometimes you don't even know for real it'll look at that now I was like I'm chasing it away you know and that's not the effect you want either is it so I can just keep you know tweaking this and I found that the negative 10 factor seems to work out pretty well and now I get my nice transition now another thing you'll notice is that I don't you can see this but you see how it went to white but my background is actually like a gray color I actually have another box view sitting behind the carousel view so I can fade out the carousel view but keep it on a white background so does some nice things there so quite a few things happening here now I didn't really show you how the easy loading for the screen works so to go back real quick product details that part right there I'll show you how that works real quick yeah nah man I'm not quitting we're going we're going for it we're going for it do you I mean I'm Kraemer up here man we are going to the end of the line no I'm just kidding I'm wrapping up I'm wrapping this is the last demo the bonus demo no it's all good just give each other a hug I'd be fine so it's at Brandon Oh Brandon you trying to boo me off the stage come on man no I'm just kidding I'm almost I'm so really all you do is you do this you provide a loading template now I don't know the performance implications so your mileage may vary but you pretty much just fake out the content that you're going to be displaying okay and then you need to bind this attached property is loading to something so I haven't is busy right now you probably all have it is busy in your view models so that's pretty much it this code is all up on my github there's one more thing I'll point you to it's in my slides because I think this is a really great resource to check out do this display that action so Kim Philpott's who works on MS Learn formerly xamarin University has been twitch streaming his examples this is one that he did I think it's crazy good I mean you do this kind of stuff your boss is gonna give you a raise seriously look at that so check his stuff out this demo is up on his github as well as well as several others animation can really be a nice touch on top of everything but you know there's a lot of other basic things you can take care of so anyway thank you so much for your time for listen to my jokes hope you learned something [Applause] everybody stay

1 Comment

One Reply to “Let’s Make Crazy Beautiful UI With Xamarin.Forms | Xamarin Developer Summit”

  1. Luke Vincent says:

    A whole hour and all we get to see is a media player ? Nope, I did not see anything like in the title.

Leave a Comment

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