Das Einstellen der Höhe auf der benutzerdefinierten Steuerungstaste funktioniert nicht

Ich versuche, eine Schaltfläche wie diesen Screenshot zu erreichen:

Das Einstellen der Höhe auf der benutzerdefinierten Steuerungstaste funktioniert nicht

Also habe ich ein benutzerdefiniertes Steuerelement mit einem bestimmten Renderer für iOS und Android erstellt. Das Steuerelement ist unten:

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

und hier ist der iOS-Renderer:

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

und das Android:

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

Hier ist das XAML, in dem ich das benutzerdefinierte Steuerelement deklariere:

<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>

Wenn ich also diesen Code teste, ist das Rendern so, dass keine Höhe und kein Schatten angezeigt werden, egal welchen Wert ich für die Elevation-Eigenschaft setze:

Das Einstellen der Höhe auf der benutzerdefinierten Steuerungstaste funktioniert nicht

Ich habe in anderen Beiträgen gesehen, dass es einige Probleme mit CornerRadius gibt, in meinem Fall wird die Höhe mit oder ohne Eckenradius nicht angezeigt.

Wenn Sie eine Idee haben, würde ich mich freuen, sie zu lesen.


31
1

Antwort:

Gelöst

Wenn Sie nur Schatten möchten, können Sie Community Toolkit verwenden.

Von NuGet installieren: https://www.nuget.org/packages/Xamarin.CommunityToolkit/2.0.1?_src=template

XML:

<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
         xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml" 
         xmlns:controls = "clr-namespace:App1"
         xmlns:xct = "http://xamarin.com/schemas/2020/toolkit"         
         x:Class = "App1.Page6">

<StackLayout Orientation = "Horizontal">
    <StackLayout Orientation = "Vertical">
        <controls:ElevationButton x:Name = "buttonTest"
                        BackgroundColor = "White"
                        .......
                        xct:ShadowEffect.Color = "Red" 
                        xct:ShadowEffect.OffsetY = "12"                       />
        <Label Text = "PHOTO" />
    </StackLayout>
</StackLayout>

  

</ContentPage>