School UI Design using xamarin form

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

All Part of School UI Design:

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="FontAwesomeSolid" Android="FontAwesome5FreeSolid900.otf#Regular" iOS="FontAwesome5Free-Solid" />

            <Color x:Key="Primary">#08457E</Color>
            <Style TargetType="Button">
                <Setter Property="TextColor" Value="White"></Setter>
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="#332196F3" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>        
    </Application.Resources>

Lets create class for TimeTable.

   public class TimeTableViewModel
    {
        public string Time { get; set; }
        public string TotalTime { get; set; }
        public string Name { get; set; }
        public string Subject { get; set; }
    }

    public class TimeTableModel
    {
        public List<TimeTableViewModel> Get()
        {
            List<TimeTableViewModel> list = new List<TimeTableViewModel>();
            list.Add(new TimeTableViewModel { Time = "9:00 AM", TotalTime = "9:00 AM to 10:00 AM",Name = "ALEXANDER GRAHAM BELL",Subject = "Telecommunication" });           
            list.Add(new TimeTableViewModel { Time = "10:00 AM", TotalTime = "10:00 AM to 11:00 AM",Name = "NEIL ARMSTRONG", Subject = "Digital Marketing" });           
            list.Add(new TimeTableViewModel { Time = "11:00 AM", TotalTime = "11:00 AM to 12:00 AM",Name = "GAYATRI CHAKRAVORTY SPIVAK", Subject = "Computer Engineer" });           
            list.Add(new TimeTableViewModel { Time = "12:00 AM", TotalTime = "12:00 AM to 13:00 AM",Name = "ALBERT EINSTEIN", Subject = "Data Migration" });           
            list.Add(new TimeTableViewModel { Time = "13:00 AM", TotalTime = "13:00 AM to 14:00 AM",Name = "MARIE CURIE", Subject = "Computer Language" });           
            list.Add(new TimeTableViewModel { Time = "14:00 AM", TotalTime = "14:00 AM to 15:00 AM",Name = "TONI MORRISON", Subject = "Telecommunication" });           
            return list;
        }
    }

Lets create class for Syllabus

    public class SyllabusViewModel
    {
        public string Name { get; set; }
    }

    public class SyllabusModel
    {
        public List<SyllabusViewModel> Get()
        {
            List<SyllabusViewModel> list = new List<SyllabusViewModel>();
            list.Add(new SyllabusViewModel { Name = "Software Engineering" });
            list.Add(new SyllabusViewModel { Name = "Data Structure" });
            list.Add(new SyllabusViewModel { Name = "Search Engine Optimization" });
            list.Add(new SyllabusViewModel { Name = "Android Programming " });
            list.Add(new SyllabusViewModel { Name = "Internet of Things " });
            list.Add(new SyllabusViewModel { Name = "Computer Organization " });
            list.Add(new SyllabusViewModel { Name = "Data Mining" });
            list.Add(new SyllabusViewModel { Name = "Relational Database Management System" });
            list.Add(new SyllabusViewModel { Name = "Data Structure using C" });
            list.Add(new SyllabusViewModel { Name = "Data Structure using C" });
            list.Add(new SyllabusViewModel { Name = "Data Structure using C" });
            return list;
        }
    }
Lets create template for Dashboard.
ImageButton.xaml
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.ImageButton">
  <ContentView.Content>
        <Grid RowDefinitions="25,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Label x:Name="lblIcon" Grid.Row="0"  HorizontalOptions="Center" TextColor="#08457E" 
                   FontFamily="{StaticResource FontAwesomeSolid}" FontSize="20"  ></Label>
            <Label x:Name="lblText" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start"  
                   TextColor="#202020"></Label>
        </Grid>
    </ContentView.Content>
</ContentView>

ImageButton.cs

    public partial class ImageButton : ContentView
    {
        public event EventHandler Clicked;

        public ImageButton()
        {
            InitializeComponent();
            TapGestureRecognizer tap = new TapGestureRecognizer();
            tap.Command = new Command(OnClicked);
            GestureRecognizers.Add(tap);
        }

        public void OnClicked(object sender)
        {
            if (Clicked != null)
            {
                this.Clicked(this, EventArgs.Empty);
            }
        }
        public string Icon
        {
            get
            {
                return lblIcon.Text;
            }
            set
            {
                lblIcon.Text = value;
            }
        }

        public string Text
        {
            get
            {
                return lblText.Text;
            }
            set
            {
                lblText.Text = value;
            }
        }
    }

ScheduleWeeklyControl.Xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.ScheduleWeeklyControl">
  <ContentView.Content>
      <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20,0,0,0"
            ColumnDefinitions="*,*,*,*,*,*,*" RowDefinitions="Auto,Auto">
            <Label Grid.Row="0" Grid.Column="0"  Text="S" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate1" Grid.Row="1" Grid.Column="0" FontAttributes="Bold" TextColor="White"></Label>

            <Label Grid.Row="0" Grid.Column="1" Text="M" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate2" Grid.Row="1" Grid.Column="1" FontAttributes="Bold" TextColor="White"></Label>

            <Label Grid.Row="0" Grid.Column="2"  Text="T" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate3" Grid.Row="1" Grid.Column="2" FontAttributes="Bold" TextColor="White"></Label>

            <Label Grid.Row="0" Grid.Column="3"  Text="W" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate4" Grid.Row="1" Grid.Column="3" FontAttributes="Bold" TextColor="White"></Label>

            <Label Grid.Row="0" Grid.Column="4"  Text="T" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate5" Grid.Row="1" Grid.Column="4" FontAttributes="Bold" TextColor="White"></Label>

            <Label Grid.Row="0" Grid.Column="5"   Text="F" FontAttributes="Bold" TextColor="#FFA500"></Label>
            <Label x:Name="lblDate6" Grid.Row="1" Grid.Column="5" FontAttributes="Bold" TextColor="#FFA500"></Label>

            <Label Grid.Row="0" Grid.Column="6"  Text="S" FontAttributes="Bold" TextColor="White"></Label>
            <Label x:Name="lblDate7" Grid.Row="1" Grid.Column="6" FontAttributes="Bold" TextColor="White"></Label>
        </Grid>
  </ContentView.Content>
</ContentView>

ScheduleWeeklyControl.Xaml.cs

    public partial class ScheduleWeeklyControl : ContentView
    {
        public ScheduleWeeklyControl()
        {
            InitializeComponent();
            Color clr = Color.Blue;
            DayOfWeek Day = DateTime.Now.DayOfWeek;
            int Days = Day - DayOfWeek.Sunday; //here you can set your Week Start Day
            DateTime WeekStartDate = DateTime.Now.AddDays(-Days);
            lblDate1.Text = WeekStartDate.ToString("dd");
            lblDate2.Text = WeekStartDate.AddDays(1).ToString("dd");
            lblDate3.Text = WeekStartDate.AddDays(2).ToString("dd");
            lblDate4.Text = WeekStartDate.AddDays(3).ToString("dd");
            lblDate5.Text = WeekStartDate.AddDays(4).ToString("dd");
            lblDate6.Text = WeekStartDate.AddDays(5).ToString("dd");
            lblDate7.Text = WeekStartDate.AddDays(6).ToString("dd");
        }
    }

CircleImage.Xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.CircleImage">
  <ContentView.Content>
        <StackLayout Padding="0,30,0,0" >
            <Frame x:Name="frame" HasShadow="True" HeightRequest="80" WidthRequest="80" CornerRadius="100" HorizontalOptions="Center" Padding="0">
                <Image x:Name="img" Aspect="AspectFill" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ"/>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Dashboard.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.Dashboard"
             Shell.NavBarIsVisible="False"
             BackgroundColor="#F8F8F8"
             xmlns:fontawesome="clr-namespace:SchoolUIDesigns.Utility">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" Padding="20" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
            <Grid RowDefinitions="Auto,Auto,Auto" HeightRequest="270" >
                <Image Opacity="0.9" Margin="-25" Source="https://cdn.pixabay.com/photo/2020/02/19/22/57/blue-background-4863452_1280.jpg"
                           Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="3"></Image>
                <control:CircleImage Grid.Row="0"></control:CircleImage>
                <Label Grid.Row="1" HorizontalOptions="Center" TextColor="White" FontAttributes="Bold" Text="Alexander Partrik"></Label>
                <Label Grid.Row="2" HorizontalOptions="Center" TextColor="White" Text="Class - 12th | Roll No: 123"></Label>
            </Grid>
            
            <Label Grid.Row="1"  Text="Presidency School" TextColor="#202020" FontSize="18" FontAttributes="Bold"></Label>
            <Label Grid.Row="2" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
                   TextColor="Gray"></Label>
           
            <Frame Grid.Row="3"  HasShadow="True" Margin="0,10,0,0" CornerRadius="20" HeightRequest="90">
                <Grid VerticalOptions="Center" ColumnDefinitions="*,2,*,2,*">
                    <control:ImageButton  Clicked="btnTimeTable_Clicked" Grid.Row="0" Grid.Column="0" Text="Time Table" Icon="{x:Static fontawesome:Solid.Table}"/>
                    <BoxView Grid.Row="0" Grid.Column="1"  BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Clicked="btnSyllabus_Clicked" Grid.Row="0" Grid.Column="2" Text="Syllabus" Icon="{x:Static fontawesome:Solid.Book}"/>
                    <BoxView Grid.Row="0" Grid.Column="3" BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Grid.Row="0" Clicked="btnAttendance_Clicked" Grid.Column="4" Text="Attendance" Icon="{x:Static fontawesome:Solid.Align_Justify}"/>
                </Grid>
            </Frame>

            <Frame Grid.Row="4" HasShadow="True" Margin="0,10,0,0" CornerRadius="20" HeightRequest="90">
                <Grid VerticalOptions="Center" ColumnDefinitions="*,2,*,2,*">
                    <control:ImageButton  Grid.Row="0" Grid.Column="0" Text="Homework" Icon="{x:Static fontawesome:Solid.Th_List}"/>
                    <BoxView Grid.Row="0" Grid.Column="1"  BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Grid.Row="0" Grid.Column="2" Text="Examination" Icon="{x:Static fontawesome:Solid.Edit}"/>
                    <BoxView Grid.Row="0" Grid.Column="3" BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Grid.Row="0" Grid.Column="4" Text="Marks" Icon="{x:Static fontawesome:Solid.Newspaper}"/>
                </Grid>
            </Frame>

            <Frame Grid.Row="5" HasShadow="True" Margin="0,10,0,0" CornerRadius="20" HeightRequest="90">
                <Grid VerticalOptions="Center" ColumnDefinitions="*,2,*,2,*">
                    <control:ImageButton  Grid.Row="0" Grid.Column="0" Text="Holiday" Icon="{x:Static fontawesome:Solid.Pallet}"/>
                    <BoxView Grid.Row="0" Grid.Column="1"  BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Grid.Row="0" Grid.Column="2" Text="Fees" Icon="{x:Static fontawesome:Solid.Boxes}"/>
                    <BoxView Grid.Row="0" Grid.Column="3" BackgroundColor="#F5F5F5"></BoxView>
                    <control:ImageButton Grid.Row="0" Grid.Column="4" Text="Gallery" Icon="{x:Static fontawesome:Solid.Money_Bill}"/>
                </Grid>
            </Frame>



        </Grid>
    </ContentPage.Content>
</ContentPage>

Dashboard.cs

    public partial class Dashboard : ContentPage
    {
        public Dashboard()
        {
            InitializeComponent();
        }

        private async void btnTimeTable_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("TimeTable");
        }

        private async void btnSyllabus_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("Syllabus");
        }

        private async void btnAttendance_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("Attendance");
        }
    }

Let's create Timetable Page. First we will create template for it.

TimeTableView.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:model="clr-namespace:SchoolUIDesigns.ViewModels"
             x:Class="SchoolUIDesigns.Control.TimeTableView">
    <ContentView.Content>
        <Grid x:DataType="model:TimeTableViewModel" ColumnSpacing="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
              ColumnDefinitions="20,1,25,*" RowDefinitions="150">
            <BoxView  Grid.Row="0" Grid.Column="1"  VerticalOptions="FillAndExpand" BackgroundColor="#202020"/>
            <Label Grid.Row="0" Text="{Binding Time}" BackgroundColor="#F8F8F8" VerticalOptions="Start" FontAttributes="Bold" TextColor="#202020" 
                   Margin="5,25,0,0" Grid.Column="0" Grid.ColumnSpan="3" ></Label>
            <Frame Grid.Row="0" BorderColor="White" Grid.Column="3" HasShadow="True" CornerRadius="20" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand">
                <StackLayout>
                    <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="#08457E" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand"></Label>
                    <Label Text="{Binding Subject}" FontAttributes="Bold" TextColor="#202020" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand"></Label>
                    <Label Text="{Binding TotalTime}" TextColor="Black" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand"></Label>
                </StackLayout>
            </Frame>
        </Grid>
    </ContentView.Content>
</ContentView>

TimeTable.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.TimeTable"
             Title="TimeTable"
             Shell.NavBarHasShadow="False"
             BackgroundColor="#F8F8F8">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" Padding="20" VerticalOptions="FillAndExpand"
              RowDefinitions="150,30,*">
            <Path Grid.Row="0" Data="m202.98501,143.28501l218.99999,0l0,132.40452c-107.49999,-46 -109.49999,50.44855 -218.99999,21.78461l0,-154.18913z"
                Margin="-20"  Fill="#08457E" Aspect="Fill" Stroke="#08457E"></Path>
            <StackLayout Grid.Row="0" VerticalOptions="FillAndExpand">
                <Label Text="February" TextColor="White" FontSize="20" FontAttributes="Bold" HeightRequest="40"></Label>
                <control:ScheduleWeeklyControl VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Grid.Row="0"></control:ScheduleWeeklyControl>
            </StackLayout>

            <ListView Grid.Row="2" x:Name="listView" ItemSelected="listView_ItemSelected" HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <control:TimeTableView></control:TimeTableView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            
        </Grid>
    </ContentPage.Content>
</ContentPage>

Now we will create page for Syllabus

Syllabus.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.Syllabus"
             BackgroundColor="#F8F8F8"
             Title="Syllabus">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ListView x:Name="listview" HasUnevenRows="True" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout Padding="20,10">
                                    <Frame HasShadow="True" BackgroundColor="White" CornerRadius="20">
                                        <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="#08457E"></Label>
                                    </Frame>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Syllabus.xaml.cs

    public partial class Syllabus : ContentPage
    {
        public Syllabus()
        {
            InitializeComponent();
            listview.ItemsSource = new SyllabusModel().Get();
        }
    }

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

-

Comments

  1. UnknownMarch 1, 2022 at 5:15 PM

    What kind of Control is "control:ScheduleWeeklyControl"?

    ReplyDelete
    Replies
    1. Xamarin UI DesignMarch 3, 2022 at 10:13 AM

      I forgot to add that control in blog. I added "ScheduleWeeklyControl" in this blog, Please go through it again. Thanks.

      Delete

Post a Comment

Popular posts from this blog

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framewor
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