Xamarin.forms BoxViewに角丸をつける

Question

こんにちは。
Xamarin.formsのBoxViewコントロールについて質問です。

BoxViewに角丸をつけたいのですが、
方法として、対象がiOSの場合
⑴ カスタムレンダラを使用して、iOSプラットフォームで記述する
⑵ Effects機能を使用して、iOSプラットフォームで記述する
を検討しています。

⑴の場合は、描画時にsharedプロジェクト側で指定した大きさにならず、
⑵の場合は、iOS側でBoxViewをUIViewとして受け取れず(Nullになる)、うまくいきません。

何かソリューションを持っている方いらっしゃいますか？

⑴のsharedプロジェクト側コード

namespace Test
{
	public class MyBoxView : BoxView
	{

		public Color StrokeColor { get; set; } //ボーダ色
		public Color FillColor { get; set; } //塗りつぶし色

		public int LineWidth { get; set; } //ボーダの幅(0px～10px)
		public float Radius { get; set; } //角丸(0%～50%)

		public MyBoxView(Color fillColor, Color strokeColor, int lineWidth, float radius)
		{
			FillColor = fillColor;
			StrokeColor = strokeColor;
			LineWidth = lineWidth;
			Radius = radius;

			//デフォルト値でサイズとレイアウトを設定
			WidthRequest = 100;
			HeightRequest = 100;
			HorizontalOptions = LayoutOptions.Center;
			VerticalOptions = LayoutOptions.Center;
		}
	}

	public class BoxViewTest : ContentPage
	{
		public BoxViewTest()
		{
			var layout = new AbsoluteLayout();

			var myBox = new MyBoxView(Color.Gray, Color.Yellow, 1, 10);
			AbsoluteLayout.SetLayoutFlags(myBox, AbsoluteLayoutFlags.All);
			AbsoluteLayout.SetLayoutBounds(myBox, new Rectangle(0, 0.5, 1, 0.1));
			layout.Children.Add(myBox);

			Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
			Content = layout;
        }
    }
}

⑴のiOSプロジェクト側コード

//MyBoxViewのレンダラーをMyBoxViewRendererに変更する
[assembly: ExportRenderer(typeof(MyBoxView), typeof(MyBoxViewRenderer))]

namespace Test.iOS
{
		public override void Draw(CGRect rect)
		{
			//デフォルトの描画を無効にする
			//base.Draw(rect); 

			//モデルオブジェクトの取得
			var myBoxView = (MyBoxView)Element; //Xamarin.Forms 1.0.6186 では、Modelでした
			using (var context = UIGraphics.GetCurrentContext())
			{
				//塗りつぶしの色を指定
				context.SetFillColor(myBoxView.FillColor.ToCGColor());
				//ボーダの色を指定
				context.SetStrokeColor(myBoxView.StrokeColor.ToCGColor());
				//ボーダの幅を指定
				context.SetLineWidth(myBoxView.LineWidth);
				//ボーダの分だけ四角のサイズを小さくする
				var rectangle = Bounds.Inset(myBoxView.LineWidth, myBoxView.LineWidth);
				//サイズ(幅)の半分を50%として、radiusを求める
				var radius = (float)((rectangle.Width / 2) * (myBoxView.Radius / 50));
				
				//描画
				var path = CGPath.FromRoundedRect(rectangle, radius, radius);
				context.AddPath(path);
				context.DrawPath(CGPathDrawingMode.FillStroke);
			}
		}
}

⑵のsharedプロジェクト側コード

namespace Test
{
	public class BoxViewTest : ContentPage
	{
		public BoxViewTest()
		{
			var layout = new AbsoluteLayout();
			var box = new BoxView
			{
				BackgroundColor = Color.Blue
			};
			AbsoluteLayout.SetLayoutFlags(box, AbsoluteLayoutFlags.All);
			AbsoluteLayout.SetLayoutBounds(box, new Rectangle(0.5, 0.5, 0.8, 0.5));
			layout.Children.Add(box);
			box.Effects.Add(Effect.Resolve("Test.TestEffects"));

			Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
			Content = layout;
        }
    }
}

⑵のiOSプロジェクト側コード

[assembly: ResolutionGroupName("Test")]
[assembly: ExportEffect(typeof(TestEffects), "TestEffects")]

namespace Test.iOS.Effects
{
	public class TestEffects : PlatformEffect
	{
		protected override void OnAttached()
		{
			var box = Control;

            // ここでboxがnull
			if (box == null)
			{
				return;
			}
			box.Layer.BorderWidth = 10;
			box.Layer.BorderColor = UIColor.Black.CGColor;
			box.Layer.CornerRadius = 10;
			box.ClipsToBounds = true;
        }

		protected override void OnDetached()
		{
		}

    }
}

以上、よろしくお願いします。

Answer 1

この場合は Control ではなく Container プロパティの方を参照すれば期待通りの動作になると思います。

Effectの Container にはRendererの参照、 Control にはRendererが抱えるネイティブコントロールの参照がセットされます。

iOSの場合、BoxViewRndererは子Viewを持っていないため、Controlプロパティはnullとなります。

Rendererの定義

// iOSのBoxRendererはVisualElementRenderer<T>から派生しており、子を持たない
public class BoxRenderer : VisualElementRenderer<BoxView>

// 他のほとんどのViewのRendererはViewRenderer<TView, TNativeView>から派生しており
// 第2型引数のネイティブコントロールがEffectのControlプロパティに渡される
public class ButtonRenderer : ViewRenderer<Button, UIButton>

iOSの場合、RendererはUIViewから派生しているので、Container.Layerに対して角丸等を設定すればOKです。

Comments

[gucchi28]

ご回答いただきありがとうございます。
Containerプロパティを参照することでうまくできました。
大変助かりました、ありがとうございました。

[gucchi28]

すみません、追加質問です。
iOSでは、UIViewで角丸をつけることができましたが、
Androidで、ViewGroupで角丸をつけることに苦戦しておりまして、
調査したところ、XMLで記述すれば角丸をつけることが可能みたいなのですが、
XamarinでXMLを使う方法が不明であり、また、C#で統一して書きたいと思っています。
ソリューションはありますでしょうか？

[P3PPP]

Androidの場合はBackgroundプロパティにGradientDrawableなどをセットして、それに対してCornerRadiusを設定するといいと思います。
ただし、AndroidのBoxRendererではBoxView.Colorの色を(Androidの)View.SetBackgroundColorにマッピングしているため、これをGradientDrawable.SetColorにマッピングする独自のRendererを作ってBoxViewに対応するRendererとして差し替えるようにしないと思った通りの動作にならないかもしれません。

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/BoxRenderer.cs

[gucchi28]

ご回答いただきありがとうございます。
一筋縄ではいかないのですね、、
トライしてみます。