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

Online Course UI Design in xamarin form  First we will create template that are required for all pages. There are four template: CartView CategoryView CourseView LecturerView CartView.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:model="clr-namespace:OnlineCourseUIDesigns.ViewModels" x:Class="OnlineCourseUIDesigns.Controls.CartView"> <ContentView.Content> <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20,10"> <Frame BackgroundColor="White" CornerRadius="20" HasShadow="True"> <Grid x:DataType="model:LecturerViewModel" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="20"

  Font Awesome  is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Follow step to create font awesome icon in xamarin form. first create class name "FontAwesome" FontAwesome.cs public static class Solid { public static string Ad { get; set; } = "\uf641"; public static string Address_Book { get; set; } = "\uf2b9"; public static string Address_Card { get; set; } = "\uf2bb"; public static string Adjust { get; set; } = "\uf042"; public static string Air_Freshener { get; set; } = "\uf5d0"; public static string Align_Center { get; set; } = "\uf037"; public static string Align_Justify { get; set; } = "\uf039"; public static string Align_Left { get; set; } = "\uf036"; public static string Align_Right { get; set; } = "\uf038"; public static string A