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 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 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() { Lis

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

  Form UI Design in xamarin form Below is the code. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:control="clr-namespace:OnlineBankingUIDesigns.Controls" x:Class="OnlineBankingUIDesigns.Views.NewPayee" Title="New Payee"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Padding="20" RowSpacing="20" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"> <Label Grid.Row="0" Text="Name" HorizontalOptions="FillAndExpand" TextColor="#202020"></Label> <Entry Grid.Row="1" HorizontalTextAlignment="Start" HeightRequest="50" /> <La

  scale animation in xamarin form The animation in Xamarin will help you to make attractive and smooth transition.There are many method for animation. There are some example of method which will help you learn basic steps. The scale method increases or decreases the size of an element . Scaling refers to the resizing of an element. Scaling is used to change the visual appearance of an image, to alter the quantity of information stored in a scene representation, or as a low-level preprocessor in multi-stage image processing chain which operates on features of a particular scale. If you want to see result of scaling animation of this blog then click  here . ScaleTransition.xaml scale animation in xamarin form.  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PageEffectUIDesigns.Views.ScaleTransition"> <ContentPage.Content> <Stack

  First we will create all template that required in above UI. You can copy code for CustomEntry from here . CardCircleImage.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="OnlineBankingUIDesigns.Controls.CardCircleImage"> <ContentView.Content> <StackLayout Padding="0,10,0,0" Margin="20,0,0,0"> <Frame x:Name="frame" HasShadow="True" HeightRequest="70" WidthRequest="70" CornerRadius="100" HorizontalOptions="Center" Padding="0"> <Image x:Name="img" Source="{Binding Img}" Aspect="AspectFill" /> </Frame> <Label Text="{Binding Name}" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="