Posts

Showing posts from December, 2021

Profile UI Design - 2

Image
User Profile page is a way to know each other and it is most important page for social app. It show the personality of that person. when any one looking for someone on social app, first will review profile page. Below page will be use in social app. Lets see code. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:control="clr-namespace:MyProfileUIDesigns.Controls" x:Class="MyProfileUIDesigns.Views.Design2" Shell.NavBarIsVisible="False"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand"> <Grid.RowDefinitions> <RowDefinition Height="300"&g

Profile UI Designs - 1

Image
User Profile page is a way to know each other and it is most important page for social app. It show the personality of that person. when any one looking for someone on social app, first will review profile page. Below page will be use for tracking an object. Let see the xaml code: <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyProfileUIDesigns.Views.Design1" xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:control="clr-namespace:MyProfileUIDesigns.Controls" Shell.NavBarIsVisible="False" NavigationPage.HasNavigationBar="False"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.RowDefinitions> <R

Different Type of Transition Effect in Xamarin Form

Image
  Transition Effect in xamarin form Animation Animation is a method in which figure is manipulated to appear as moving object. Today we will get to know following method: TranslateTo It will move object from one position to another FadeTo It will fade object ScaleTo It will expand the size of the object RotateTo It will rotate the object I have explain in short, for more information please read here FrameView.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PageEffectUIDesigns.Control.FrameView"> <ContentView.Content> <StackLayout Padding="0"> <Frame x:Name="frame" HasShadow="True" CornerRadius="20" HeightRequest="90" Padding="0"> <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptio

Navigate your page with animation

Image
 Hello Friends, I hope you are fine, Today I have come with navigation page with animation. What is Animation? Animation is a method in which figure are manipulated to appear as moving images. There are huge scope of animation in IT industry. So we will start with very small part of animation. In this animation we are using TranslateTo effect. It will move figure from one position to another. Below is the image, How UI looks. Below is video which show animation: There are two page: Page1: Page2: Let start with code: Page1.xaml <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NavigateUIDesign.Views.Page1" NavigationPage.HasNavigationBar="False" Shell.NavBarIsVisible="False" BackgroundColor="White"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand&

Swipe view in xamarin form

What is swipeview? Swipeview is the container that hide menu. This menu will be visible by swipe gestures. This view takes less space due to which application become more aesthetic. It has four properties LeftItems RightItems TopItems BottomItems Below is example: Let see the code: Left Swipe <SwipeView> <SwipeView.LeftItems> <SwipeItems> <SwipeItem Text="Favorite" BackgroundColor="#068d94" IconImageSource="favorite.png"/> <SwipeItem Text="Delete" BackgroundColor="#f9726b" IconImageSource="delete.png"/> </SwipeItems> </SwipeView.LeftItems> <Frame CornerRadius="20" BackgroundColor="#FC7651" HasShadow="True"> <Grid HeightRequest="20" BackgroundColor="#FC765

Listview UI Design 4

Image
 Listview UI Design In this tutorial we will learn how to design listview with image. Listview is the most commonly used scrolling widget. It display its children one after another in scroll direction. We have four listview designs: Design 1: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-1.html Design 2: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html Design 3: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-3.html Design 4: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-4.html Xaml Code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template" x:Class="ListviewUIDesigns.Views.ListViewDesign4" BackgroundColor="LightGray" Title="ListView Design 4"> <ContentPa

Listview UI Design 3

Image
 Listview UI Design In this tutorial we will learn how to design listview with image. Listview is the most commonly used scrolling widget. It display its children one after another in scroll direction. We have four listview designs: Design 1: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-1.html Design 2: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html Design 3: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-3.html Design 4: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-4.html Xaml Code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template" x:Class="ListviewUIDesigns.Views.ListViewDesign3" BackgroundColor="LightGray" Title="ListView Design 3"> <ContentPa

Listview UI Design 2

Image
Listview UI Design - 2 In this tutorial we will learn how to design listview with image. Listview is the most commonly used scrolling widget. It display its children one after another in scroll direction. We have four listview designs: Design 1: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-1.html Design 2: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html Design 3: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-3.html Design 4: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-4.html Xaml Code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template" x:Class="ListviewUIDesigns.Views.ListViewDesign2" BackgroundColor="LightGray" Title="ListView Design 2"> <Conten

Listview UI Design 1

Image
Listview UI Design Please, support my blog by clicking on our sponsors ad! In this tutorial we will learn how to design listview with image. Listview is the most commonly used scrolling widget. It display its children one after another in scroll direction. We have four listview designs: Design 1: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-1.html Design 2: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html Design 3: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-3.html Design 4: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-4.html Xaml Code <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template" x:Class="ListviewUIDesigns.Views.ListViewDesign1" BackgroundColor="LightGray"

Accordion UI Design - Frame Accordion Listview

Image
  Today, I am designing UI of Accordion Please, support my blog by clicking on our sponsors ad! As you see in video there are three types of designs: Simple Accordion https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-designs-part-1.html Simple Accordion Listview:  https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-simple-accordion.html Frame Accordion Listview: https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-frame-accordion.html  For Font awesome, please watch video: https://www.youtube.com/watch?v=0l0LYFdLEGs&t=220s First we will create template: BindingFrameView BindingFrameView.xaml <Frame x:Name="frame" HasShadow="True" > <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.Colum

Accordion UI Design - Simple Accordion ListView

Image
  Today, I am designing UI of Accordion Please, support my blog by clicking on our sponsors ad! As you see in video there are three types of designs: Simple Accordion https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-designs-part-1.html Simple Accordion Listview:  https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-simple-accordion.html Frame Accordion Listview: https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-frame-accordion.html  For Font awesome, please watch video: https://www.youtube.com/watch?v=0l0LYFdLEGs&t=220s EmployeeViewModel.cs public class EmployeeDetailViewModel { public string Qualification { get; set; } public string Experience { get; set; } public string Designation { get; set; } } public class EmployeeViewModel : ObservableCollection<EmployeeDetailViewModel>, INotifyPropertyChanged { public string Name { get; set; } public bool IsExpanded { get; set; } = f