8
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

result_ios.png

Android

result_android.png

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

こちらを参考にしました

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
8
Help us understand the problem. What are the problem?