Как добавить градиент в панель инструментов Xamarin и UINavigationBar

Ответ 1

Вы должны использовать пользовательский рендеринг, например:

В вашем PCL или совместном проекте:

public class NavigationPageGradientHeader : NavigationPage
{
    public NavigationPageGradientHeader(Page root) : base(root)
    {
    }

    public static readonly BindableProperty RightColorProperty =
      BindableProperty.Create(propertyName: nameof(RightColor),
          returnType: typeof(Color),
          declaringType: typeof(NavigationPageGradientHeader),
          defaultValue: Color.Accent);

    public static readonly BindableProperty LeftColorProperty =
       BindableProperty.Create(propertyName: nameof(LeftColor),
           returnType: typeof(Color),
           declaringType: typeof(NavigationPageGradientHeader),
           defaultValue: Color.Accent);

    public Color RightColor
    {
        get { return (Color)GetValue(RightColorProperty); }
        set { SetValue(RightColorProperty, value); }
    }

    public Color LeftColor
    {
        get { return (Color)GetValue(LeftColorProperty); }
        set { SetValue(LeftColorProperty, value); }
    }
}

[ОБНОВЛЕНИЕ]

Поскольку @Dehan Wjiesekara отчаянно нуждается в этой проблеме, я нашел время, чтобы создать пример, вы можете увидеть его в Github.

Затем в вашем проекте Android:

[assembly: ExportRenderer(typeof(NavigationPageGradientHeader), typeof(NavigationPageGradientHeaderRenderer))]
namespace YournameSpace.Droid
{
    public class NavigationPageGradientHeaderRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);

            //run once when element is created
            if (e.OldElement != null || Element == null)
            {
            return;
            }

            var control = (NavigationPageGradientHeader)this.Element;
            var context = (MainActivity)this.Context;

            context.ActionBar.SetBackgroundDrawable(new GradientDrawable(GradientDrawable.Orientation.RightLeft, new int[] { control.RightColor.ToAndroid(), control.LeftColor.ToAndroid() }));
        }
    }
}

Если вы используете FormsAppCompatActivity в своем MainActivity Просто добавьте drawable в gradient следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

  <gradient
      android:angle="180"
      android:centerColor="#26C986"
      android:endColor="#109F8D"
      android:startColor="#36ED81"
      android:type="linear" />

</shape>

Затем в вашем файле Toolbar.axml вызовите это drawable:

<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/toolbar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@drawable/gradient"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

И в вашем проекте iOs:

[assembly: ExportRenderer(typeof(NavigationPageGradientHeader), typeof(NavigationPageGradientHeaderRenderer))]
namespace YourNameSpace.iOS
{
    public class NavigationPageGradientHeaderRenderer: NavigationRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var control = (NavigationPageGradientHeader)this.Element;

            var gradientLayer = new CAGradientLayer();
            gradientLayer.Bounds = NavigationBar.Bounds;
            gradientLayer.Colors = new CGColor[] { control.RightColor.ToCGColor(), control.LeftColor.ToCGColor() };
            gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
            gradientLayer.EndPoint = new CGPoint(1.0, 0.5);

            UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
            gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();

            NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
        }
    }
}

Наконец, в вашем файле App.xaml.cs вызовите этот элемент управления следующим образом:

MainPage = new NavigationPageGradientHeader(new MainPage()) {
     LeftColor = Color.FromHex("#109F8D"),
     RightColor = Color.FromHex("#36ED81")
};