Get it from Github and Nuget:
Hello World ✌
My name is Joachim Leonfellner, online I usually go by nor0x or johnny_leo. I'm an indie developer based in Vienna, Austria but trying to be remote as much as possible so traveling is one of my main hobbies. I'm in love with side-projects and learning and currently focus on everything
I'm building a side-project which uses
Xamarin.Forms (porting to
dotnet MAUI already started) and i needed some fancy UI that goes a bit further than the built-in visuals. As an active follower of the Xamarin community Sharpnado was not new to me, so I started looking into Sharpnado.MaterialFrame. It's a great package and covered almost all of my needs for transparency with blurring and acrylics on iOS, Android and UWP. Another platform that i'm targeting with my project is macOS via
Xamarin.Mac where i wanted to have controls like these:
I knew that macOS has some built-in APIs for transparency, vibrancy and blurring so i decided to port the iOS renderer for
Sharpnado.MaterialFrame to macOS.
I began by looking at the code and how the iOS part of
Sharpnado.MaterialFrame was implemented. Soon i found out that it's powered by
I have done macOS development in the past so i already knew about these frameworks and how they work across platforms like iOS and macOS so i thought the port of the iOSMaterialFrameRenderer wouldn't be high effort.
I started by copying the iOS renderer and removing frameworks that are not available on macOS - this was mostly about removing references to
UIKit and replacing these with the
AppKit counterparts, which is an easy task. For most of the
UIKit components there is an
AppKit equivalent with just the class prefix changed from
NS for example:
It's nice that the API between
AppKit is so similar that porting functionality for color, size or rectangle is almost no effort. But also the blur and acrylic functionality was not really hard to port, since macOS has a very similar material API to implement such effects in
NSVisualEffectView. Compared to
AppKit version has a blend-mode property which controls the order of the effects, for desktop scenarios it can be useful not only blur content within the app but also add effects to the contents behind the window. This behavior can be controlled via
NSVisualEffectBlendingMode which is currently set to
Very similar to
UIKit there are also various blur styles on macOS, they are in an enum called
NSVisualEffectMaterial. It contains the values
Dark which are needed for
Sharpnado.MaterialFrame. Compared to
UIKit it also has some desktop specific materials for example
Most of the logic to display the blur and acrylic effect is not on the level of the view (
NSView) but one level deeper on the
_intermediateLayer which is of type
CALayer and can be used without much modification on iOS and macOS - however there is one gotcha i ran into when building the macOS renderer. The vertical axis of the coordinate system is flipped on macOS compared to iOS. For the material frame on macOS this means that the
ShadowOffset property of the layer has be flipped to match the visual representation of the iOS implementation.
PRing my changes
When i had my first implementation of the
macOSMaterialFrameRenderer i forked the
Sharpnado.Acrylic repository and added a
macOS project to see if the renderer works and renders all the properties and modes that are supported. When i was happy with the rendering and tweaks i created a PR to
Sharpnado.MaterialFrame. I have also created a local NuGet so that i can start using my implementation until my PR was merged.
Ship it ⛵!
In the PR we discussed some visual tweaks and after a few commits i was ready to do complete my implementation with the administrative stuff like updating the nuspec file and adding a
macOS specific section the the repository readme. It was a great experience to collaborate with @roubachof on this awesome piece of software. From now on i'm using the official NuGet of
Sharpnado.MaterialFrame with the macOS bits in my projects.
Sharpnado.Acrylic running on
macOS using the native API for blurring and acrylic effects.
For my current usecase this is enough functionality, but who knows - maybe i'll update the
macOS specifics of
Sharpnado.MaterialFrame in the future with more desktop specific functionality.