Xamarin रूपों में एक ग्रेडियेंट कैसे जोड़ें टूलबार और UINavigationBar

Question

मैं एंड्रॉइड और आईओएस ऑपरेटिंग सिस्टम के लिए एक एक्समरिन फॉर्म क्रॉस प्लेटफ़ॉर्म एप्लिकेशन बना रहा हूं। मुझे ऑपरेटिंग सिस्टम (जिसे एंड्रॉइड में टूलबार और आईओएस में यूनाविगेशनबार कहा जाता है) में ऐपबार में एक ढाल जोड़ना है, इसे पूरा करने का कोई तरीका है। कृपया मुझे कुछ भी सामना करने में मदद करें।

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

आप अपने MainActivity में FormsAppCompatActivity का उपयोग करते हैं बस इस तरह gradient में एक drawable जोड़ें:

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