What is Grid? with live example please watch: https://youtu.be/gZQyqKheUF4 https://youtu.be/e8cYsSw752s Please, support my blog by clicking on our sponsors ad! Grid is a layout type that allow you to create design using rows/columns Let's see how to use Grid Use Grid tag to create design <Grid></Grid> In C# var grid = new Grid() There are three type of cell size 1) Absolute : Fix size <Grid ColumnDefinition = "50,70,80" /> There will be three Column cell  1st row cell width will be 50  2nd cell width will be70  3rd cell width will be 80 2)  Auto: Will use size of data <Grid ColumnDefinition = "70,70,Auto"/> There will be three Column cell  1st row cell width will be 70  2nd cell width will be70  3rd cell width will be according to data 3) Star: It expand propotionally to space size <Grid ColumnDifinition="*,2*,5*"/> 2* = 20%,  5* = 50%,  100-70 = 30 so * = 3...

  Hotel UI Design using xamarin form About UI Design is for Hotel using xamarin form. There are three forms. List of Places Hotel list of selected place, you can filter and search Third page is detail of selected hotel. Lets begin with code: Copy code for Font awesome from this link . Copy code for CustomEntry from this link . Please watch video  to understand this code. Create Property classes for Hotel and Places. HotelViewModel public class HotelViewModel { public string Name { get; set; } public string Price { get; set; } public string Address { get; set; } public string Days { get; set; } public string Distance { get; set; } public ImageSource Img { get; set; } } public class HotelModel { public List<HotelViewModel> Get() { List<HotelViewModel> list = new List<HotelViewModel>(); list.Add(new HotelViewModel { Img = "https://encrypted-tbn0.gstatic....

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

  Active Project for Task Manager Code for Custom Entry Visit here Class for this Page Visit here ActiveProject.xaml <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:TemplatedPage="clr-namespace:TaskManagerUIDesign.Views.Template" xmlns:custom="clr-namespace:TaskManagerUIDesign.Controls" x:Class="TaskManagerUIDesign.Views.ActiveProject" BackgroundColor="#F5F5F5" Title="Active Projects"> <ContentPage.Content> <ScrollView HorizontalOptions="Start" VerticalOptions="Start" > <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > <Label Text="10 Projects are active." TextColor="Black" Margin="20,20,20,0"><...

 Welcome to my blog.  Today we are going to learn how to create custom entry control. Custum Entry.cs Add this class in main project. public class CustomEntry : Entry { public static readonly BindableProperty BorderColorProperty = BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CustomEntry), Color.Gray); // Gets or sets BorderColor value public Color BorderColor { get => (Color)GetValue(BorderColorProperty); set => SetValue(BorderColorProperty, value); } public static readonly BindableProperty BorderWidthProperty = BindableProperty.Create(nameof(BorderWidth), typeof(int), typeof(CustomEntry), Device.OnPlatform<int>(1, 2, 2)); // Gets or sets BorderWidth value public int BorderWidth { get => (int)GetValue(BorderWidthProperty); set => SetValue(BorderWidthProperty, value); ...

  Visit  here  for code and more information of Task manager UI There are classes which is not defined above link. class definition are as below: public class TaskViewModel { public string TimeLeft { get; set; } public string Name { get; set; } public string Description { get; set; } public double ProgressValue { get; set; } public string Progress { get; set; } public string Status { get; set; } } public class TrackActivityViewModel { public string Time { get; set; } public string Comment { get; set; } public ImageSource Img { get; set; } } public class TrackActivityModel { public List<TaskViewModel> GetTask() { List<TaskViewModel> list = new List<TaskViewModel>(); list.Add(new TaskViewModel { Description = "dummy data is benign information that does not contain any useful data, but serves to reserve space where real...

Task management app will help you to organize your task and team at one place. Easiest way to manage your project and task is to use task manager APP, Today we are going to learn some new UI for task manager app.  Following are UI : Please, support my blog by clicking on our sponsors ad! There are four page: Welcome Page Dashbaord Activity My Task   Welcome page will introduce your app. This page occurs as first page of application Welcome Page.xaml <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TaskManagerUIDesign.Views.WelcomePage" Shell.NavBarIsVisible="False" BackgroundColor="#DBE9F7" xmlns:control="clr-namespace:TaskManagerUIDesign.Controls"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand...