Question

如何使用渲染器在Xamarin Forms中使用渐变效果创建此按钮？

Answer 1

在xamarin中，您无法添加渐变色作为内置功能。您必须创建不同的渲染功能。这个link将指导您。

Answer 2

在Xamarin Forms Craets中

public class GradientColorStack:StackLayout
    {
        public Color StartColor { get; set; }
        public Color EndColor { get; set; }
    }

然后是Renderer Android

public class GradientColorStackRenderer : VisualElementRenderer<StackLayout>
    {
        private Color StartColor { get; set; }
        private Color EndColor { get; set; }
        protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
        {
            #region for Horizontal Gradient
            var gradient = new Android.Graphics.LinearGradient(0, 0, Width, 0,
            #endregion

                   this.StartColor.ToAndroid(),
                   this.EndColor.ToAndroid(),
                   Android.Graphics.Shader.TileMode.Mirror);

            var paint = new Android.Graphics.Paint()
            {
                Dither = true,
            };
            paint.SetShader(gradient);
            canvas.DrawPaint(paint);
            base.DispatchDraw(canvas);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }
            try
            {
                var stack = e.NewElement as GradientColorStack;
                this.StartColor = stack.StartColor;
                this.EndColor = stack.EndColor;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(@"ERROR:", ex.Message);
            }
        }
    }

在Ios项目渲染中

public class GradientColorStackRenderer : VisualElementRenderer<Frame>
    {
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            GradientColorFrame stack = (GradientColorStack)this.Element;
            CGColor startColor = stack.StartColor.ToCGColor();
            CGColor endColor = stack.EndColor.ToCGColor();
            #region for Vertical Gradient
            var gradientLayer = new CAGradientLayer();
            #endregion
            gradientLayer.Frame = rect;
            gradientLayer.Colors = new CGColor[] { startColor, endColor
        };
            NativeView.Layer.InsertSublayer(gradientLayer, 0);
        }
    }

现在你可以在PCL项目中使用像这样

<local:GradientColorStack StartColor="#DF596C" EndColor="#FFB239" >
</local:GradientColorStack>

Answer 3

现在Xamarin Forms 4.8可以使用新功能，例如渐变笔刷和拖放功能。

查看此链接=> https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/

您可以为任何元素（例如按钮，框架，Boxview等）添加渐变背景。

按钮的示例代码：

<Button Text="Submit Order" CornerRadius="5" TextColor="White">
    <Button.Background>
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow" Offset="0.1" />
            <GradientStop Color="Green" Offset="1.0" />
        </LinearGradientBrush>
    </Button.Background>
</Button>

输出：

Answer 4

如果您想将其添加到样式文件中，以下对我有用：

Reference Post

<Style TargetType="Button">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="White" Offset="0.6"/>
                <GradientStop Color="Blue" Offset="1.0"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

Xamarin表格中的渐变按钮

4 个答案: