Awesome Status Displaying with Shield in Xamarin.CommunityToolkit

ah look i have this fancy shield well it's actually you know the cover of our laundry basket but i like to pretend it's a shield because why not in this episode we're going to look at the shield control in the xamarin community 2 kit which looks a lot fancier than this thing actually and we're going to see how to use it how to implement it into your application and how to make it look cool and tappable let's just go check it out so here we find ourselves with a running file new xamarin forms application you can see it in the left in visual studio for mac 2019 the same thing of course works in windows with visual studio on the right we can see the actual code running on the ios simulator which is pretty cool and whenever we make changes because it's running we can just see how to reload in action so let's name this the shield sample here we go save that and boom you can automatically see that update on the right shield sample there we go now what i've already done is i've already installed the nuget package of the xamarin community toolkit you can see it here on the top so i've just installed this version 102 at the time of recording just search for xamarin.com toolkit you can install it no problem so whenever we do i can just keep running this because i'm going to do most of this in example and what the first thing we need to do whenever we want to use this is x add this xml namespace and i'm going to name that xct it can be anything what you want but i'm going to name it xct and then we can use this fancy url ending in toolkit and then it will know all the controls that we have in there and of course the other things so let me just remove these labels right here and what i can do then is add the shield and it will automatically see it's in the xct namespace so here we go and you know if i don't specify anything it's going to be pretty empty probably see there's nothing there but whenever i do so you might notice things from like github where you have these like shields or badges or whatever you might call them um and you can say on the left like this is nougat and on the right it can say the version number that's currently on nougat or the build status like hey the main branch is building or broken at the moment so that's kind of the shields that you have to think about for this as well so on the left you can specify the subject so let's say something random like i don't know youtube there we go save that and you can see that pops up already and it's you know nice rounded corners on the left uh it's a little bit small i'll see if i can blow it up in a little bit um but and on the right you can see that that you know thing where we that it's cut off and we have to add the other part and the other part is status because normally it's like a subject and a status right we could have named it other things but it's subject and status so what could we do for status here maybe maybe you know you have subscribed to a certain youtube channel so the status is subscribed because that's what you did right um so stay subscribed there we go and now for the left part of the subject the background color is actually fixed so at the time of recording maybe whatever you're viewing this it has been changed but if you're looking for a relatively easy change and you want to implement this i think that is a good one to start pro tip right here but for the right part you can definitely set the color um so here we go we can just set color we set that to red because it's youtube and there we go so now we have youtube and subscribed on the right side or maybe we should do green because you know green has whenever you're subscribed then it should be green right so maybe we want to set the text color then do it just set the text color to white oops white no that's not the right text color oh there we go because i had an invalid value so the text color influences the color of the status text so here we go youtube subscribed and let's see if we can make it a little bit bigger i think you know if i change the font size right here so you have all the things font family font size if i set the font size to i don't know 25 let's see what that does you can make it a little bit bigger see so that's really cool you can just make it bigger there we go so if i just add another one to just you know add some some more things maybe you also want to do twitter which is kind of like blue and do we want to say following because you know i'm also on twitter so maybe you want to follow me there um and we make this uh 40 to make it even bigger there we go boom uh twitter following so the other cool thing is whenever you might not be following we can do also a command on here so you know whenever you tap this thing you can actually do a command so let's do a binding tab shield here we go and you can just tap this thing and then we need to actually of course implement a little thing here so let's say public command uh tabbed shield shield get set there we go and whenever we do this let's put this in the constructor right here tab shield is new command i could have done this right there in line by the way but you know who's counting who's counting so there we go and we're going to say display alert um [Music] subscribed i don't know let's do something it was following for twitter well [Music] and you were now subscribed thanks okay so there we go and you can just hook up a command so now i do have to stop and restart the application right here so you can just hook up that command and you can tap actually that on that thing um which is not working who knows quick question quiz question let me know in the comments pause the video right now do you know why it doesn't work i do because i forgot to set the binding context here binding context context is this there we go so if you want to know more about data mining a playlist should pop up in your video right now and i'll put it in the video description because you know with the data binding it's going to look for this property and it has to be a property and but we need to set the binding context right it needs to know where to look for that property and we're going to set it to this so we set it to main page and inside that main page it's going to look for tab shield because we're telling it to do um binding tab shield right here so that's what we can do and now it's properly hooked up did i stop and did it again no not yet okay so stop rerun again shouldn't take too long and whenever we do then we end up with a tappable shield there we go subscribe you are now subscribed i hope you're subscribed too um and this is the shield there's nothing more to it really it's just some fancy design thing um that you could use that looks pretty awesome if you ask me and you can just use it fairly easily by just specifying two kinds of text you can just show some status and that's it sweet and short video just on how to use the shield in the examine community toolkit so i left a little pro tip in there um to you know if you're looking for a contribution how to start with contributing to open source the xamarin community toolkit is a welcoming project for that if you can't figure it out let me know and i'll probably make a video about how to get started somewhere later on if that's something that you want let me know in the comments if there's anything else you need you want to ask let me know in the comments too and as always just like this video if you've actually liked it please subscribe to my channel and i'll be seeing you for my next video

Channel: Gerald Versluis

Views: 2,248

Keywords: xamarin.forms, xamarin, xamarin.forms 101, xamarin community toolkit, Xamarin Community Toolkit Shield, Shield control, xamarin.forms tutorial, xamarin.forms tutorial for beginners, xamarin tutorial, Xamarin Forms, xamarin controls, Xamarin Forms Controls, xamarin forms custom controls, xamarin forms ui design, xamarin forms tutorial, xamarin forms tutorial for beginners step by step, Shield in Xamarin.CommunityToolkit, xamarin forms 5, ios, android, cross-platform apps, c#

Id: -02fFAyhRoY

Length: 8min 23sec (503 seconds)

Published: Mon Feb 08 2021