0

Actualmente quiero que se muestren sombreados los bordes de mi elemento frame en Xamarin XAML, use el atributo HasShadow del elemento Frame pero no funciono ni me marco una diferencia, despues renderize un frame personalizado y si me sale pero no es un sombreado lo pone como una segunda linea, uso el Android 7.

introducir la descripción de la imagen aquí

Codigo XAML:
                <localframe:MyFrame 
                   HasShadow="True" 
                   ShadowColor="Red" 
                   BorderColor="Green"
                    OutlineColor="Red"
                   BorderWidth="10"/>

Codigo C# del frame:

   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); }
        }

    }

Renderer de 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);
        }


    }
}
1
  • No es necesario hacer un CustomRender para la sombra, fijate que tengas el espacio hacia afuera necesario para que la muestre a la sombra y no este pegado. Creo que era eso lo que molestaba en la sombra Commented el 25 jun. 2020 a las 2:08

1 respuesta 1

1

Proba con el codigo asi, debes tener en cuenta de que si el Frame no tiene suficiente espacio desde su borde hacia afuera no muestra la sombra.

<StackLayout>
  <Frame HasShadow="True" Margin="20" HorizontalOptions="Center" VerticalOptions="Center">
    <Label Text="Frame"/>
  </Frame>
</StackLayout>

Despues de ver el resultado vas a poder jugar con cuanto espacio deberas contar para mostrar la sombra.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.