Create Custom Controls using BindableProperty for Xamarin.Forms
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- If you are looking to create custom controls for Xamarin.Forms, you have come to the right place. In this video we will learn how to implement BindableProperty on our own controls, making them reusable. You can then use it in your own project or maybe create an awesome control as a NuGet!
🛑 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/XFBinda...
Basic Data Binding: • Basic Data Binding in ...
Data Binding Scopes Video: • Xamarin.Forms ListView...
Data Binding Modes video: • Three Data-Binding Tri...
BindableProperty Docs: docs.microsoft.com/xamarin/xa...
Databinding Modes Docs: docs.microsoft.com/xamarin/xa...
Xamarin Forms Repo: github.com/xamarin/Xamarin.Forms
⏱ Timestamps
0:00 Intro
0:30 Sample App Outline
1:32 Implement Custom Control
3:47 Implement BindableProperty
7:00 Closer look at the BindableProperty.Create parameters
9:00 Implement PropertyChanged to Update our Control
12:49 Implement Second Bindable Property
14:00 Consume Custom Control and Bind Properties
16:27 Running the Sample
17:12 Outro, Like & Subscribe!
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Twitter: / jfversluis
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev - วิทยาศาสตร์และเทคโนโลยี
Did you build custom controls, Nugets, anything? Post them here!
I tried to do a CustomSwitchCell which is essentially a label and a switch in a stacklyaout, but unable to figure out how to do the two way binding correctly with the switch, though binding is working just fine with the label. My plan is to make a SwitchCell which is similar to the native switch cell but exposes more properties especially for the text part to allow for setting font size, attributes, type, ...etc. which is not available in the native switchcell.
I wish if you can make a follow up video on how to do more complex controls. Thanks!
Be aware that cells aren’t recommended anymore because the ListView is not the recommended was to show data anymore :)
@@jfversluis I'm essentially going to use it in a settings page with a TableView. I agree that you can do the exact thing with CollectionView with full customizations, but that probably would require more work compared to a TableView with few SwitchCells :)
@@jfversluis just realised that Dependency injection doesn't work in custom controls when creating a view model for my control.. after googling found issue#4538 in maui issues. Adding here so anyone who stumbled like me might come here..
Maybe I don’t understand but why would you want dependencies injected in controls? You should get the data through your view models and have your controls have bindable properties that you bind to
This was very helpful. I could not find another useful tutorial on this topic, and your video was very straightforward.
Would you consider a follow up video with a more complex user control?
I’m trying to implement my own TreeView-like control in Xamarin /Maui. Each node would have a description and nested sub elements in a ObservableRangeCollection. I’m trying to implement this using MVVM, but this type of user control might require nested user controls, and a more complex control example might provide more insight.
Thank you for the clear and straightforward video! I was pulling my hair out trying to figure out bindable properties before watching this. I wish you would have done a different type of control other than another label for the second control but your instructions were clear enough to show that the process is basically the same regardless of the control type. Keep up the great work!
Glad it was helpful! Thank you so much for your support! Appreciate it!
Awesome, thank you! I really came to the right place ;) When I saw your video about Xamarin 5 I thought, control templates were the way to go :D.
Haha I’m glad you feel that way! Enjoy the content!
This video made this a good Friday for me. I found the one-liner I was missing. Thank you sir.
Perfect! Have a great weekend!
Yeeeeeey....finally it's here! Thanks a lot for the awesome content!
Hope this is what you were looking for! Let me know if you have any questions :)
@@jfversluis Sure,So much love and respect for you dear !
I am falling in love with your tutorials
Oelala well thank you! Don't tell my wife!
Thanks for video!, I had many problems understanding code examples but with the video example I was able to do it in my code
Great! Good luck and thanks so much for letting me know :)
Thank you so much for this walk through! This is some serious voodoo magic.
Glad to help! Yeah these things have a bit of magic in them 😅 let me know if you need anything else!
very good thank you. I will use this in a next project
Awesome! If you have something to share, please do!
Thanks so much, This video is very helpful for me. Best regards.
Thank you for letting me know! Appreciate it!
Thanks for this!
Glad it was helpful! My pleasure!
@@jfversluis Rather than recreate each individual property, could you set the BindingContext of MyControl to `this` and just have it use the properties like your pages would?
Awesome!😘
Thanks 🤗
Your contents are great!
Thank you! :D
@@jfversluis can you please make a video regarding messaging or chatting with another user each individual user implementation in Xamarin forms C# without using firebase
That sounds more like building a complete app 😅 I don’t think I will have the time to get around to anything that extensive, sorry!
@@jfversluis just an implementation of chat system using simple DB
Yet another great tutorial! I would love to see an example of using picker or other complex controls. Also - I need some training on creating nuget packages - have done PR's and contributed to others - but don't know how to set my own up.
Noted! You mean just using the Picker or other controls? Or in regard to the bindable properties?
The NuGet one might be a nice one as well!
@@jfversluis Picker is a good one - it doesn't have a easily defined backing object type like "string" or "uri". It is also confusing because binding an item source (in my case, building a state picker and country picker - both will have static itemsources) doesn't seem to work. Do I include those item sources in my control? Not sure how to do that in a custom control. It also has a selecteditemindex and selecteditem. If I bind the itemsource in my control, I want to expose only the selecteditem to my consuming page.
In the project I am currently working on, I have three different kinds of contacts: Employees, Customers, and Vendors. All three have at least one Person associated (customers and vendors may have a number of Persons). I started using a template - but really like using a control instead (makes my Pages FAR more readable). I think this pattern is EXTREMELY common - so was thinking I would share with the community my "Person Control" as a nuget package
Hey Gerald another great video. One quick question: Is it a good practice to bind the Title labels Text property to TitleTextProperty to decrease the amount of code?
Thanks Polat! Ah directly bind to that, yeah I don't see why not? It might get a little unclear if you keep adding up the "magic" that way for other developers. But if that's what you want to do, sure :)
A Video about custom attributes would also be nice. How to use the value of the variable the Attribute is on for example.
Do you by chance have any examples where changes made to the value of say MyDescription is automatically propagated to the user control and automatically updated? I tried adding some buttons to the mainpage that changes the value of the MyDescription property but the DescriptionTextPropertyChanged event in my user control does not fire thus the value is not updated in my user control. I would love to see an example of this using an observable collection as a BindableProperty in my control that automatically responds to the changes made to the collection in the main page.
I don't understand how this could have ever properly worked. The DescriptionTextProperty is having the nameof(TitleText) bindableproperty? Will this still be valid for a 2 way bindingmode?
Hi Gerald, is this still valid in .NET MAUI? Are there other/better ways to do that?
Hi!
This has to be one of the largest gray areas in Xamarin.Forms development, so thank you very much for the video. Have you ever considered creating a video for custom controls with Datatemplate? I'm trying to build a generic lookup control (I don't really like standard's picker user interace) where I can place a listview and by using generics, being able to interact with backend and filter results from list, etc... My main issue is on how do I handle listview item's layout customization... I know Datatemplate is the answer for that, but I can't figure out how to implement it.
Hm that is a tough one to crack. Can't see I have implemented it like that yet. Let me know when you make some progress, I might be able to help or if you get it done make a video about it ;)
@@jfversluis Ok, I'll take a shot at it... Seems to be a pretty useful thing right?
Thank you so much for the video, how to pass object as bindable properties while implementing custom component ??
I'm not sure what you mean
Hey, thank you for the great tutorial. I'm new to Xamarin forms and i'm trying (using mvvm pattern) to dynamically create the controls.
Do I have to do that with ContentView or is there any other way?
Thanks Hoka! Appreciate the kind words!
What do you mean by "dynamically create controls" exactly? Create the actual control or load the data? What is the use case you're trying to implement?
@@jfversluis Thanks for the fast reply :) I got it to work though with the help of this video.
My issue was that i have a JSON file/object with list of types and other attributes and depending on the type (button label entry etc.) I would create the control(s).
@@hokaturki121 That sounds like an awesome complex thing! Great you made it work!
I follow your code and I can't directly Binding with viewmodel.
The only way its works is using the followed code:
Title="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:TestViewModel}}, Path=Text}"
Direly Binding do not works:
Title="{Binding Text}" do not works
I'm using CommunityToolkit 8.0:
[ObservableProperty]
string text;
Any idea?
Great video! My custom control also needs an own viewmodel. Unfortunately, I can not get this to work. Any hints or ressources for that problem?
Hey, thanks you! Not sure what you mean by this one though... Sorry :(
Could you show this in the context of a button? So you can transition between two different states on an image or colour etc?
I'm not entirely sure what you want to see here?
Hello Gerald and thanks for your great work. I made a custom control with few color bindable properties. It works perfectly with normal bindings but when i try to use an "AppThemeBinding", i receive a Xaml error XFC0009...Do you have any suggestion?
Hm I don't know from the top of my head what that error is. Did you search for it yet?
@@jfversluis yep, it is "no property, BindableProperty ore event found, or mismatching type between value and property"; i'm going to investigate on the control .cs code
Any advice on changes that would need to be made to make this work for data entry? I'm able to get the data to display, but getting it back out of the binding has been an issue.
Hey there! Not exactly sure what you mean with this :)
@@jfversluis I guess to put it simply, would this approach work for a login form as well? Where it's not just updating the label but consuming data back through an entry in the custom control to the binding context(ViewModel).
Absolutely! It applies to everything :)
How would you go about passing a list into a Bindable property to display in the custom control?
I've had not much luck passing in an Ienumerable of string into the control and it's Bindable properties and displaying it on the controls CollectionView
Did you figure it out yet? :)
@@jfversluis Yes, looked at it with fresh eyes the next day and worked like a charm!
@@nathanbrown2387 That's usually how it works! Glad it did :)
I created a custon control with bindableproperties,
when i triedd to change ImageSource or WidthRequest ... etc in xaml, it never update bindableproperty value never change, i have to restart the debug to see the new values
when i make button and set the values in it and tab on it all value update
how to force xaml to change bindableproperty value when edit it manully in xaml
many thanks in advance
Can you create a autocompelete entry with displaymode as token in xamarin
I'm sorry I'm not sure what you mean by this :)
Hi again! Would you mind taking a video about the differences and use cases of a) Custom Controls b) Control Templates c) Custom Renderer ?
Is one of these obsolete or are these just different ways towards Rome? Thanks a lot in advance!
Love it! I’ll add this to the list
@@jfversluis Hmm, while writing a simple CustomControl I am just wondering on how to forward the Completed Delegate? It's just a string arriving in a bound property... got stuck there ...
normaly: Completed="{Binding Command}" now: "
OK, found the answer myself, it is, if I am not misled -> Behavior. And you gave the answer already: th-cam.com/video/EKmj8Got_gE/w-d-xo.html
@@TheDaple I have almost enough videos to answer anything... 😬
@@TheDaple BTW thank you so much for becoming a member! Shoutout coming soon!
hi Gerald, Could you tell me how to make a PDF in Xamarin? I have tried to use several libraries but it is very tedious, I do not have much time to do tests, Thanks so much friend!!! best regards
You might want to have a look at this one: th-cam.com/video/y0wmCkF8iTM/w-d-xo.html
Unfortunately, creating pdfs is hard 😅
Could you please think about a Video about Error-Handling ? On the one hand it it very hard to debug code especially because of all the magic strings in Xamarin and on the other hand no sample code I have ever seen uses Error-Handling at all ! How can I prevent my App from crashing when there is e.g. just a null-string ? Is there something like a global Error-Handler ? Those kind of subject would be good and new stuff ! :-) And btw: great work so far ! I like your style !
Hey there! Absolutely! What is the areas that you think are hard to debug because of these magic string? Error handling is certainly not something that can be seen in many samples :) Have a look at this session I did a while ago: th-cam.com/video/-fqPKVNOyuI/w-d-xo.html that at least handles some of the connection issues. Some of that can also be applied to other error as well.
Thank you for the kinds words! Appreciate it :)
@@jfversluis : just my latest problem: the CarouselView crashes if either the last Item is removed (now empty), the ObservableCollection is set to New ObservableCollection or the Collection is cleared like myCollection.Clear(). Big problem for me btw. I don´t expect you to solve my problem but it took me hours to figure it out, what crashes my App. No chance to debug this with my knowledge. On the other Hand I hate alle the magic string, especially in Bindings. There is no error they just don´t work and you have no clue why. I am impressed that you answered my post ! Now you are my favorite Dutch-Man (comes from a german !)
@@LobsterHarry Haha I will pass that along to my other Dutch friends who will be jealous!
Glad you did figure it out! And unfortunately I can't help everyone with every problem. But feel free to reach out when you got something. I can at least point you in the right direction. As long as you don't mind that it might become inspiration for a video... ;)
@@jfversluis Plan B. Show us how to make an own nuget package. I do have a nice custom control to Scan Barcodes with a Bluetooth Scanner which I could share with the world...The cool thing is that this control can detect Key-Events !
Very awesome! Yes! That one was already on my list, let me see if I can prioritize that one
Pls, can you do a tutorial on custom control, i wanna do a custom control for entry and a picker
This should tell you a lot about creating a custom control actually. I can't create the actual control for you, that's up to you ;)
You saved my ass
🦸♂️ glad I could help
How about with gesture recognizer? btw, great tutorial, appreciate it!
Thanks! What about it? :)
@@jfversluis I was doing some custom control label with tapgesture recognizer but for some reason, ICommand is not working on custom control, I'm not sure if I'm doing the right approach, button with click event is working tho, so I'm asking if you have any tutorials or links for custom control with gesture recognizer/command
Hi Sir, First of all thank you so much for the informative guide for a beginner like me. However, I have this challenge, which confuses me a little.
Although I seem to have understood your tutorial well, but, after watching the tutorial, I came across a custom control like the one below, but, I don't know how to achieve exactly the same thing:
What actually confuses me is how to make the child property also have the Text, Icon and Content properties.
Please, I need your help to better understand this. Thank you once again!
Thank you Derick! I'm not sure I understand what you are trying to do here...
thank you for this tutorial
I did the same thing with the same change as
public static readonly BindableProperty EntryTextProperty =
BindableProperty.Create("EntryText", typeof(string), typeof(LabelEntry),default,BindingMode.TwoWay);
public string EntryText
{
get
{
return (string)GetValue(EntryTextProperty);
}
set
{
SetValue(EntryTextProperty, value);
}
}
and in XAML of custom control I add
Text="{Binding Source={RelativeSource AncestorType={x:Type local:LabelEntry}}, Path=EntryText}"
and when I want to get the value in entry give me just the null
any idea what is the problem
and thank you in advance
I would suspect it has to do with the RelativeSource. Have a close look at how that works, I think there is some options there you can use to make sure it finds the right reference. Else, if you could put this in a small sample project online somewhere that would really help for me to look at it :)
@@jfversluis thank you for your replay and that is an example
github.com/KevinAnass/sampleCustomControl.git
@@anassnassim I've looked at it, but I'm not really clear what you are trying to do here. Sorry
@@jfversluis just read the entry text hhhhhh
@@anassnassim I did! And I write something, but nothing happens... No crash!
lol u should said to XamMobile 🤣
Wouldn't it be cool to have one?!