Introduction In this tutorial, we will explore how to populate a `ListView` in a .NET MAUI app using the powerful combination of `ObservableCollection` and `INotifyPropertyChanged`. This approach ensures that changes to the underlying data are automatically reflected in the UI, providing a smooth and responsive user experience. Prerequisites Make sure you have .NET MAUI installed, and you have set up your development environment. If not, follow the official [installation guide](https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation) before proceeding. Creating the Model Let's start by defining a simple model class representing items in our list. Open your project and create a new class named `ListItemModel.cs`: public class ListItemModel : INotifyPropertyChanged { private string _itemName; public string ItemName { get { return _itemName; } set { if (_itemName != value) { _itemName ...

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

 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 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 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 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" Title="Listview Design 1"> <Content...

  Today, I am designing UI of Accordion 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.ColumnDefinitions> <ColumnDefin...

  Today, I am designing UI of Accordion 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; } = false; public string Icon { get; set;...

 Today, I am designing UI of Accordion 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: FrameView FrameView.xaml <Frame x:Name="frame" HasShadow="True" > <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.ColumnDefinitions> <ColumnDefinition Width=...