School UI Design using Xamarin form



 In Previous blog we have seen some design for school app, so today I am continue with same app

School UI Design using xamarin form
School UI Design using Xamarin form

Please, support my blog by clicking on our sponsors ad!

All Part of School UI Design:

Today we are going to learn three page: Examination, Assignment, My Attendance

Lets start with create classes for all three pages.

Install nugget "XamForms.Controls.Calendar" in all the project.

ExaminationViewModel.cs

    public class ExaminationViewModel
    {
        public string Name { get; set; }
        public string Date { get; set; }
    }

    public class ExaminationModel
    {
        public List<ExaminationViewModel> Get()
        {
            List<ExaminationViewModel> list = new List<ExaminationViewModel>();
            list.Add(new ExaminationViewModel { Name = "First Term Half Course", Date = "01-02-2022 to 15-02-2022" });
            list.Add(new ExaminationViewModel { Name = "Second Term Half Course", Date = "01-02-2022 to 15-02-2022" });
            list.Add(new ExaminationViewModel { Name = "Third Term Half Course", Date = "01-02-2022 to 15-02-2022" });
            list.Add(new ExaminationViewModel { Name = "Fourth Term Half Course", Date = "01-02-2022 to 15-02-2022" });
            list.Add(new ExaminationViewModel { Name = "Fifth Term Half Course", Date = "01-02-2022 to 15-02-2022" });
            return list;
        }
    }

AssignmentViewModel.cs

    public class AssignmentViewModel
    {
        public string Name { get; set; }
        public string Subject { get; set; }
        public string Date { get; set; }
        public bool isSubmitted { get; set; }
        public Color HeaderColor { get; set; }
        public string Status
        {
            get
            {
                if (isSubmitted == true)
                {
                    StatusColor = Color.Green;
                    return "Submitted: " + SubmissionDate;
                }
                else
                {
                    StatusColor = Color.Red;
                    return "Not Submitted";
                }
            }
        }
        public Color StatusColor { get; set; }
        public string SubmissionDate { get; set; }
    }

    public class AssignmentModel
    {
        public List<AssignmentViewModel> Get()
        {
            List<AssignmentViewModel> list = new List<AssignmentViewModel>();
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#F6C077"), Date = "02-March-2022", isSubmitted = true, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#E0B4D2"), Date = "02-March-2022", isSubmitted = true, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#FFE8E5"), Date = "02-March-2022", isSubmitted = false, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#FDF2DB"), Date = "02-March-2022", isSubmitted = true, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#A9D086"), Date = "02-March-2022", isSubmitted = false, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor=Color.FromHex("#FDF2DB"), Date = "02-March-2022", isSubmitted = true, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            list.Add(new AssignmentViewModel {HeaderColor= Color.FromHex("#A9B4D9"), Date = "02-March-2022", isSubmitted = true, Name = "Content Marketing & Strategy.", Subject = "Digital Marketing", SubmissionDate = "04-March-2022" });
            return list;
        }
    }

AttendanceBindViewModel.cs

    public class AttendanceBindViewModel : BindableObject
    {
        private DateTime? _date;
        public DateTime? Date
        {
            get
            {
                return _date;
            }
            set
            {
                _date = value;
                OnPropertyChanged(nameof(Date));
            }
        }

        private ObservableCollection<XamForms.Controls.SpecialDate> attendances;
        public ObservableCollection<XamForms.Controls.SpecialDate> Attendances
        {
            get
            {
                return attendances;
            }
            set
            {
                attendances = value;
                OnPropertyChanged(nameof(Attendances));
            }
        }

        public Command DateChosen
        {
            get
            {
                return new Command((obj) =>
                {
                    System.Diagnostics.Debug.WriteLine(obj as DateTime?);
                });
            }
        }
    }

AttendanceEvents.cs

    public enum Event
    {
        Leave,
        Holiday,
        Weekends
    }
    public class EventsData
    {
        public string Title { get; set; }
        public DateTime Date { get; set; }
        public Event EventName { get; set; }
    }

    public class AttendanceEvents
    {
        public Color GetEventColor(Event evnt)
        {
            if (evnt == Event.Leave)
                return Color.Red;
            else if (evnt == Event.Holiday)
                return Color.Green;
            else if (evnt == Event.Weekends)
                return Color.Blue;
            else
                return Color.Black;
        }
        public List<SpecialDate> Get()
        {
            List<SpecialDate> specialList = new List<SpecialDate>();
            List<EventsData> list = new List<EventsData>();
            list.Add(new EventsData { Date = DateTime.Parse("01/03/2022"), Title = ".", EventName = Event.Leave });
            list.Add(new EventsData { Date = DateTime.Parse("5/03/2022"), Title = ".", EventName = Event.Holiday });
            list.Add(new EventsData { Date = DateTime.Parse("19/03/2022"), Title = ".", EventName = Event.Holiday });
            list.Add(new EventsData { Date = DateTime.Parse("15/03/2022"), Title = ".", EventName = Event.Leave });
            list.Add(new EventsData { Date = DateTime.Parse("6/03/2022"), Title = ".", EventName = Event.Weekends });
            list.Add(new EventsData { Date = DateTime.Parse("13/03/2022"), Title = ".", EventName = Event.Weekends });
            list.Add(new EventsData { Date = DateTime.Parse("20/03/2022"), Title = ".", EventName = Event.Weekends });
            list.Add(new EventsData { Date = DateTime.Parse("27/03/2022"), Title = ".", EventName = Event.Weekends });
            foreach (EventsData model in list)
            {

                SpecialDate newDate = new SpecialDate(model.Date)
                {
                    Selectable = true,
                    BackgroundPattern = new BackgroundPattern(1)
                    {
                        Pattern = new List<Pattern>
                         {
                             new Pattern { WidthPercent = 1f, HightPercent = 0.6f, Color = Color.Transparent },
                             new Pattern{ WidthPercent = 1f, HightPercent = 0.4f, Color = Color.Transparent, Text = model.Title, TextColor=GetEventColor(model.EventName), TextSize=50, TextAlign=TextAlign.Middle},
                         }
                    }
                };
                specialList.Add(newDate);
            }
            return specialList;
        }
    }

Now we will create Template for each page

ExaminationView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.ExaminationView">
    <ContentView.Content>
        <StackLayout Padding="0,10">
            <Frame HasShadow="True" BackgroundColor="White" HeightRequest="70" CornerRadius="0" >
                <Grid  RowDefinitions="Auto,Auto,Auto" VerticalOptions="Start">
                    <Path Grid.Row="0" Margin="-20,-20,200,-20" Data="m132.34,154.23002l209.00002,0l0,0.66666c-66.50001,28 -156.50001,72.87853 -209.00002,96.76573l0,-97.43239z"
                      Stroke="#08457E" Fill="#08457E" HeightRequest="10" Aspect="Fill" ></Path>
                    <Label Grid.Row="1" Margin="0,15,0,0" Text="{Binding Name}" TextColor="#202020" FontAttributes="Bold"></Label>
                    <Label Grid.Row="2" Text="{Binding Date}" TextColor="Gray"></Label>
                    
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

AssignmentView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:SchoolUIDesigns.ViewModels"
             x:Class="SchoolUIDesigns.Control.AssignmentView">
  <ContentView.Content>
      <StackLayout x:DataType="vm:AssignmentViewModel" Padding="20,10">
            <Frame HasShadow="True" BorderColor="{Binding HeaderColor}" CornerRadius="20">
                <Grid RowDefinitions="35,Auto,Auto,1,Auto" RowSpacing="10">
                    <BoxView Grid.Row="0" BackgroundColor="{Binding HeaderColor}" Margin="-20,-20,-20,0"></BoxView>
                    <Label Grid.Row="0" Text="{Binding Name}" TextColor="Black" FontAttributes="Bold"></Label>
                    <Label Grid.Row="1" Text="{Binding Subject}" TextColor="#202020"></Label>
                    <Label Grid.Row="2" Text="{Binding Date}" TextColor="#202020"></Label>
                    <BoxView Grid.Row="3" BackgroundColor="{Binding HeaderColor}"></BoxView>
                    <Label Grid.Row="4" Text="{Binding Status}" FontAttributes="Bold" TextColor="{Binding StatusColor}"></Label>
                </Grid>
            </Frame>
      </StackLayout>
  </ContentView.Content>
</ContentView>

Let's Create Pages.

School UI Design using xamarin form
School UI Design using xamarin form

Examination.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:control="clr-namespace:SchoolUIDesigns.Control"
             x:Class="SchoolUIDesigns.Views.Examination"
             BackgroundColor="#F8F8F8"
             Title="Examination">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand" Padding="20">
            <Label Text="What is Lorem Ipsum?" TextColor="#202020" FontAttributes="Bold"></Label>
            <Label Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." TextColor="Gray" ></Label>
            <ListView x:Name="listView" HasUnevenRows="True" ItemSelected="listView_ItemSelected" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <control:ExaminationView></control:ExaminationView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Examination.xaml.cs

    public partial class Examination : ContentPage
    {
        public Examination()
        {
            InitializeComponent();
            listView.ItemsSource = new ExaminationModel().Get();
        }

        private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if(listView.SelectedItem != null)
            {
                listView.SelectedItem = null;
            }
        }
    }

School UI Design using xamarin form
School UI Design using xamarin form

Assignment.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Views.Assignment"
             Title="Assignments"
             xmlns:control="clr-namespace:SchoolUIDesigns.Control"
             Shell.NavBarHasShadow="False">
    <ContentPage.Content>
        <StackLayout>
            <Grid ColumnDefinitions="*,2,*,2,*" Padding="20,20,20,20" BackgroundColor="#08457E">
                <Label Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center" Text="All Assignment" TextColor="White" FontAttributes="Bold"></Label>
                <BoxView Grid.Column="1"  BackgroundColor="LightGray"></BoxView>
                <Label Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Center"  Text="Submitted" TextColor="LightGray" FontAttributes="Bold"></Label>
                <BoxView Grid.Column="3" BackgroundColor="LightGray"></BoxView>
                <Label Grid.Column="4" VerticalOptions="Center" HorizontalOptions="Center"  Text="Not Submitted" TextColor="LightGray" FontAttributes="Bold"></Label>
            </Grid>
            
            <ListView x:Name="listView"  HasUnevenRows="True" SeparatorVisibility="None" ItemSelected="listView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <control:AssignmentView></control:AssignmentView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Assignment.Xaml.cs

    public partial class Assignment : ContentPage
    {
        public Assignment()
        {
            InitializeComponent();
            listView.ItemsSource = new AssignmentModel().Get();
        }

        private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if(listView.SelectedItem != null)
            {
                listView.SelectedItem = null;
            }
        }
    }

School UI Design using xamarin form
School UI Design using xamarin form

Attendance.Xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Views.Attendance"
             xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
             xmlns:m="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:SchoolUIDesigns.ViewModels"
             x:DataType="vm:AttendanceBindViewModel"
             Title="My Attendance" >
    <ContentPage.Content>
        <StackLayout >
            <controls:Calendar x:Name="cal" Padding="10,0,10,0"
                           DisabledBorderColor="Black"  
                           StartDay="Monday"  
                           TitleLabelTextColor="#202020"  
                              DatesFontSize="15"
                               TitleLabelFontSize="18"
                           TitleLeftArrowTextColor="Gray"
                           TitleRightArrowTextColor="Gray"
                               WeekdaysFontSize="15"
                               SelectedFontSize="15"
                               SelectedBackgroundColor="White"
                               SelectedBorderColor="White"
                               BorderColor="White"
                               BorderWidth="0"
                               MultiSelectDates="False"
                               CalendarWeekRule="FirstFullWeek"
                         />
            <Grid RowDefinitions="Auto" ColumnDefinitions="*,*,*" Padding="20,10">
                <StackLayout Grid.Column="0" Orientation="Horizontal">
                    <Ellipse  Fill="Red" WidthRequest="20" HeightRequest="20" HorizontalOptions="Start" />
                    <Label Text="Leave" TextColor="Black"></Label>
                </StackLayout>
                <StackLayout Grid.Column="1" Orientation="Horizontal">
                    <Ellipse  Fill="Blue" WidthRequest="20" HeightRequest="20" HorizontalOptions="Start" />
                    <Label Text="Holiday" TextColor="Black"></Label>
                </StackLayout>
                <StackLayout Grid.Column="2" Orientation="Horizontal">
                    <Ellipse Fill="Green" WidthRequest="20" HeightRequest="20" HorizontalOptions="Start" />
                    <Label Text="Weekend" TextColor="Black"></Label>
                </StackLayout>
            </Grid>
            <Frame HasShadow="True" Margin="20" CornerRadius="20" BorderColor="#f5f5f5">
                <Grid RowDefinitions="Auto,11,Auto,Auto,5"  ColumnDefinitions="Auto,Auto,*,Auto">
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Text="Attendance Summary"  FontAttributes="Bold" TextColor="Black"></Label>
                    <BoxView Grid.Row="1" Grid.Column="0" Margin="0,0,0,10" Grid.ColumnSpan="4" BackgroundColor="LightGray"></BoxView>
                    <Label Grid.Row="2" Grid.Column="0"  Text="Total Working Days" FontAttributes="Bold" TextColor="Gray"></Label>
                    <Label Grid.Row="2" Grid.Column="1" Text=":24" TextColor="Gray"></Label>
                    <Label Grid.Row="3" Grid.Column="0" Text="Attendance Not Marked" FontAttributes="Bold" TextColor="Gray"></Label>
                    <Label Grid.Row="3" Grid.Column="1" Text=":04" TextColor="Gray"></Label>
                    <Label Grid.Row="2" Grid.Column="2" Text="Present" FontAttributes="Bold" HorizontalTextAlignment="Center" TextColor="Gray"></Label>
                    <Label Grid.Row="2" Grid.Column="3" Text=":17" TextColor="Gray"></Label>
                    <Label Grid.Row="3" Grid.Column="2" Text="Absent" FontAttributes="Bold" HorizontalTextAlignment="Center" TextColor="Gray"></Label>
                    <Label Grid.Row="3" Grid.Column="3" Text=":03" TextColor="Gray"></Label>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Attendance.Xaml.cs

    public partial class Attendance : ContentPage
    {
        public Attendance()
        {
            InitializeComponent();
            cal.SpecialDates = new AttendanceEvents().Get();
        }
    }

Hope this is helpful to you, Please share your feedback in comment section. Thanks for reading.

-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Please, support my blog by clicking on our sponsors ad! Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and ...
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project -> ...
Read more

School UI Design using xamarin form

Image
School UI Design using xamarin form All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html First add  Fontawesome  in your project. First image is for Dashboard, Second is for TimeTable and last is for Syllabus. Rest of the page will publish in next blog. You can also replace the calendar view with another calendar control as listed below: Calendar Control 1 Calendar Contorl 2 Code is explain in this video First we will change NavigationDrawercolor. In App.xaml add following code in Application.Resources Tag <Application.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesom...
Read more