如何在Xamarin表單中添加漸變工具欄和UINavigationBar

Question

我正在爲Android和iOS操作系統創建xamarin表單跨平臺應用程序。我必須在兩個操作系統（在Android中稱爲ToolBar，在ios中稱爲UINavigationBar）向AppBars添加漸變，有沒有什麼辦法可以實現這一點。請幫助我應付任何事情。

Answer 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對於我花時間創建示例的這個問題絕望，你可以在中看到它。

然後在您的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() })); 
     } 
    } 
} 

如果您使用您的MainActivityFormsAppCompatActivity在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文件調用此繪製：

<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") 
};