Xamarin 表单中的渐变按钮答案

【问题标题】：Gradient Button in Xamarin FormsXamarin 表单中的渐变按钮
【发布时间】：2018-02-16 20:00:46
【问题描述】：

如何使用 Renderer 在 Xamarin 表单中创建具有渐变效果的按钮？

【问题讨论】：

你有什么尝试吗？如果是，您也可以将您的代码添加到问题中
Android 工作正常...但不知道 iOS Renderer 中的实现

标签： xamarin xamarin.forms gradient

【解决方案1】：

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

输出：

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在 Xamarin 表单中的 Craets

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

然后是 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>

【讨论】：

这是一个堆栈布局，但问题要求一个按钮 - 如何直接在按钮上完成？
UWP 是否需要任何自定义渲染器？

【解决方案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>

【讨论】：