Ajouter un fond Dégradé de mises en Xamarin Forms visual studio

Dans le code ci-dessous, nous pouvons définir Horizontale et Verticale du Gradient(je l'ai mis dans la #région) pour tous les modèles ci-dessous j'écris pour StackLayout si vous voulez écrire un autre modèle il suffit de remplacer votre Disposition sur StackLayout.

En mode d'émulation 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);
}
}
}

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

Pour l'instant il n'y a pas de véritable fonctionnalité de dessin à faire. Vous pouvez définir une image comme arrière-plan, vous pouvez fournir beaucoup d'images pour les différents dossiers (hdpi, mdpi, xhdpi, etc...)
Ou vous pouvez utiliser les moteurs de rendu personnalisé d'étendre ContentPage classe dans votre propre.

Vous pouvez prendre un coup d'oeil à cette discussion à Xamarin Forums.
https://forums.xamarin.com/discussion/22440/gradient-as-background-color

Premier commentaire, jamais de la SORTE.

à l'aide de na2xl répondre à un Effet de

Effets peuvent être attachés aux différents composant, sont entièrement réutilisables, et ne vous force pas à la sous-classe des Formes composants.

J'ai ajouté un système de localisation de musique où chaque couleur de début et de fin du dégradé - 0 commencement absolu /1 fin absolue.

dans le NetStandard lib

using System.Linq;
using Xamarin.Forms;
namespace YourProject.Effects
{
public class GradientEffect : RoutingEffect
{
public GradientEffect() : base("YourCompany.GradientEffect")
{
}
public string Colors { get; set; }
public GradientMode Mode { get; set; }
public Color[] ColorList => Colors.Split(',').Select(i => Color.FromHex(i.Trim())).ToArray();
public string Locations { get; set; }
public float[] LocationList => Locations.Split(',').Select(float.Parse).ToArray();
}
public enum GradientMode
{
ToRight,
ToLeft,
ToTop,
ToBottom,
ToTopLeft,
ToTopRight,
ToBottomLeft,
ToBottomRight,
Null
}
}

dans l'iOS de projet

using System;
using System.Linq;
using CoreAnimation;
using CoreGraphics;
using Foundation;
using YourProject.Effects;
using YourProject.iOS.Effects;
using Serilog;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly:ResolutionGroupName ("YourCompany")]
[assembly: ExportEffect(typeof(IosGradientEffect), "GradientEffect")]
namespace YourProject.iOS.Effects
{
public class IosGradientEffect : PlatformEffect
{
protected override void OnAttached()
{
try
{
var nativeView = Control ?? Container;
var effect = (GradientEffect) Element.Effects.FirstOrDefault(e => e is GradientEffect);
if (effect == null) return;
var colors = effect.ColorList.Select(i => i.ToCGColor()).ToArray();
var gradientLayer = new CAGradientLayer
{
Locations = effect.LocationList?.Select(i => new NSNumber(i)).ToArray()
};
switch (effect.Mode)
{
default:
gradientLayer.StartPoint = new CGPoint(0, 0.5);
gradientLayer.EndPoint = new CGPoint(1, 0.5);
break;
case GradientMode.ToLeft:
gradientLayer.StartPoint = new CGPoint(1, 0.5);
gradientLayer.EndPoint = new CGPoint(0, 0.5);
break;
case GradientMode.ToTop:
gradientLayer.StartPoint = new CGPoint(0.5, 1);
gradientLayer.EndPoint = new CGPoint(0.5, 0);
break;
case GradientMode.ToBottom:
gradientLayer.StartPoint = new CGPoint(0.5, 0);
gradientLayer.EndPoint = new CGPoint(0.5, 1);
break;
case GradientMode.ToTopLeft:
gradientLayer.StartPoint = new CGPoint(1, 1);
gradientLayer.EndPoint = new CGPoint(0, 0);
break;
case GradientMode.ToTopRight:
gradientLayer.StartPoint = new CGPoint(0, 1);
gradientLayer.EndPoint = new CGPoint(1, 0);
break;
case GradientMode.ToBottomLeft:
gradientLayer.StartPoint = new CGPoint(1, 0);
gradientLayer.EndPoint = new CGPoint(0, 1);
break;
case GradientMode.ToBottomRight:
gradientLayer.StartPoint = new CGPoint(0, 0);
gradientLayer.EndPoint = new CGPoint(1, 1);
break;
}
gradientLayer.Frame = nativeView.Bounds;
gradientLayer.Colors = colors;
nativeView.Layer.InsertSublayer(gradientLayer, 0);
}
catch (Exception ex)
{
Log.Fatal(ex.Message);
}
}
protected override void OnDetached()
{
Log.Debug("Gradient Effect Detached");
}
}
}

** dans le projet Android**

using System;
using System.Linq;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Graphics.Drawables.Shapes;
using YourProject.Droid.Effects;
using YourProject.Effects;
using Serilog;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly:ResolutionGroupName ("YourCompany")]
[assembly: ExportEffect(typeof(AndroidGradientEffect), "GradientEffect")]
namespace YourProject.Droid.Effects
{
public class AndroidGradientEffect : PlatformEffect
{
protected override void OnAttached()
{
try
{
var effect = (GradientEffect) Element.Effects.FirstOrDefault(e => e is GradientEffect);
var nativeView = Control ?? Container;
var colors = effect.ColorList.Select(i => i.ToAndroid().ToArgb()).ToArray();
var paint = new PaintDrawable();
paint.Shape = new RectShape();
paint.SetShaderFactory(new GradientShaderFactory(colors, effect.LocationList, Shader.TileMode.Mirror, effect.Mode));
nativeView.SetBackgroundDrawable(paint);
}
catch (Exception ex)
{
Log.Fatal("Couldn't set property for view with effect ex:" + ex.Message);
}
}
protected override void OnDetached()
{
Log.Debug("Android Gradient Effect detached");
}
}
internal class GradientShaderFactory : ShapeDrawable.ShaderFactory
{
private readonly Shader.TileMode _tileMode;
private readonly int[] _colors;
private readonly float[] _locations;
private readonly GradientMode _gradientMode;
internal GradientShaderFactory(int[] colors, float[] locations, Shader.TileMode tileMode,
GradientMode gradientMode)
{
_colors = colors;
_locations = locations;
_tileMode = tileMode;
_gradientMode = gradientMode;
}
public override Shader Resize(int width, int height)
{
LinearGradient gradient;
switch (_gradientMode)
{
default:
gradient = new LinearGradient(0, 0, width, 0, _colors, _locations,
_tileMode);
break;
case GradientMode.ToLeft:
gradient = new LinearGradient(width, 0, 0, 0, _colors, _locations,
_tileMode);
break;
case GradientMode.ToTop:
gradient = new LinearGradient(0, height, 0, 0, _colors, _locations,
_tileMode);
break;
case GradientMode.ToBottom:
gradient = new LinearGradient(0, 0, 0, height, _colors, _locations,
_tileMode);
break;
case GradientMode.ToTopLeft:
gradient = new LinearGradient(width, height, 0, 0,
_colors, _locations,
_tileMode);
break;
case GradientMode.ToTopRight:
gradient = new LinearGradient(0, height, width,0 ,
_colors, _locations,
_tileMode);
break;
case GradientMode.ToBottomLeft:
gradient = new LinearGradient(width, 0, 0, height,
_colors, _locations,
_tileMode);
break;
case GradientMode.ToBottomRight:
gradient = new LinearGradient(0, 0, width, height,
_colors,_locations,
_tileMode);
break;
}
return gradient;
}
}
}