Pixel-Perfect, Customizable Popups for Xamarin.Forms with Rg.Plugins.Popup

the rg.plugins.popup library has been a fundamental library in the xamarin forms ecosystem to build pop-ups which look and act the same all across different platforms by just using xamarin forms elements let's go check out how to build it into your own apps here we're looking at the end result which is not very impressive because it's just one button but if we press that button we can show the pop-up and this if you won't believe it this is a stack layout with a background color and just a close button and we've given it a little width and height now this by itself is not very impressive but if you think that this is xamarin forms elements and you can just lay out it like any xamarin forms page with all the elements that are there then you can build like really great pop-ups if you are a better designer than me and that's not a really hard thing to do so we are going to see how to show this pop-up what are your means of navigation um how do you actually do something whenever you click this background and did you subscribe to my channel yet all things that we're going to see in this video now before i'm going to show you how to implement this pop-up into your own application um let's have a quick look first at the github repository right here so this is created by a person that goes by the nickname of rotor games you can see it here in the top left his real name is kirill from russia so kirill thank you so much for putting this together and putting it out there for the community to use and and all your effort that you're putting into this because it is really a great plug-in so thank you for all of that um and i think inspired by his nickname rotor games rg i think that's kind of the same thing rg.plugins.popup that is the thing that we're talking about in this video now the reason for showing you this github repository is that there is a couple of very good documentation pages that i want to point you to which has a lot of information on how to get started yourself so i try to keep my video short and concise so i'm not going to be able to put everything in this video as much as i'd wanted to but if you have anything that you want to see more in depth please let me know down in the comments of course as always and i'll be sure to follow up with something there here you can find all the code there's also a folder sample so i think there's an app with a lot of samples in there as well that you can you know maybe cheat a little bit and look at how they're doing it so you can just copy and paste some some concepts from there which is really nice and then if we scroll down we will see a description of what's in here so already there's here something we must initialize this plugin that's something that we're about to see where you can get it on nuget we'll see that in a little bit as well um here is a screenshot on three different platforms i actually don't know what the left one is here maybe that's android as well but this is android ios and android again but here you can see the things that you can create with this so this kind of follows more the pattern of the community toolkit pop-ups the xamarin community toolkit pop-ups i have a video on that as well and not so much the acr popups no acr user dialogues that's the right name which i got a video on as well near the end of the video i'll go into a little bit when to choose which pop-up but you know there they just have a different approach because the acr user dialogues shows like the native kind of dialog boxes and this has a fully customizable pop-up which lets you um create it with xamarin forms components basically so that is kind of like the main difference but you know choose whatever you like and the supported platforms that is crazy android ios uwp tizen wpf and mac os so this kind of mirrors all the supported platforms in xamarin forms today that's amazing so in here this is kind of the important bit documentation you can find all descriptions of getting started how to use troubleshooting and then the wiki so the two things that i want to point out here is the getting started and the how to use so let's start with the getting started i will go over this in a little bit but just for ios so for android find out the bits for yourself um but you have to do a little bit of initialization so in your app delegate we have to go and add this little init line right here for android kind of like the same thing but now in your main activity.cs for uwp you need to do something as well mac os tizen same thing but here is for android this is a big note the android back button if you want the back button to also properly work with these pop-ups then you have to do this little on back pressed override in your main activity so that the on back pressed event will be passed along to the popups and it will catch that event and it will respond accordingly basically so here there is some more information about that and you can do something or you can do something else so this is this is kind of the important bit for the initialization i will show it for ios but you have to figure out the rest for the back button if you can't figure it out let me know in the comments and i'll be sure to follow up with that comment and the other thing is this is the getting started and this is kind of like the the how to use it so this shows us the pop-up page again i'm going to go over this at least in a very basic example but you can see that this has a lot of properties and events and all kinds of things so on the pop-up page which is a page that you have to create to actually show the pop-up it has an event for when the background is clicked you can do stuff with animations do you actually want to close so that's kind of like the light dismiss close whenever the background is clicked system padding which is interesting as well i think that is what's explained here so do you want to take into account the system padding yes or no or you know do you want to just push the pop-up over the full screen the actual actual full screen which is maybe not the right thing to do from a user perspective but i'll leave that up to you and here you have an implementation example you can see it has some animations it can do a stack layout let's just let's just actually see all of this in action let's just switch over to visual studio and see how to implement this for your app so now i've switched over to visual studio for mac 2019 you can see it here on the left a final new xamarin forms application is running on the right on ios 15 xcode 13 all the latest and greatest in fact it's so late and great that the hot reload is not working so we have a fix for it already i hope it is out by the time that you're seeing this but don't be afraid whenever i make some changes in example and you don't see it showing up it's all part of the show but actually before i do anything here let me install these great plugin first so let's go over to our solution explorer and i'm going to right click on the solution and i'm going to do manage new good packages i'm going to search for rg.plugins.popup and here it is 5 million downloads almost which is really really a great achievement and i think it has been around for a long long time so that is really great so you have to add this package and you have to install this on all three of your projects so let me do this right now click ok so that it's doing that while i'm talking here and we need to do that because you know it has a part implemented on the shared project but also a part implemented on the platform project that is also why we need to do the initialization on ios and android and all the platforms that you might have in here here it will open a readme for each time it installs so for the project it will guide you to the project site and also to the wiki and the get started links that i just talked about so don't worry if you don't have the links handy it will come up whenever you install the packages here we go the packages are done installing um so let's go over to that initialization code so let's go to our solution first our ios project and go to the app delegate and what you want to do then i don't think it really matters if you do it before or after the examine forms in it but let's do it before that was how it was in the documentation so here we can say rg plugins dot popup dot popup dot init there we go so just add that line in here i think it's exactly the same for android but be sure to check out the documentation i'll make sure to whenever i put this code on the sample repository you can find the link in the video description that it will work for android as well so i will make sure of that but i'm not going to show you all of that in this video i'm just going to show you this for ios um so with that init line in here that's all we need to do to you know prepare this plugin for use so now let's go over to our mainpage.example we're going to update our little title right here rg.plugins.popup sample and i'm going to remove all the labels right here and just going to add one button actually one button with a text of show pop-up just to show you how to get started with all of this let's add a clicked handler generate a new one and let's go over to our main page well actually let's not over go over to our main page code behind let's go over to create a new pop-up page because we just need to create a new example page or if you like to do it in code that's of course possible as well just create a new file with a specific rg plugins pop-up pop-up page so let's do that right now let's go over to our solution right click on our shared project this time and i'm going to add a new file and in the forms category here i'm going to choose a forms content page and i'm going to name this my pop up page new and it should present us with a new page right here we land in the code one but we can also go to the example one so let's do that first and what you need to do here is actually i'm just going to type it here so that the intellisense can fix it for us pages and then we're going to say pop-up page and let's fix this bottom one here for some reason visual studio doesn't do that for me and whenever we do we can see the little light bulb coming up here and we can say that it wants to add this xml namespace with the url rotor game so this is kind of like a shorthand notation for another way of writing the full namespace to this pop-up page let's format this a little bit nicely and i'm going to remove this content right here now whenever we do this we also need to make sure that we update the code behind file for this so let's go over to our mypopuppage.xml.cs and we should change this content page to be a rg.plugins.popup.pages.popup page so now it's all the same it will give me red squigglies i think it's because this code is still running so actually let me let me just stop running it right now so we can see that this might be going away and that it knows that this is actually the the same pop-up page and you can see here that we can start using the properties that we saw on the documentation page just a little moment ago so you could say background click but it also has the background click command so you can also use this with your mvvm scenarios which is really really nice and we can also say like close when background is clicked let's let's just save that for in a minute we're going to see that as well what i'm going to do first is here in this pop-up page as content you can just add anything that you would normally add in regular page pages of xamarin forms so we can just add this stack layout here and let's center it in the middle so let's say horizontal option center let's make this vertical option center let's give this a little background color of white so that we can see where it is and let's add a button in here so we can actually close the pop-up as well so close and add a clicked handler to it that we are generating so now we have a little very very little pop-up page um to to work with right so this should show us a little white box with a button as a pop-up so before i implement the close button let's go over to our main page actually our main page code behind so let's go to our solution explorer main page example.cs we still have our button clicked handler and here is where we're going to show our popup now this is going to be interesting because a pop-up is not something that is known in xamarin forms well it is by multiple ways right now but you know this one isn't so there is two ways to do this again check the documentation because the recommended way is different than what i'm going to show you here well actually let me show you the recommended one as well so we have rg.plugins.popup and we have services.popup navigation and this has an instance so this is kind of like a static instance of their own navigation service that's in here and you can access all these kinds of events with popped or popping you can access the pop-up stack and you can push async so you can push async a new pop-up page in here whenever something is pushed or pushing you can remove a page all kinds of things that you can do here but what they also did is create a extension on the regular xamarin forms navigation so that is really nice as well this one is more recommended in your mvvm scenarios because this is implemented as an interface so you can use this also with dependency injection which is great whenever you want to use this from your view models and whatnot but if you're just going to use this from a code behind so what i'm going to do for this sample right now is then you can just go to navigation which is the default xamarin forms navigation implementation and we can say push popup now you see that it doesn't recommend me that with intellisense because we need to add this as well actually we need to do push async here we go async and then it will recommend us to do using rg plugins pop-up extensions because this is implemented as an extension method so they created a couple of extension methods on our navigation object from xamarin forms that will allow us to work with pop-ups as well so that will make it really easy and now i can just say new my pop-up page and by default it's animated like we've seen you can do a lot of stuff with animations but you can disable it just as well why isn't this happy yet because it doesn't think that this is a pop-up page from the rg plugins i'm very much sure it is so i'm going to ignore this for now and see whenever we run this actually let us run this and see if this actually works and i think then the squigglies will go away it rebuilds and it will figure out that my pages are correctly so our app should be coming back up right now and whenever i click the button we should now see our pop-up coming up so let's try that show pop-up and here is our very very tiny pop-up it is just the size of our close button but we have a pop-up and if i close on the background and the background is pretty big by now you can see it closes as well and we didn't implement the close button yet so that doesn't really work but now we've created our first pop-up now let's see what more we can do so let's go back to our pop-up page example and let me enable that background collectible background click might be nice let's do something new here and also implement the background so close when background is clicked let's set that to false to see what we're actually doing and then let's implement that button click for our close button well before we do that let me make this pop-up a little bit bigger because this just sizes by the elements that you put on it so if we take this stack layout and we say with request and we make that 200 and we make the height request and we make that i don't know let's make it square 200 as well then we should see a little bit bigger pop-up by now as well so um you know it looks really nice with like the the transparent background and the backdrop uh maybe you can customize that as well if that's something that you want to know please let me know down in the comments um so and you can also i think we saw in like the screenshot from way before when we started the video you can have this little close button on one of the the corners because that's all stuff that you can do with the layouts here and rounded corners on your pop-up so you can really design this any way you like and it will work then cross-platform across all the platforms that are supported so that's really great okay so let's go to our mypopup page.example.css and we got a couple of things now so the button click this is again same thing with the navigation we can say now i guess pop push no pop pop up okay pop pop up async this is this is a funny name like this let's see if intellisense things that's correct yes using rg plugins popup.extensions that's another extension method so we can just pop it like this and on the background click let's what are we going to do there let's just do display alert just to see that that's actually working and let's say um what are we going to type first is the message it's the title okay stop did you subscribe yet okay maybe you want to subscribe to my channel this is your sign to do it right now click that subscribe button if you haven't done so already um so whenever you click on the background it will show a little pop-up box right now and that might not seem very useful to display an alert but you can whenever you have maybe some entry form in this pop-up and someone clicks outside of it or taps outside of it you might want to notify them like hey you have entered data are you sure you really want to close this yes or no and then you can actually close it with the pop pop-up async so that's all scenarios that you can create with this now let's do show pop-up it's much bigger by now you can see that so we have a bigger pop-up we can just do that by setting the size and it will follow all the kind of like visual restraints that are also in xamarin forms element we can do the close and it closes right here you can see maybe it doesn't translate well on this recording but you can see that it animates nicely as well and whenever we click now outside it doesn't actually hide but it will show us this dialogue with did you subscribe yet so if you haven't done so one minute ago then now is the time to do so so it doesn't close whenever we click on that background but we can trigger actions whenever we do click on that background so that is very nice to have as well this is kind of like the basic usage of how to get started with rg.plugins.popup now as we've seen in the beginning there is much more to discover here so i've i've already repeated it a couple of times so please let me know in the comments if there is some specific thing that you'd like to see here or maybe some advanced scenarios and i'll be sure to look into that as well i also promised you at the beginning that i would talk a little bit about when to choose what pop-up plug-in that's a lot of p's but you know because there is roughly a couple of choices just use the built-in forms once um use the xamarin community toolkit pop-ups which is pretty similar to this i think the rg plugins has some more features by now but you know the concept is pretty much the same or acr user dialogues right so that's kind of like the three choices and i think the choice between the xamarin community 2 kit and this rg plugins and the acr user dialogs is kind of clear because the acr user dialogs are just the native implementations of the dialogues it's not even really pop-ups right it's all about semantics here but um it's really just showing native dialogues mostly so that will translate into how an alert box should look on ios and android um and it's it's just very simple like the thing i just did with display alert but then with a lot more options so it's really a great thing but it does conceptual a little bit different than the other plugins that i mentioned so when to choose the examine community toolkit or when to choose the rg plugins pop-up that's basically up to you which api do you like more which library has the features that you're actually looking for so you know just try them out both do a little spike in your development process and find out which one works better for you that's kind of the way and you know the exam community took it is backed by microsoft it will get um support for don and maui in the near future so um you know for the rg plugins i hope it will definitely get support for don and maui as well that would be really awesome because this is a amazing product but who knows so you know that's all considerations that you could take into account when choosing a library thank you so much for watching again one of my videos please click that like button if you actually like this video so it will be shared to other people as well and they can enjoy this little video of mine please click that subscribe button if you haven't done so already if you like what you see and then next time also if you click that little bell um it will be brought to you this content instead of you having to go out and look for it so subscribe to my channel and it will just be there and for the rest i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 2,574

Keywords: xamarin forms, xamarin forms popup with entry, xamarin forms popup, xamarin forms modal popup, xamarin forms custom popup, xamarin forms ui design, xamarin forms 5, xamarin forms popup page, xamarin forms popup modal, xamarin forms popup view, xamarin forms popup dialog, rg.plugins.popup xamarin forms, rg popup xamarin forms, xamarin forms popup layout, xamarin forms custom popup view, Xamarin Forms 101, popup in xamarin forms, xamarin tutorial for beginners, Rg.Plugins.Popup

Id: Y-uAHgf0VXs

Length: 21min 14sec (1274 seconds)

Published: Thu Oct 14 2021