Xamarin.Forms Gradient Background For All Pages in 1 minute

Magic Gradients could fill all your pages with awesome gradient background🤩 only in 15 lines at code

Hi all 👻, I would like to continue an article about styling applications with Magic Gradients. Today I will show you how easy you could style All your Pages in the Whole App 🤨. Same as before — we will not use any renderers only XAML + one more example with inline CSS 🙃. I know most readers hate it, but it’s awesome, seriously CSS in Xamarin.Forms is an awesome feature 😛.

XF Shell Gradient Flyout with Magic Gradients

😐 A Moment, Please

All GIF’s with gradients looks weird, just because tool which records and makes GIF’s compress it too much, you could check all by yourself — just clone a repo and run on your device 😉:

bbenetskyy/GradientedTabbedApp

Creating Yet Another Xamarin Project

First things first, let’s create a new app. Here is nothing special, just like in the previous article:

• New Project
• Mobile App (Xamarin.Forms)
• Project Name & Location
• Shell Template.

I’m not planning to copy/paste the same images the second time, I’m too lazy to do it, so I just left a cat here 😉

Installing Magic Gradients

Again no rocket science, just search for MagicGradients NuGet and install it into your Xamarin.Forms project.

Search for MagicGradient NuGet

Yep, I hade copy/paste it one more time 🤔, still the same and still need to mention it 😐

ControlTemplate — The First Way

Ok, at last, let’s get down to business, but 😅 before we made any changes let’s look how our newly created app looks like:

Good, first that we will make — it’s adding into App.xaml default style for Label, Entry, and Editor where set TextColor and PlaceholderColor because Gradients that I have been selected are good looks like with White text colors:

Now we are ready to add ControlTemplate. This template we also will define at App.xaml, it will contain a Grid with GradientView and ContentPresenter on the same level:

And use it in all pages where we want it, at all in our case 🙃:

• About Page
• Item Detail Page
• Items Page
• New Item Page

Let’s run and check what we have now:

Style — The Second Way

Hmm, too hard to add ControlTemplatein all pages 😐??? — Let’s add one Style in App.xaml only 😲, no changes in Page’s required 😉:

Good to mention that event if TargetType is set to ContentPage only, thanks to a property ApplyToDerivedTypes set to true that Style will be applied to MvxContentPage(MvvmCross) or other custom Pages from frameworks(if you will use some).

There is still a simple Gradient but a little bit changed colors to showing Power Of Gradients 🦖:

Style & ControlTemplate — The Golden Way

The best that we could do for the app is to define global style and at Pages where we need use ControlTemplates . Also, I strongly recommend using CSS in Xamarin.Forms, but if you don’t want to have some css files in your app you could try inline css 🐵:

All inline CSS copied from Playground App from official Magic Gradients GitHub page:

mgierlasinski/MagicGradients

There more than 380 examples of gradients that you could copy and use in your apps. And will be much more soon 😎.

Is it really take only 1 minute?

In short — yes, if we will check the second approach it will take:

• 0 seconds to open or create a project — we just not count it 😝
• 20 seconds to find and install Magic Gradients NuGet
• 10 seconds to locate your App.xaml and open it
• 30 seconds to copy/paste Style with XAML or CSS GradientView
• ♾️ seconds(infinity) to be cool 😎

Also if you will use a mixed approach or search which Gradient you want to use in your app it will take longer… but as you can see it’s still quite simple 😃

If you will have any questions or see how we could improve it, just ping us we don’t bite 🤠

Marcin Gierlasiński

Bohdan Benetskyi

mgierlasinski/MagicGradients