.NET Maui Apps | How to using Toast and Snack Bar in .NET MAUI Mobile and Desktop applications.

Hello friends and everyone welcome back to  netcode Hub channel in this video we are   going to talk about how to display toast and  snack bar in.net Murray application using a   package known as community2k.mary so thanks to the  Microsoft Community team they have a package that   can help us integrate toast and also snack bar  in application if you don't know what tools or   snack bar is don't worry because in this video  we're going to cover the two features here and   these features are amazing the integration is very  easy and simple let's first start with the toast   how to integrate toast into application when you  develop your application and user interacts with   application you would like to give feedback  to the user isn't it so in such case I've   made a video on how to use display alert display  action sheet and also display prompt async I can   use that to interact with the user but when you  use this tools tool and snack bar it is all cool   so let's see maybe you can watch that video and  watch this also the two lessons you can compare   and see how to use any of them but let's focus  on the toast and snack bar for now so what you   need to do here first is to create um dot net  marry our project and I've launched my visual   studio 2022 so I'm going to click on new project  then I'm going to select on dot net marry app so   I'm going to give it as a demo nest the  framework is 7.0 so create project let's   wait for the project to get created  I believe you're also doing same so the project is ready now now the first thing  that we need to do here is we have to install this   package and that is a community2k.mary  package so let's start doing that okay so we go to the dependencies and click  on any of these platform packages and these   are the packages that we need to install we  have to install community2k.mari and also   we have to install community2k.muvm so these  are the two packages that we're going to use   in this application or this demo so if you  don't know how to install it right click on   dependencies and go to manage nuget packages  and then type the name under the browse Tab   and try to install the two packages here okay  so let's assume you are done installing now   the next thing that we can do here is we have  to configure or use this community kit.mbvm   not.mary package so we have to do that it's  initialize that package inside the Mario   program.ts file and that is this one so we open it  and yeah we're gonna say dot use Marie community so Mario Community 2 kit so this name here needs and namespace as  a reference so use this going to kit as a   namespace let's save that now the next thing that  we're gonna do here is let's go to our main page   and let's have a button like you see we have a  button here so we're going to clear this name   because you don't need this name here and  let's also clear this let's click on let's   play these two so the test for this is going to  be so let's say this is toast so display toast so when I click on this button I want  to display toast now let's create a class and that's going  to be view model so this is the model class and now this view model it   is linked to this main page  so here this I'm gonna say let's make it public first so public partial  class and this has inherit from observable objects so observable objects let's  see if we have that here okay now you create so in here this what we're  gonna do now let's have a button so this is public   async and S6 let's say this is toast button let's  not test this toast button so this toast button   that is what we are going to do now when  this is clicked when this button is Click we want to create a cancellation translation token then let's create  let's make it cancellation token source so we have the token Source then you can  create an instance of this we set equal   to new one then let's create a variable  for the toast then we can say that toast dot make twist so that's make and  now in here you need to specify   some parameters here that's a message so let's say   please display some content I know this must  be in double quotes so let's cut this like this   let's close this for now so this is what you  want to do now in here let's say toast dot then   we're gonna say show because as you can see we  have two dot you have a lot duration this must   show uh this post so you want to say show then  you're going to pass in the cancellation token so we're gonna say cancellation token and  that is a cooking sauce so this one dots   and you can go for the token in it okay so this  is what we have now it is saying that okay so   let's see if we can await this now that's what  you want to do so let's buy now before we do that   let's make this a relay command so relay command  now this is mpvm so let's go to the main page   let's buy the contest here  first so we can clear all this let's let this do now in here  let's say that view model and we say view model let's bind the  contest so here we can say binding contest   so binding contest here is equal to your  view model let's register this in the   murray.program.cs so let's register the  content page and net view model so we say builder.services.trans yet or let's say that's  a Singleton then we're gonna say view model then the same thing goes to Services dot add Singleton then here it's not  going to be ilogger rather it's going to be main page okay let's come to our main page dot summer  file let's add the view model here so XM   then we give it us we say view model  let's equal to namespace then demo   over here now let's specify the data type 2 so X  data type the name that we gave was viewmodel so   view model then we can grab this view model so  so this button you can now bind it as command   so we can say that binding to then twists so  twist button command let's save this now let's use   Android unless one application and see what  happens so now let's click on the display   toast button and see what happens now so as soon  as I click on it you can see we have even the   image here and please display some content and  we have the image logo as as you can see from   here so that's a way to display those now not  only this there are some few things that we   can also do let's have a look at them so if you  check the documentation for toast in Microsoft   you can see from here we have the duration you  can specify duration also font size the default   size is I think 14 that is here and the duration  you can see we have duration.shot and we have   duration dot long now these long and shorts have  been explained down here the shot is I think uh   two seconds and the long is 3.5 seconds so if you  want to specify those components then we can go to   this and now grab the settings over here so we  can use them so let's grab this let's go to a   location now in here let's paste them here so  you see we have our string we have our so the   string here we're going to cut this and we're  going to put it here then we have those duration   we have a font size so default is 14 and in case  you want to make it as 18 you can do that so in   here is a matter of specifying the first one is  the test then the second one here the duration so   duration and the last one here it is a font size  so font size we are good to go so let's save this   and now let's see if hatch reload you know whack  okay so I don't know if let's make it 20 and see so 28 click on this okay so it means it is not enabled  now we can refresh or restart this application   from here we're going to see the duration so here  we are specifying the shot that is two seconds we   can talk about long as well so dot long we have  that long two so duration dots and we have long   and this long is about 3.5 as  stated earlier on okay now let's see now let's click on this button so you could see  the font size has increased and the duration 2 has   turned to short so that is a way to display the  toast it's very simple and now see the location   the net down of the um application or the phone  okay now let's talk about snack bar snack bar is   also the same as the toast just that this time  around the snack bar has a button that you can   perform an action when it is clicked as you  can see from here the toast displays only the   message there's no button here but when I use  the snack bar I'm gonna have a button that I   can click on it so that I can click on that  button okay so that is what we are going to   talk about now let's have a look on that so in  doing so let's also add a button here so you can   so let's create a button I'm going to say display  snack bar now let's create the method here   so public you have a same  task and this is snack button so with this what can we do here with  the snack bar we can also configure it   by creating the same cancellation  token so let's create our token we can configure some steps here  want to check the documentation   of this you can see with the snack  bar you can specify some parameters   or some properties in it now the  first one to do here is let's see so that is it as you can see here we create  our cancellation token from this type and now   you can see we are creating an instance of the  snack bar and we are passing in the background   color the test color action button color  Corner radius font and action button font   another spacing so we can do a whole lot  of this now let's see so let's grab this   let's go to our project so we paste this  here and this font let's see what we can   do so in microsoft.mary font now also after  doing that let's see what we can do next   so you can specify the test for the snack bar the  action button test and also what should happen   when we click on this button then the time if you  wait so from three seconds so let's also grab this   and in here we can specify this here so now as  you can see here we are going to display alert so with this to display alerts we have to  use cell dot current dot display alert okay   so we are going to display and let's display this  the screen it's only take three seconds from that   after doing that what can we do again you can see  we create the snack bar and now we pass in the   parameters that we specify for button  action duration and the snack bar options   and let's use that Binet here so we see we have  the test yesterday snack bar we have the accent   and that's what we're going to do when the button  is clicked now which button is going to be click   this is the accent button test so click here to  dismiss that's the button test now the reason I'm   going to take here is from three seconds and  the snipe options are the color red green and   Etc so with this we can change this to light blue  let's see the next thing that we have to do is   we've created a cancellation token so we have to  utilize it in the snack bar so to do that we have   to copy the last line here and that is what  we need to use so the last one he plays this   so snackbar.show the same thing applies to this  you see snack bar dots we have action button and   call dismiss display duration show test virtual  options and that's what we specify over here okay   so let's say this and let's refresh application  to see what number is going to do for us now   if I click on the snack bus what happens so yes  this is not displayed because we did not bound to   the button so let's say this is really  a command and let's go to the main page   now with this knight Bar we're gonna say that  is about to snack bar so before this can work   unless we stop this now let's see so snack bar  button we save that and now let's run it again   so for now let's click on the snack bar and  see so as you can see this is a snack bar and   click here to dismiss now if you don't click it  quick it's going to beat this mess because we   specify the time that it should take okay so see  something over here if I click on this button then   it's going to display this to us as a confirmation  because it has a button that is I can click on it   but the tools has no button in it both of the  snack and the toast display beneath the page   but the sniper has a button in it that you can  just click so when you check the settings over   here you could see we have the duration that is  time span from three seconds so let's see when   you make it 30 seconds let's see what happens so  save this let's refresh this so let's click on   the button and see so you see it's going to stick  to 30 seconds for me to click this now if I don't   click install is it going to stay there until the  whole texture chances out as I click on this let's   see what happened to now it is off now so here the  time span here it is showing you the time that it   needs to take when a button is not clicked as soon  as the button is clicked it disappears so you know   this night button tooks a beautiful feature that  we can integrate in application especially for   interactivity that is it for this video I hope  today we've covered how to use toast and how to   use snackbar from.net marry application if you  like what this video you can just give it Thumbs   Up And subscribe to the channel if you like what  I'm doing too we have a lot of videos and lessons   and projects in our playlist so you can just check  them out and you're gonna have informative lessons   too alright so thank you so much for watching and  I'm sure I'm gonna see you again in the next video

Channel: Netcode-Hub

Views: 1,164

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, desktop app, create app, android, apk, applications, MSIX, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key, context menu, navigation service, nivigate trough content pages using navigation service, How to use Font Awesome in NET MAUI Mobile and Desktop applications., fontawesome, icons

Id: POyd6swUwGs

Length: 19min 22sec (1162 seconds)

Published: Tue Aug 08 2023