如何在 Xamarin.forms 中的 Frame 边缘显示阴影？答案

【问题标题】：How can I show shadows on the edges of my Frame in Xamarin.forms?如何在 Xamarin.forms 中的 Frame 边缘显示阴影？
【发布时间】：2020-06-24 22:58:51
【问题描述】：

目前我希望我的框架元素的边缘在 Xamarin XAML 中显示为阴影，使用 Frame 元素的 HasShadow 属性但它不起作用或标记差异，然后我将呈现一个自定义框架，如果它出来但这不是阴影，而是将其作为第二行，我使用的是 Android 7。

Codigo XAML：

        <localframe:MyFrame 
           HasShadow="True" 
           ShadowColor="Red" 
           BorderColor="Red"
           BorderWidth="10"/>

代码框架：

public class MyFrame:Frame
    {

        public static readonly BindableProperty ShadowColorProperty = BindableProperty.Create(nameof(ShadowColor), typeof(Color), typeof(MyFrame), Color.Transparent);
        public static readonly BindableProperty BorderWidthProperty = BindableProperty.Create(nameof(BorderWidth), typeof(float), typeof(MyFrame));

        public Color ShadowColor
        {
            get { return (Color)GetValue(ShadowColorProperty); }
            set { SetValue(ShadowColorProperty, value); }
        }


        public float BorderWidth
        {
            get { return (float)GetValue(BorderWidthProperty); }
            set { SetValue(BorderWidthProperty, value); }
        }

    }

Android 中的代码渲染框架：

[assembly: ExportRenderer(typeof(MyFrame), typeof(FrameRendererMy))]
namespace xxxxxxxxxx.Droid
{
    [Obsolete]
    public class FrameRendererMy : FrameRenderer
    {

        public FrameRendererMy(Context context) : base(context)
        {

        }


        protected override void OnDraw(Canvas canvas)
        {

            var frame = Element as MyFrame;

            var my1stPaint = new Android.Graphics.Paint();
            var my2ndPaint = new Android.Graphics.Paint();
            var backgroundPaint = new Android.Graphics.Paint();

            my1stPaint.AntiAlias = true;
            my1stPaint.SetStyle(Paint.Style.Stroke);
            my1stPaint.StrokeWidth = frame.BorderWidth + 2;
            my1stPaint.Color = frame.BorderColor.ToAndroid();

            my2ndPaint.AntiAlias = true;
            my2ndPaint.SetStyle(Paint.Style.Stroke);
            my2ndPaint.StrokeWidth = frame.BorderWidth;
            my2ndPaint.Color = frame.BackgroundColor.ToAndroid();

            backgroundPaint.SetStyle(Paint.Style.Stroke);
            backgroundPaint.StrokeWidth = 4;
            backgroundPaint.Color = frame.BackgroundColor.ToAndroid();

            Rect oldBounds = new Rect();
            canvas.GetClipBounds(oldBounds);

            RectF oldOutlineBounds = new RectF();
            oldOutlineBounds.Set(oldBounds);

            RectF myOutlineBounds = new RectF();
            myOutlineBounds.Set(oldBounds);
            myOutlineBounds.Top += (int)my2ndPaint.StrokeWidth + 3;
            myOutlineBounds.Bottom -= (int)my2ndPaint.StrokeWidth + 3;
            myOutlineBounds.Left += (int)my2ndPaint.StrokeWidth + 3;
            myOutlineBounds.Right -= (int)my2ndPaint.StrokeWidth + 3;


            canvas.DrawRoundRect(oldOutlineBounds, 10, 10, backgroundPaint); //to "hide" old outline
            canvas.DrawRoundRect(myOutlineBounds, frame.CornerRadius, frame.CornerRadius, my1stPaint);
            canvas.DrawRoundRect(myOutlineBounds, frame.CornerRadius, frame.CornerRadius, my2ndPaint);

            base.OnDraw(canvas);
        }


    }
}

【问题讨论】：

您想为您的Border 绘制圆角矩形吗？能否提供截图或其他简单的需求？

标签： c# xamarin xamarin.forms xamarin.android shadow

【解决方案1】：

我相信这是 Xamarin.Forms 中的 existing issue。他们还在this thread HasShadow 中提到Android 问题对Android 没有影响。

您可以使用PancakeView，它是Frame 的一个非常不错且功能齐全的替代品。

【讨论】：

【解决方案2】：

试试这个代码

    <StackLayout Margin="10">
    <Frame  CornerRadius="5"  Padding="8" HasShadow="True" Margin="10">
        <StackLayout>
            <Label Text="Frame Example" FontSize="Medium"  FontAttributes="Bold" />
            <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
            <Label Text="Frames can wrap more complex layouts"/>
        </StackLayout>
    </Frame>
</StackLayout>

如果不起作用，请检查以下答案

【讨论】：