Howdy! 🙋♀️ Continuing with “☃️ Coding Winter 2021 – C # and .NET MAUI ❄️” initiative, today is #DayEight and we will be learning about Shadows in .NET MAUI!
Adding shadows in our applications makes our design look more elegant and takes depth points in specific controls, in Xamarin Form we can do it using some resources such as a Custom Renderer. In this case, with .NET MAUI we already have the shadows integrated natively and consuming fewer resources to achieve this goal! For this reason, in this post, we will be learning a very simple way to do it! Let’s see!
Let’s start!
Knowing about Shadows
Preview 9, of .NET Maui, has given us Microsoft.Maui.Graphics library which provides us with a consistent UI drawing API based on native graphics engines, thus making it easier for us to add borders, shadows, between other super useful and wonderful functionalities that previously require greater use of resources. In this post, we will be focusing on the Shadows.
Some important points to highlight
-
Shadows can also be added in styles and in this way add them to all the components you need, this also allows us to give depth to the controls, have better performance and save code at the same time! 💚
- Shadow is a BindableProperty this means that we can update the properties with bindings. 😎
And how can I implement it? 🧐
In the following image, I show you the simple structure of how we can do it!
Let’ see an example!
Let’s know the properties:
To do it, you can add some of the following properties:
🟠 Brush: It’s the color that the shadow will take.
🟠 Opacity: It’s the opacity that the shadow will take.
🟠 Radius: It’s the Gaussian blur’s radius used to generate the shadow.
🟠 Offset: It is the Offset of the shadow in relation to the visual element it contains.
And Done, in this simple way, we already have shadows to build a beautiful UI in .NET MAUI! 🤓
Spanish post:
References:
- https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-9/?WT.mc_id=DT-MVP-50033
- https://javiersuarezruiz.wordpress.com/2021/10/25/sombras-en-net-maui/
I hope this article has been super useful for you! ⭐️ Thanks for reading! 💚💕
1 thought on “Adding Shadows with .NET MAUI”