Dashboard in xamarin form You can get fontawesome from this link . First we will create custom navigation bar TopNavBar.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="EShoppingUIDesigns.Controls.TopNavBar" xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" BackgroundColor="#3AC3D6"> <ContentView.Content> <Grid HorizontalOptions="FillAndExpand" RowDefinitions="Auto,Auto" RowSpacing="20" ColumnDefinitions="Auto,*,Auto" Padding="10"> <Image Grid.Row="0" Grid.Column="0" Source="threelines.png" Aspect="AspectFill" HeightRequest="20" WidthRequest="25"></Image> <Label Grid.Row="0" Grid.Column="1" Margin="10,0,

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

 In previous blog  we have seen below UI Design for online course Online Course UI Design xamarin form I have create two more UI Designs for Online courses. I have also explain the code, Please watch it here. Below is UI Design: Online Course UI Design using xamarin form First three Page in above image is actually one page shown tabs design in each page. First we will create all classes then template then we will create pages. Classes are below. CourseViewModel.cs public class CourseViewModel { public string Name { get; set; } public string Rating { get; set; } public string LecturerName { get; set; } public string Price { get; set; } public string Icon { get; set; } public string Tag { get; set; } public Color IconColor { get; set; } public ImageSource ProfilePic { get; set; } } CourseModel.cs public class CourseModel { public List<CourseViewModel> GetList() {

  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="