在自定義控制按鈕上設定高程不起作用

我正在嘗試實作一個按鈕，就像這個螢屏截圖一樣：

所以我為iOS和Android做了一個帶有特定渲染器的自定義控制元件，控制元件如下：

public class ElevationButton : Button
{
    public float Elevation
    {
        get => (float)GetValue(ElevationProperty);
        set => SetValue(ElevationProperty, value);
    }

    public static BindableProperty ElevationProperty = BindableProperty.Create(nameof(Elevation), typeof(float), typeof(ElevationButton), 4.0f);
}

這是 iOS 渲染器：

public class ElevationButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement == null)
            return;
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        UpdateShadow();
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        var element = (ElevationButton)this.Element;
        if (e.PropertyName == nameof(element.Elevation))
            UpdateShadow();
    }

    private void UpdateShadow()
    {
        var element = (ElevationButton)this.Element;

        Layer.ShadowRadius = element.Elevation;
        Layer.ShadowColor = UIColor.Gray.CGColor;
        Layer.ShadowOffset = new CGSize(2, 2);
        Layer.ShadowOpacity = 0.80f;
        Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
        Layer.MasksToBounds = false;
    }
}

和安卓：

public class ElevationButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
    public ElevationButtonRenderer(Context context) : base(context) { }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement == null)
            return;

        var element = (ElevationButton)this.Element;

        // we need to reset the StateListAnimator to override the setting of Elevation on touch down and release.
        Control.StateListAnimator = new Android.Animation.StateListAnimator();

        // set the elevation manually
        ViewCompat.SetElevation(this, element.Elevation);
        ViewCompat.SetElevation(Control, element.Elevation);
    }

    public override void Draw(Canvas canvas)
    {
        var element = (ElevationButton)this.Element;
        Control.Elevation = element.Elevation;
        base.Draw(canvas);
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        var element = (ElevationButton)this.Element;
        if (e.PropertyName == nameof(element.Elevation))
        {
            ViewCompat.SetElevation(this, element.Elevation);
            ViewCompat.SetElevation(Control, element.Elevation);
            UpdateLayout();
        }
    }
}

這是我宣告自定義控制元件的 xaml：

<StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical">
                        <controls:ElevationButton x:Name="buttonTest"
                            BackgroundColor="White"
                            HeightRequest="40"
                            WidthRequest="40"
                            Elevation="20"
                            CornerRadius="50"
                            Padding="10,10,10,10"
                            Text="{x:Static fa:FontAwesomeIcons.Camera}" 
                            FontFamily="FASolid" 
                            TextColor="{StaticResource Text}" />
                        <Label Text="PHOTO" />
                    </StackLayout>

因此，當我測驗此代碼時，無論我為 Elevation 屬性設定哪個值，渲染都是這樣的，不會顯示任何 Elevation 和陰影：

我在其他帖子上看到 CornerRadius 存在一些問題，在我的情況下，無論有沒有它，高程都沒有顯示。

如果您有任何想法，我很樂意閱讀。

uj5u.com熱心網友回復：

如果你只想要陰影，你可以使用Community Toolkit.

從 NuGet 安裝：

標籤：xamarin xamarin.forms

上一篇：App類中的公共變數無法在其他類xamarin表單中被參考

下一篇：如何創建多個具有相同型別的自定義渲染器？