So why is this good you could ask yourself… well several reasons, but the major one, is the fact that our staggered view solution relies upon HTML and JavaScript. So having a development environment with the same target would suit us more then mixing XAML and HTML.
Secondly we will now have a fully working app on iOS and Android but also a Mac OS app too! Ow and let’s not forget we also get a Windows desktop version with WinUI 3.
Without any hassle, this is just mind blowing. And thanks to CSS media queries, we can tailor the view of our staggered view automatically.
In these desktop cases, when we go over 768 pixels in width, we change from a 2 column to a 3 column masonry view. You can see the result below in the video.
I can’t stress this enough that having 1 dev environment for all possible targets is a big plus with .Net MAUI and now with all the web power thanks to Blazor we can create nice solutions.
The principle of the code is the same as the Xamarin Forms version, our Index.razor now contains the setup of the image list.
You can see there is one small issue with the loading more images. I had to go with the same Xamarin Forms solution and let JavaScript add the newer images, due to the imagesloaded function of Masonry. But I’m sure someone with more Blazor knowledge than me could fix this and have the image adding functionality purely in the ViewModel.