Xamarin.Formsで背景色をグラデーション表示

StackLayout の背景をグラデーション表示してみます。

なぜ ContentPage ではなく StackLayout なのかというと、ContentPage にグラデーションをかけてみたら Xamarin Studio のXAMLプレビューで一部しか背景色が表示されなかったから。

PCLコード

GradientStackLayout.cs

using Xamarin.Forms;

namespace MyApp.Views
{
	public class GradientStackLayout : StackLayout
	{
		public static readonly BindableProperty StartColorProperty = BindableProperty.Create(
			"StartColor", typeof(Color), typeof(GradientStackLayout), Color.Transparent
		);

		public static readonly BindableProperty EndColorProperty = BindableProperty.Create(
			"EndColor", typeof(Color), typeof(GradientStackLayout), Color.Transparent
		);

		public Color StartColor {
			get { return (Color)GetValue(StartColorProperty); }
			set { SetValue(StartColorProperty, value); }
		}

		public Color EndColor {
			get { return (Color)GetValue(EndColorProperty); }
			set { SetValue(EndColorProperty, value); }
		}
	}
}

MainPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
	xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:views="clr-namespace:MyApp.Views"
	x:Class="MyApp.Views.MainPage">

	<views:GradientStackLayout StartColor="Navy" EndColor="White">
		<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
			<Label Text="MainPage" />
		</StackLayout>
	</views:GradientStackLayout>

</ContentPage>

カスタムレンダラー

iOS

GradientStackLayoutRenderer.cs

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using CoreGraphics;
using CoreAnimation;

using MyApp.Views;
using MyApp.iOS;

[assembly:ExportRenderer(typeof(GradientStackLayout), typeof(GradientStackLayoutRenderer))]

namespace MyApp.iOS
{
	public class GradientStackLayoutRenderer : VisualElementRenderer<GradientStackLayout>
	{
		public override void Draw(CGRect rect)
		{
			base.Draw(rect);

			CAGradientLayer layer = new CAGradientLayer();
			layer.Frame = rect;
			layer.Colors = new CGColor[] {
				Element.StartColor.ToCGColor(),
				Element.EndColor.ToCGColor()
			};
			Layer.InsertSublayer(layer, 0);
		}
	}
}

Android

GradientStackLayoutRenderer.cs

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using Android.Graphics;

using Color = Xamarin.Forms.Color;

using MyApp.Views;
using MyApp.Droid;

[assembly:ExportRenderer(typeof(GradientStackLayout), typeof(GradientStackLayoutRenderer))]

namespace MyApp.Droid
{
	public class GradientStackLayoutRenderer : VisualElementRenderer<GradientStackLayout>
	{
		protected override void DispatchDraw(Android.Graphics.Canvas canvas)
		{
			LinearGradient gradient = new LinearGradient(
				0,								// X軸始点
				0,								// Y軸始点
				0,								// X軸終点
				Height,							// Y軸終点
				Element.StartColor.ToAndroid(),	// 開始色
				Element.EndColor.ToAndroid(),	// 終了色
				Shader.TileMode.Mirror			// 範囲外の描画方法
			);

			Paint paint = new Paint {
				Dither = true
			};
			paint.SetShader(gradient);

			canvas.DrawPaint(paint);

			base.DispatchDraw(canvas);
		}
	}
}

結果

iOS

Android

グラデーション表示されました。
とりあえずは以上です。

こちらを参考にしました

Gradient as background color
https://forums.xamarin.com/discussion/22440/gradient-as-background-color