Pixel-Perfect, Customizable Popups for Xamarin.Forms with Rg.Plugins.Popup
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- The Rg.Plugins.Popup library has been around for a long time and with good reason: it’s amazing! This allows you to create pixel-perfect, fully customizable popups for your Xamarin.Forms apps. Because it uses Forms elements, it will look and feel exactly the same on each supported platform. In this video we will see how to get started and as a bonus I talk about when to choose what popup plugin! You don’t want to miss this!
💝 Join this channel to get access to perks:
th-cam.com/channels/ral.html...
🛑 Don't forget to subscribe to my channel for more cool content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🔗 Links
Sample code repo: github.com/jfversluis/XFRgPop...
Rg.Plugins.Popup Repo: github.com/rotorgames/Rg.Plug...
⏱ Timestamps
00:00 - Intro
00:18 - Inspect End Result
01:04 - Rg.Plugins.Popup Overview
03:42 - Important Initialization and Android Not
05:00 - PopupPage API Overview
06:00 - Implement Rg.Plugins.Popup
06:33 - Install NuGet Package
07:40 - Add Initialization Code
08:31 - Implement Sample UI
09:05 - Add New PopupPage
12:03 - PopupPage Navigation/Show Popup
14:30 - Our First Popup On Screen
15:06 - Customize Popup Look and Feel
18:37 - Outro
18:50 - When to Choose What Popup Plugin?
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#popup #dialog #xamarinforms #rgpluginspopups - วิทยาศาสตร์และเทคโนโลยี
![แฉ [2/4] 11 ก.ค. 67 ‘ขวัญ อุษามณี’ เผยความจริง 16 ปีที่แล้วเกิดอะไรขึ้น? | GMM25](http://i.ytimg.com/vi/K4pXnUiObbk/mqdefault.jpg)
Been using this with my tips whenever the user opens the app. Great package I should say. Thank you...👍👍👍👍
Oh like a Tip of the Day? Cool!
Thanks for the great work you do to educate xamarin forms community. I use your channel every time I want implement something new. Was wondering if you could do a video on image full view, pitch and zoom.
Great to hear, thanks! I'll add that one to my (long) todo list!
Many thanks for another great video Gerald! Can I request a quick video on changing your form layout due to orientation changes using MVVM?
That should have anything to do with MVVM. What do you mean by changing the layout?
@@jfversluis If you rotate a screen from portrait to landscape, you may want to layout a form differently
Here is one that uses MVVM. th-cam.com/video/ziKr34qZxII/w-d-xo.html
Thanks 👍.
No problem 👍
Thanks Gerald from Cuba
From Cuba! That is amazing! I've been there a few years ago and internet seemed hard to come by. Glad to see you here my friend!
@@jfversluis Yes, it has already improved a lot. Thanks to you and James Montemagno for their learning videos. See you in Cuba one day.
@@paul790905 I hope so! Thanks for the kind words!
Hi men thank you for the video, I have been searching how to implement a guide tutorial inside an app but I can't find how to create elements in specific position when I clicked for example in a button, You know how I can make a guide tour for my app? I really appreciate any help, thank you
I want to bind the collection view in the popup so is it possible we can have rg.plugin.popup in center and it can expand its height according to items available in collection?
I wish you talk how to set a viewModel in a popup page!
Great video!
Thanks! ViewModel for a popup is no different than for a normal page :)
This videos shows using MVVM. th-cam.com/video/ziKr34qZxII/w-d-xo.html
Thanks for great video, you know there is a limitation to showing only single popup dialog at the moment, how would you handle multiple popup dialogs?
I didn't but that makes sense. I think the same limitation applies to the Xamarin.CommunityToolkit as well. Do you get a lot of questions about it? Personally I feel that is a problem that can be worked around easily and maybe not even something you should want to do as a developer.
If you want to chat about some things, find my email on my GitHub profile and reach out :)
@@jfversluis Not really getting questions at all :) it was just a bug trying to open multiple dialogs at the same time, for example when async await operations return trying to open new dialog :)
Is this a plugin that I would use for a pop up that comes up from the bottom of the screen? (Similar to the MS Teams mobile app if you hit the more button in the bottom tabbar) If not, how do you do it? :)
I think you would be able to do that with this... Not 100% sure!
You can use this plugin. The encapsulate all the content of the popup in Frame and Set Frame VerticalOptions to End.
It would be hyper cool if you could guide us in the source code of the library so we can understand how to create a custome dialog like this, I'm assuming that they use bindable props and delegates for actions and stuff like that. I think that could me hyper useful to know, ty sir Gerald. 💜💀
Why would you want to copy the code and do it yourself if there is this library to do this for you? ;)
Hello, I like this video very much. I would like to ask if it is possible to automatically pop out of the window and set the delay time? thank
Thanks!
I guess so! Wrap it in a timer and have fun! :D
Hi Gerald,
Thank you.
I have OrdersList Page that show list of orders.
Use can select any Order and view OrderDetailsPage.
Of course, OrderDetailsPage is NOT part Shell Visual Hierarchy.
I need to show Popup from the OrderDetailsPage page.
I can show Rg Popup but it opens popup on the new page.
I think because the Navigation stack already has OrdersListPage and OrderDetailsPage.
How can I solve this issue?
Kind of impossible to say without seeing the code, sorry!
I'm curious how you would send binding from your viewmodel through to the popup page?
The popup page is just a page, right? SO it has a BindingContext property and should work just like any other page :) or am I not understanding you correctly?
Thanks for the great video. l have scenario whereby l am trying to make an appshell project to resize based on the screen size of the device which it would be installed on. Your assistance will be greatly appreciated. Keep up with the good videos.
I'm not sure what your question is :)
@@jfversluis I've been working on my Xamarin.Forms cross platform application.
At it's current state, the UI looks perfect on my Samsung M31, however, sadly there's a problem.
During the development and testing, debugging process so far I've been only using Samsung M32 as a physical device assuming (to my mistake) that Xamarin will take care of scaling everything to devices with smaller screens, however, that turned out to be completely false. The moment I attempted to run the application on an emulator with smaller screen, the UI completely broke down and looked out of place
Is it possible to create sticky header in carouselview if yes please make a video on it.
My apologies if that is already covered in the video, but would this be able to be used in a ViewModel without needing to reference the page's Navigation instance (hence breaking MVVM)? Keep in mind I am not using any MVVM library and doing it all natively.
Absolutely, but not out of the box probably. You might want to write you own service to do that or use the messaging center to decouple the code
@@jfversluis Looking at the GitHub docs, it appears to suggest using an IPopupNavigation interface to handle navigation - guess that's the cleanest implementation as it allows the View to not have any relevant code at all.
@@bwsince1926 that would be my guess :)
Long shot, but I just can't figure out how to receive data in my MVVM, the popup with entry shows up, I enter the data and click okay, now how do I get that data in my mvvm ?
Can you please upload a tutorial for implementation of google captcha or any captcha in Xamarin forms application . It will be helpful for many of us as we don’t have enough tutorials
Why would you need a captcha on mobile? Those are for protecting you from bots filling out the forms, I would say that is not as much a problem on mobile?
Hi Gerald , I Can't Use This Package With Fresh MVVM , Can You make A video for that With passing data between them please
Yeah I don't think this plugin works very well with MVVM. I'll see what I can do
is there a way to navigate from your popup to a new page? using modalAsync?? i want to let the popup show first and then after pressing the button navigating it to the next page
Hm I guess there would be... You can just use the navigation service for that as you normally would. Any luck yet?
Is there a way to change the opacity of the overlay when the popup is displayed?
I think you should be able to set the background color. If you include alpha info in there?
@14:18 I think it's not happy because you didn't save the files. You can see the circle on the tabs of open files. Once you build the project, it will save all files but you can save them with Ctrl + S while developing.
Oooh good spot, thanks for that! :D
I use this plugin a freaking lot hahaha
It's amazing right?!
@@jfversluis yeah! I may be terrible at Interface design but it’s a great plugin
@@amigoSeiya hahaha same! I can show you how to use it, not how to make it pretty…
Have a tutorial for using it with MVVM?
Thanks a lot!!
Not at the moment, sorry!
Can I dismiss the user dialog button with out user interaction??
Absolutely, just call the close method somewhere in the code
@@jfversluis I have used confirm async method and it dont have any close method Gerald...can you please help me!!
github.com/rotorgames/Rg.Plugins.Popup/wiki/Navigation
Can Rg.Plugins.Popup be used with .NET MAUI ?
Not until they make it compatible, which hasn’t been announced yet