将颜色阴影拖放到 Xamarin 中的按钮

Question

我想在 Android 和 iOS 上为 Xamarin 中的按钮添加阴影。我想要以下设计： Shadow button

我试过如下使用渲染器：

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
    {
        base.OnElementChanged(e);

        Control.SetShadowLayer(10, 10, 10, Android.Graphics.Color.Rgb((int)e.NewElement.BackgroundColor.R,
                                                                    (int)e.NewElement.BackgroundColor.G,
                                                                    (int)e.NewElement.BackgroundColor.B));
        this.Elevation = 50;
    }

但不幸的是它不会掉落颜色阴影。我也尝试过使用 Frame HasShadow 属性来产生预期的效果，但没有成功。

有帮助吗？

Answer 1

欢迎来到 SO！

对于Android，可以为Button设置自定义背景，我们可以在Resources/drawable中定义一个button_shadow.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- slide -->
    <item>
        <shape android:shape="rectangle">
            <padding
              android:bottom="2dp"
              android:left="0dp"
              android:right="2dp"
              android:top="0dp" />
            <solid android:color="#0000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
              android:bottom="2dp"
              android:left="0dp"
              android:right="2dp"
              android:top="0dp" />
            <solid android:color="#1000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#2000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#3000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#5000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
 
    <!-- content -->
    <item>
        <shape android:shape="rectangle"
               android:useLevel="false">
            <!-- solid -->
            <solid android:color="#00FFFF" />
            <corners android:radius="20dp" />
            <padding android:left="10dp"
               android:right="10dp"
               android:top="10dp"
               android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>

然后在自定义渲染器中使用如下：

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer))]
namespace AppEntryTest.Droid
{
    class CustomButtonRenderer : ButtonRenderer
    {

        Context myContext;
        public CustomButtonRenderer(Context context) : base(context)
        {
            this.myContext = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            Control.SetBackgroundResource(Resource.Drawable.button_shadow);
        }
    }
}

效果：

将颜色阴影拖放到 Xamarin 中的按钮

To drop color shadow to a button in Xamarin

android

button

frame

ios

xamarin