Design Schedule App UI In .NET MAUI Application

hello guys welcome to my channel in this video I am going to show demo about designing schedule list UI in.net mavi application so here on the click of this dashboard icon I'm just going to display weekdays in a left panel and based on the selection of weekdays it's just going to filter the schedule list and also user can select a date from this date option okay so let's go through it okay now let me add these icons here in dotnet mob application so I'm just going to add icons in resources images folder okay now I'm just going to add views view model and models folder okay so here in the views I'm just going to add schedule list page so dotnet mavi content page for schedule list view here in a view models folder I am just going to add schedule list view view model foreign folder I'm just going to add One schedule model and the days model for here in a UI for schedule list displaying schedule list I am just going to add schedule model and when I select this dashboard icon then here I am displaying days information so for that I am going to create model okay so here in a schedule model I am going to add start date time then end date time the description and the location and also background color okay so here I'm displaying start date and end date then title description and the location now let me add days model to display these information on left panel okay so here in a day's model I have added day name in a character format because I am displaying here Single Character of this game like a Sunday Monday Tuesday so that first character I'm displaying here and that today's particular date I am binding so that purpose here date property I have added now let me just set this schedule list view here in the app seller jaml so when the application launched that time is just going to display by default this schedule list View and also here in a schedule list view code behind I am just going to set this phase binding context is equal to our schedule list view model okay now let me create observable collection for this schedule list so here I'm just going to add observable collection of schedule model and also I am going to create one property of a list of scheduled models that contain all schedule list so I will add all schedule lists in this object and based on the date selection I will just filter schedule list in this method add all schedule list method I'm just going to add a dummy schedule list in this all schedule list object so let me just add dummy record here okay so here I just created a schedule list object of new list of schedule and in that this all dummy record like title description start date and date time and that background color and that I'm just going to add in this all schedule list object now let me create another property of a current date so before that let me install Community toolkit dot mvvm to easily create a I notify property change I can easily Implement uh using that so this plugin I'm just going to install in this project okay so here I'm just going to inherit observable object from the community toolkit dot angry VM here I am going to create observable property that name will be preventate so this date I'm displaying here so whatever the date by default it will display uh whatever the date is here today that date here I'm going to display and after based on selection it's just going to filter data okay another method I am going to create is by data to schedule list and here I will just filter from the all schedule list I will just filter based on what is the date is selected okay so here what is the start date time the date is equal uh equal to current date time dot day then it is going to uh it's going to filter data based on this condition and then I will just add that in a foreign this schedule list data here in a schedule list UI so here first I am going to design this layout so let me add a UI related person here so here in a great vertical State layout I am going to add create in a one grid row I am going to add two columns okay so in a one row uh I'm just going to add first in First Column this icon and remaining uh in a remaining column this data I am just going to add so in this so since I'm just going to set this dashboard black dot PNG icon okay now here in a horizontal State layout uh in this vertical stake layout I am going to add this date information like Wednesday and this month and year and then this date picker so let me attack so here I need to bind the date so for that let me add here personal namespace of view model so I can set the data type okay now I can bind here current date from this schedule list view model so let me first set here current rate is equal to whatever the today date so date time dot now that date I am just going to set here [Music] let me just now format the date here so full day name like here I am displaying so that D name here I'm going to bind and that and then I'm just going to display month name and here in this format okay and here I'm just going to add now date picker and that format I'm just going to set this DD so it is going to display date in this format application and let's see it displaying UI this format or not okay now let me just set hide this navigation bar from this page and here in a vertical State layout I'm just going to set painting and here I'm just going to set vertical option to Center in that it's going to bind current date so when we open this date picker so whatever the current date is available that is going to display now let me add the schedules and box View down to this header so here in a label I'm just going to add schedule text and then one box View okay so now it's just going to display like this okay now here I'm going to bind data in a collection view so for that let me add here collection View and that data template so we can bind data into collection View okay so here in item source I'm just going to set schedule list and schedule this data type will be schedule model here I'm just going to design layout Okay so I'm just going to uh display this date information in a First Column and then in a second column I will just display this frame and in that this description location and title information so let me add that foreign display start date time format that date time also so I'm just going to display in hhml of this format like cover minute and that Am Pm information now in another label I will just display and time information foreign and that diagram color will be the whatever the color we said from this schedule model object that I'm just going to display here so first I will display title then description and the location information okay so it is displaying like this okay okay so now it's uh displaying let me just add text color to white size okay I have not added any location information so let me just add here static tax later on we will okay now here based on the date selection I am just going to filter this data so for that here let me create event on this date picker okay so here in a date selects and date selected I will create uh event update selected and here I just uh get first the current page view model from this schedule list view model I am just going to call this method bind data to schedule so let me just convert it to public so I can access it it's going to call viewmodel Dot bind data to schedule list so this matter like whatever the date is selected based on that it's just going to filter data and displaying schedule list okay so now here if I select any date so based on date selection it is going to filter data now let me create panel like on the click of this image that's for iPhone I'm just going to display left panel so for that let me first add here panel UI so here um just uh going to add panel left let me just get the background that which request I am just going to set as a 80 and this horizontal option I will just set as a start now in this layout I'm going to add first image that Source will be this dashboard white image I am going to set okay and let me just add Mark and one image at the end of this setting dot PNG okay so now it's displaying here dashboard icon and this setting icon now on the click of this icon I I will uh just hide this panel and on the click of this dashboard icon I will show that panel so that logic let me add a tab just a recognizer on this image so same tab gesture recognizer I will add for the icon available here in this panel right let me add that name so this is a panel right and here I have dashboard icon so same event I will add here also so I will call same capture recognizer.tapped event so here now let me create one property thank you okay so by default I will just translate this panel left to minus 18. so when the application long that time it will not visible that panel okay so now here on the click of this I will just check like this panel translated so if it is translated then I will set to again minus 80 point and if it is not translated then I will translate this to 0 so that that panel will be visible here and this flag let me just set his final translated to okay so if it is true then it become false and if it and if it is false then it will become true like that now let me run the application so by default this panel is not going to display as on initialization of this Constructor I just translated that panel to left side minus 18 point and when I click on that image then it is going to display that okay so here now on the click of panel when I click this dashboard icon then it will just check is panel is translated if it is not then it will translate to zero point means it will set to visible and again I click on that icon then it will just translate to minus 80 point okay now here I am just going to bind weekdays information so let's add that in a view model so here I'm just going to create observable collection of weekdays okay so here observable collection of days model so here in weekdays I'm just going to add weekdays information so let me create one method that going to catch a weekdays so in that first I'm just going to find start day of week based on the date selection so if I select here 19 then the start day of week will be the Sunday and then all weekdays information I'm just going to add in this weekdays observable collection so let me add that logic So based on the current date I'm just going to patch so first day of week minus current date dot day of week so it will catch bad day of week this logic now from the start D of V to n d of week I am just going to add this entire date collection in day of week uh of this day of weekdays observable collection so let me just use for Loop and in that I will just create an object of type of base model so here I need to pass day name so day name will be the type of character so for that I need to fetch now a single character from the start day of week Dot day of week so day of week object if you see it's a a returning index so 0 1 2 3. So based on index I will written Single Character so let me create one method okay so based on index I will just return data thank you and if this condition is not match then I just written empty so here I will call now days uh day of week care method and I will just pass start day of week dot day of week information now in a date I will just set start day of week dot date now this record I will add in weekdays object okay and after that start day of week equal to start day of week dot add days I will just add one day because if I select here 12 date and start date of week will be the 9th and from the nine I need to add entire date range collection in this object so that purpose here I have added this logic and here I will just set weekdays dot clear so whenever this matter call it's just going to refresh the data now this method I will call here whenever the date change whenever this bind to schedule list method is called in that condition I will just call this cat weekdays info okay now let me bind this information into UI okay so here in a schedule list view in a panel left I'm going to add here collection View and that item source Source will be the big days okay so for this design I am going to add the border and in that one label I am going to display so let me add that and that border safe I will just set to round rectangle okay now uh that border background color let me just set that now let me run the app and let's see if displaying weekdays in a border or not okay so we're displaying with days now let me just uh format this foreign property call is selected so when I select any days from here uh it's going to filter this schedule list also so for that in a weekdays model object let me create one property called is selected so here I'm going to inherit observable object and observable property I'm going to create here that is this selected now here in schedule list UI I will set trigger information so if is selected is true then here I will just add background color to Orange otherwise this black color that I have added here that I am just going to side let me create here command also on the top of this grid I am just going to invoke command from the schedule list view model so here part will be the command name that I am going to create in a view model and command parameter will be the current selected item okay so here now in a schedule list view model I am just going to create one command so that will be the type of days model as here I specified this color weekdays observable collection is the type of days model so that I am just going to access now here current date I will set as whatever the date I selected from these days model and item dot is selected I will set as a true and other all items from weekdays object I will set as a false and then I will just call this by data to schedule list method so it is going to bind data to schedule list now let me run the application and let's see okay so it's showing error here in a parsing let me just see yeah okay I need to specify this weekday selected command here in a path option and also here in a bind data to schedule list I need to set now in a weekdays info method is selected is equal to [Music] so start day of peak dot date is equal to equal to current date that date then it's just going to set is selected to true now let me run the application okay so now if you say by default it's selected as a Monday because current date is at 10 so from this current Week information so start date will be the 9th and from this 4 inch loop I just added this condition if the start day of week the date is equal to equal to current date the date and it just set as a select as a true now let me just select another day like if I select Tuesday then it will change the date and while data here and on the Wednesday so it is select now let me add another layout like here I am displaying so on the selection of that I am just displaying a little border here like that way let me add that so here in a schedule list I'm just going to add another border here and that will be only visible when is selected properties true and that border rotation I will just set because this is by default this is rectangle type so I will just set this rotation and let's drop thickness okay now here in a margin I'm just going to set negative left side margin so it is going to move like this way okay now here on the selection it will look like this foreign so here it is visible property let me create one bindable property here in a schedule list view model so when the data is binding that time this is busy property will become true so here in a buying schedule list I'm just going to add delay like a four or five hundred uh second then I just finished up at the schedule list data and then I will just add that in a UI and once the data is added and I will again set is busy to false and that flag I am just going to set here okay now let me run the application and let's see if displaying activity indicator uh when the data is binding thank you okay so here it displaying activity indicator and when I select any days that time which is displaying activity indicator and then binding the data and from here also if I select any days then it just filtering data now let me run this in a Windows platform and let's see it's uh working or not okay so it's displaying the schedule list uh but this icon is not visible because here uh this background color is black so let me use here app Theme binding and for a dark theme I will just set dashboard white color uh white background image so now it will be visible so if I select any days then it is I'm going to filter data from here on calendar selection it's just going to also like a based on that selection it's just going to display the data okay so that's all for today I hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 9,125

Keywords: .NET MAUI Schedule List UI, Build Conference App In .NET MAUI, Build Schedule App In .NET MAUI, Create Todo App In .NET MAUI, Layouts In .NET MAUI, Best Layout In .NET MAUI, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: iEQYklL-WEM

Length: 46min 25sec (2785 seconds)

Published: Mon Oct 24 2022