Xamarin Forms 中的渐变按钮
Gradient Button in Xamarin Forms
如何使用渲染器在 Xamarin Forms 中创建带有渐变效果的按钮?
在 xamarin 中,您不能将渐变颜色添加为内置功能。您必须创建不同的渲染功能。 link 将指导您。
在 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>
现在 Xamarin forms 4.8 可以使用渐变画笔和拖放功能等新功能。
看看这个 link => https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/
您可以为按钮、框架、框视图等任何元素添加渐变背景。
按钮的示例代码:
<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>
输出:
如果您想将它添加到样式文件中,以下方法对我有用:
<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 Forms 中创建带有渐变效果的按钮?
在 xamarin 中,您不能将渐变颜色添加为内置功能。您必须创建不同的渲染功能。 link 将指导您。
在 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>
现在 Xamarin forms 4.8 可以使用渐变画笔和拖放功能等新功能。
看看这个 link => https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/
您可以为按钮、框架、框视图等任何元素添加渐变背景。
按钮的示例代码:
<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>
输出:
如果您想将它添加到样式文件中,以下方法对我有用:
<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>