samples - xamarin forms border style

Xamarin forma Shadow on Frame en Android

Question

La clase Frame en Xamarin Forms es bastante limitada y no puede permitirme obtener una sombra detrás del Frame. Creé un renderizador personalizado para iOS usando este código:

public class RatingInfoFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
Layer.BorderColor = UIColor.White.CGColor;
Layer.CornerRadius = 10;
Layer.MasksToBounds = false;
Layer.ShadowOffset = new CGSize(-2, 2);
Layer.ShadowRadius = 5;
Layer.ShadowOpacity = 0.4f;
}
}

Hacer una similar en Android me está causando problemas, ya que mi conocimiento sobre Android nativo es algo limitado. ¿Alguien podría decirme qué mirar, tal vez algún buen ejemplo de código? No he encontrado nada que se parezca a esto.

Answer 1

Puede ser muy fácil en la plataforma Android, pero antes que nada, debe crear su sombra en la carpeta Drawable de recursos de Android. Por ejemplo:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB" />
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

Denomine este archivo como "shadow.xml" y colóquelo en la carpeta Drawable del proyecto de Android, luego en su RatingInfoFrameRenderer :

public class RatingInfoFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
ViewGroup.SetBackgroundResource(Resource.Drawable.shadow);
}
}
}

Para cambiar el estilo de la sombra, puede modificar el archivo shadow.xml, para obtener más información al respecto, puede consultar el documento oficial de Google: LayerList .

Answer 2

Pude obtener un efecto de sombra en Formularios Xamarin para una vista de cuadro, estoy bastante seguro de que se puede usar de manera similar para un Marco. Tengo la pista de la documentación de Android

Agregué una nueva propiedad llamada HasShadow

 public static readonly BindableProperty HasShadowProperty =
BindableProperty.Create("HasShadow", typeof(bool), typeof(ExtendedBoxView), false);
public bool HasShadow
{
get { return (bool)GetValue(HasShadowProperty); }
set { SetValue(HasShadowProperty, value); }
}

Aquí está el código para el Renderer en Android

 public class ExtendedBoxViewRenderer : BoxRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
{
base.OnElementChanged(e);
var element = e.NewElement as ExtendedBoxView;
if (element == null) return;
if (element.HasShadow)
{
ViewGroup.Elevation = 8.0f;
ViewGroup.TranslationZ = 10.0f;
}
}
}

Y así es como se ve

ACTUALIZAR

Descubrí que este enfoque provoca la falla de la aplicación para versiones anteriores de Android. Aunque no he encontrado una manera de mostrar Shadows en las versiones de Android anteriores a Lollipop. Esto evitará que se bloquee la aplicación

 public class ExtendedBoxViewRenderer : BoxRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
{
base.OnElementChanged(e);
var element = e.NewElement as ExtendedBoxView;
if (element == null) return;
if (element.HasShadow)
{
//For some reason ViewCompat has issues when running in debug hence the workaround.
#if DEBUG
double dAndroidVersion;
if (double.TryParse(Build.VERSION.Release, out dAndroidVersion))
{
if (dAndroidVersion < 21)
return;
}
#else
ViewCompat.SetElevation(ViewGroup, 8.0f);
ViewCompat.SetTranslationZ(ViewGroup, 10.0f);
#endif
}
}
}