Posts

Showing posts from January, 2022

Custom Entry Renderer for Task Manager

Image
 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); }

Classes for Task manager UI

Image
  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 data is

Task Manager UI Design

Image
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 : 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" Padding="20"> <Grid.RowDefin

Welcome Page using xamarin form

Image
Welcome page will introduce your app. This page occurs as first page of application There are three designs. Lets see one by one.   .xaml code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LoginUIDesigns.Views.Welcome.Design1" Shell.NavBarIsVisible="False" NavigationPage.HasNavigationBar="False" BackgroundColor="#1C375C"> <ContentPage.Content> <Grid VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Padding="0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <

.NET MAUI Multi Platform App UI

Image
.NET MAUI Multi Platform App UI Topic we are going to cover: Introduction to .NET MAUI Multi Platform APP UI Advantage of .NET MAUI OS Requirement Supported Platforms  Introduction to .NET MAUI Multi Platform APP UI .NET MAUI Multi Platform APP UI also called .NET MAUI. Currently we are able to create native app on mobile using single code in Xamarin forms, But we can able to create native android, IOS, macos window app using single code with the new feature called .NET MAUI. .NET MAUI Multi Platform APP UI Source: Microsoft .NET MAUI is the open source cross platform framework. It is an evolution of Xamarin.Forms which extended from mobile to desktop application. It is a next iteration of xamarin form, instead of there being xamarin form 6 we are getting .NET MAUI It will be integrated in .NET 6. This app can be written in xaml and c#. There are many similarities between Xamarin forms and .NET MAUI Advantage of .NET MAUI Single development project experience with .net CLI Slim rendere

Login UI Designs - Xamarin Form

Image
 Login Designs Login UI Designs - Xamarin Form .xaml code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LoginUIDesigns.Views.Login.Design4" Shell.NavBarIsVisible="False"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0" Padding="20,50,20,0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="100"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition>

Login Page UI Design

Image
Three Login page Designs Login page is the most important part of the any application(mobile, web, window). It take credential from user and check whether this user is registered or not, what credential does he have. It should be very simple with no overloaded information and also easy to use. Today we are going to learn three different designs of login.  .xaml code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LoginUIDesigns.Views.Login.Design1" Shell.NavBarIsVisible="False" NavigationPage.HasNavigationBar="False" BackgroundColor="#1C375C" xmlns:fontawesome="clr-namespace:LoginUIDesigns.Models"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > <Grid.Ro