Image for post
Image for post

XF Shell Gradient Flyout with Magic Gradients

Easily style your Xamarin Forms Shell Flyout menu with no Renderers

Image for post
Image for post

Creating Yet Another Xamarin Project

Image for post
Image for post
Create a new project
Image for post
Image for post
Select Xamarin Forms Mobile App
Image for post
Image for post
Set Name & Location of new project
Image for post
Image for post
Selecting Shell Template

Installing Magic Gradients

Image for post
Image for post
Search for MagicGradient NuGet
Image for post
Image for post
MagicGradient Dependencies

Creating Flyour Header Template

Image for post
Image for post
Default Flyout Header Implementation
Image for post
Image for post
Default TabBar with ShellContent inside
Image for post
Image for post
Simple Flyout Header with Label

Make Flyout Header looks better

Image for post
Image for post
Centered White Label at Flyout Header

Add Some Gradient Background

Image for post
Image for post
Seven Colors Gradient at Flyout Header

Some Conclusion?

Radial Complex XAML Gradient

Image for post
Image for post
Couple Gradients in XAML (radial + linear)

Some CSS Gradients from Magic Gradients Gallery

(Available in Playground app 🤯)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Software Developer | C# .Net | Xamarin

Get the Medium app