Gradient backgrounds in Xamarin iOS

Gradient backgrounds in Xamarin iOS

Did you notice that graphic designers love gradients? It was a trend in mobile designs that started in 2017 and now it’s getting even more popular. Let me share a few useful code snippets that will help you to make awesome looking iOS applications with Xamarin.

Now to explain the code above. As the center, I took an arbitrary point that provides good results. In this case, it’s 1/3 of the view width and 90 points from the top of the screen. To make sure that the gradient covers the whole view, we need to calculate a distance to the farthest corner.

Now the next bit of code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

publicstaticclassColorExtensions

{

publicstaticUIImage ToImage(thisUIColor color)

{

varrect=newCGRect(0,0,1,1);

UIGraphics.BeginImageContext(rect.Size);

varcontext=UIGraphics.GetCurrentContext();

context.SetFillColor(color.CGColor);

context.FillRect(rect);

varimg=UIGraphics.GetImageFromCurrentImageContext();

UIGraphics.EndImageContext();

returnimg;

}

}

We have a simple extension method that creates an UIImage filled with a given color. We’re going to use this extension to make the navigation bar semi-transparent. Let’s put everything together now.

A storyboard with a navigation controller and a single view controller. The view controller contains a view with Custom Class set to UIGradientView.