将渐变背景添加到 Xamarin Forms Visual Studio 中的布局 [英] Add Gradient background to layouts in Xamarin Forms visual studio
问题描述
我是 Xamarin Forms 的新手,我为 Menu 创建了一个 ContentPage.我需要在其背景中使用线性渐变颜色.但是我找不到任何告诉我如何创建背景渐变颜色的链接.我也希望按钮背景的颜色位置像android中的选择器.如果您有任何信息,请回复.
I am a newbie in Xamarin Forms, I create a ContentPage for Menu. I need linear gradient color at its background. But I can't find any link which tell me how to create background gradient color. I also want that color place at button background like selector in android. If you have any information please give reply.
推荐答案
在下面的代码中,我们可以为下面的任何布局设置水平和垂直渐变(我把它放在#region中)如果你想写另一个我为StackLayout写布局只是替换你在 StackLayout 上的布局.
In below code we can set Horizontal and Vertical Gradient(I put it in #region) for any Layout in below I write for StackLayout if you want to write another Layout just replace your Layout on StackLayout.
在 PCL 中:
using System;
using Xamarin.Forms;
namespace GradientColor
{
public class GradientColorStack : StackLayout
{
public Color StartColor { get; set; }
public Color EndColor { get; set; }
}
}
Xamarin.Android:
using System;
using GradientColor;
using GradientColor.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(GradientColorStack), typeof(GradientColorStackRenderer))]
namespace GradientColor.Droid
{
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 Vertical Gradient
//var gradient = new Android.Graphics.LinearGradient(0, 0, 0, Height,
#endregion
#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<StackLayout> 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);
}
}
}
}
Xamarin.iOS:
using System;
using CoreAnimation;
using CoreGraphics;
using GradientColor;
using GradientColor.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(GradientColorStack), typeof(GradientColorStackRenderer))]
namespace GradientColor.iOS
{
public class GradientColorStackRenderer : VisualElementRenderer<StackLayout>
{
public override void Draw(CGRect rect)
{
base.Draw(rect);
GradientColorStack stack = (GradientColorStack)this.Element;
CGColor startColor = stack.StartColor.ToCGColor();
CGColor endColor = stack.EndColor.ToCGColor();
#region for Vertical Gradient
var gradientLayer = new CAGradientLayer();
#endregion
#region for Horizontal Gradient
//var gradientLayer = new CAGradientLayer()
//{
// StartPoint = new CGPoint(0, 0.5),
// EndPoint = new CGPoint(1, 0.5)
//};
#endregion
gradientLayer.Frame = rect;
gradientLayer.Colors = new CGColor[] { startColor, endColor
};
NativeView.Layer.InsertSublayer(gradientLayer, 0);
}
}
}
在 XAML 中:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:GradientColor; assembly:GradientColor" x:Class="GradientColor.GradientColorPage">
<Grid VerticalOptions="FillAndExpand" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="Olive">
<StackLayout VerticalOptions="Center">
<Label Text="Normal color for stacklayout" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White"/>
</StackLayout>
</Grid>
<Grid Grid.Row="1">
<local:GradientColorStack StartColor="Green" EndColor="Red">
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="Gradient color for StackLayout" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White"/>
</StackLayout>
</local:GradientColorStack>
</Grid>
</Grid>
</ContentPage>
这篇关于将渐变背景添加到 Xamarin Forms Visual Studio 中的布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!