Instagram Clone with .Net MAUI

In this Medium post, we will start building an Instagram Clone project using .Net MAUI, a relatively new technology compared to other cross-platform application development frameworks.

Photo by Kenny Eliason on Unsplash

As you know, Instagram is a complex application with multiple pages, modules, and various features. Therefore, it’s not possible to build the entire app at once :) Since I want to work with Maui layouts and lists, I decided to start with the Profile page, which contains different layouts and lists. In this article, we will focus on coding the part where posts are listed in a grid.

At this stage, we won’t be using a REST API, so we will proceed with dummy data. Since the majority of our data consists of photographs, we will use Lorem Pictures.

Even though we will be using dummy data, we will still strive to achieve clean code by using MVVM and data binding. It will be an enjoyable coding adventure. Let’s get started!

Let’s break down the page we want to code.

1. Profile Information:
2. Featured Stories
3. TabBar for transitioning between Posts, Reels, etc.
4. Grid Posts
5. Navigation Bar

Let’s code the Posts section.

When we see this part, we might think of a Grid Layout at first, but let’s not jump into it right away! Because the grid layout is used for grid arrangements, but here we will create a list since the underlying data source will be a list, and we will make it visible.

We will choose the List structure.

When looking at the Maui view options, you will come across two types of lists: ListView and CollectionView. Since ListView only allows us to create vertical lists, it is clear that we should choose CollectionView without even discussing its other advantages.

What will be listed in the CollectionView?

We need to bind the post data to the list so that we can display it. Here, .NET MAUI suggests implementing the MVVM design pattern. So, let’s create a model view for the MainPage section and generate the necessary dummy data.

But before that, we need to create our basic models so that we can use them within the ModelView.

namespace InstagramClone.Models
{
    public class Post
    {
        public int Id { get; set; }
        public string ImagePath { get; set; }
        public string Text { get; set; }
    }
}

Now, let’s create the ViewModel and assign the Dummy Data.

using System;
using System.Collections.ObjectModel;
using System.Windows.Input;
using InstagramClone.Models;

namespace InstagramClone.ViewModels
{
    public class MainPageViewModel
    {
        private IList<Post> _list;
        public IList<Post> List
        {
            get
            {
                if (_list == null)
                    _list = new ObservableCollection<Post>();
                return _list;
            }
            set
            {
                _list = value;
            }
        }
        void Bind()
        {
            List.Clear();
            for (int i = 0; i < 10; i++)
            {
                List.Add(new Post
                {
                    Id = i,
                    ImagePath = $"https://picsum.photos/id/{10 + i}/2500/1667",
                    Text = $"{i}st nature post"
                });
            }
        }
        public MainPageViewModel()
        {
            Bind();
        }
    }
}

Data Binding

To display the data we have created on the page, we need to define the ViewModel we created as the BindingContext for the page.

using InstagramClone.ViewModels;
namespace InstagramClone;

public partial class MainPage : ContentPage
{
 public MainPage()
 {
  InitializeComponent();
        this.BindingContext = new MainPageViewModel();
    }
}

Now, Let’s Create the CollectionView to Display The Posts

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="InstagramClone.MainPage"           
>
  <ScrollView>
        <!-- Content -->
        <StackLayout >                
                <CollectionView ItemsSource="{Binding List}">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout
                         Orientation="Vertical"
                         Span="3"
                         HorizontalItemSpacing="4"
                         VerticalItemSpacing="4"
                        />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Image Aspect="AspectFill" HeightRequest="130" WidthRequest="130" Source="{Binding ImagePath}"/>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
        </StackLayout>
    </ScrollView>
</ContentPage>

After creating the ContentPage, as there will be other sections arranged vertically on this page in the future, we defined a StackLayout. To enable scrolling when the number of posts increases, we wrapped this StackLayout with a ScrollView.

To list the posts, as mentioned earlier, we defined a CollectionView. We bound it to a property of the ViewModel as the data source.

The layout is a Grid Layout with 3 columns. We defined Vertical and Horizontal GridSpacing to have small gaps between the posts.

For the item template, we used an Image control with a width and height of 130px. We bound the ImagePath property of each item from the ViewModel and set AspectFill to ensure that each image fills the width and height without distortion.

In this article, we have seen how to create the Instagram grid posts section by developing a Maui multi-platform app. You can follow the series for more content.

Thank you for reading!