Hi there!
Today I will try to replicate the Google Photos Gallery design.
It won't be a general CollectionView with an identical cell size. Let's create an infinite scrolling mosaic gallery using .NET MAUI Blazor!
If you are familiar with Blazor you shouldn't have any difficulties migrating your existing website to a mobile application. That way, when you compile your app it will run as a native application, just like any other .NET MAUI app.
Let’s create a new .NET MAUI Blazor app:
The structure of the application is pretty simple. I would say it's a Blazor app with App.xaml and MainPage.xaml.
.NET MAUI brings a new BlazorWebView control which is responsible to load and run your application. You need to provide a HostPage and RootComponents:
You do the same in the Blazor app:
You also need to register BlazorWebView control in MauiProgram.cs:
Now, let's go back to our initial task of building an infinite scrolling gallery app.
For infinite scrolling, we can use Sve.Blazor.InfiniteScroll package. From its name, you can see that it was developed for Blazor, but it perfectly works in our .NET MAUI app as well!
So, install the package:
You can add any Blazor package and simplify your mobile application development.
Now let's create our gallery by editing Index.razor page:
As you can see it's a plain Blazor page without any code specific to mobile development.
Now let's customize our page by adding Index.razor.css:
That's it! You can start the app and wait a few seconds while Blazor starts the app. By scrolling to the bottom of the page, you should see how images dynamically append to the gallery.
Conclusion
.NET MAUI Blazor is a vast enhancement. It opens the door to mobile development for web developers. A front-end developer can create a beautiful UI using HTML and CSS for a web app or reuse it in a mobile application.
It also brings a lot of new controls which were not previously available in native apps.
You can find the source code on GitHub.