Как добавить градиент к границе под заголовком страницы в формах Xamarin?

Question

Как я могу добавить градиент к линии границы под заголовком страницы в формах Xamarin?

Пример того, чего я хочу достичь, это здесь .

Answer 1

Как добавить градиент к линии границы под заголовком страницы в формах Xamarin?

Я создаю пользовательский рендер для создания границы градиента.

Во-первых, вам нужно определить рендер:

public class GradientViewRender : View
{
    public static readonly BindableProperty GradientColorsProperty = BindableProperty.Create<GradientViewRender, Color[]>(p => p.GradientColors, new Color[]{Color.White} );

    public Color[] GradientColors
    {
        get { return (Color[])base.GetValue(GradientColorsProperty); }
        set { base.SetValue(GradientColorsProperty, value); }
    }


    public static readonly BindableProperty ViewHeightProperty = BindableProperty.Create<GradientViewRender, double>(p => p.ViewHeight, 0);

    public double ViewHeight
    {
        get { return (double)base.GetValue(ViewHeightProperty); }
        set { base.SetValue(ViewHeightProperty, value); }
    }



    public static readonly BindableProperty LeftToRightProperty = BindableProperty.Create<GradientViewRender, bool>(p => p.LeftToRight, true);

    public bool LeftToRight
    {
        get { return (bool)base.GetValue(LeftToRightProperty); }
        set { base.SetValue(LeftToRightProperty, value); }
    }
}

Этот рендер принимает массив цветов, так что вы можете предоставить столько цветов, сколько необходимо для вашего градиента.

Затем вы можете реализовать этот рендер в Android.

public class GradientViewRenderer : Xamarin.Forms.Platform.Android.ViewRenderer<GradientTest.GradientViewRender, View>
{
    LinearLayout layout;
    Xamarin.Forms.Color[] gradientColors;

    double viewHeight;


    protected override void OnElementChanged(ElementChangedEventArgs<GradientTest.GradientViewRender> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            layout = new LinearLayout(Application.Context);
            layout.SetBackgroundColor(Color.White);

            gradientColors = (Xamarin.Forms.Color[])e.NewElement.GradientColors;

            viewHeight = (double)e.NewElement.ViewHeight;


            CreateLayout();
        }

        if (e.OldElement != null)
        {
            // Unsubscribe from event handlers and cleanup any resources
        }

        if (e.NewElement != null)
        {
            // Configure the control and subscribe to event handlers
            gradientColors = (Xamarin.Forms.Color[])e.NewElement.GradientColors;

            viewHeight = (double)e.NewElement.ViewHeight;


            CreateLayout();
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == GradientViewRender.ViewHeightProperty.PropertyName)
        {
            this.viewHeight = (double)this.Element.ViewHeight;
            CreateLayout();
        }

        else if (e.PropertyName == GradientViewRender.GradientColorsProperty.PropertyName)
        {
            this.gradientColors = (Xamarin.Forms.Color[])this.Element.GradientColors;
            CreateLayout();
        }


    }

    private void CreateLayout()
    {
        layout.SetMinimumWidth((int)viewWidth);
        layout.SetMinimumHeight((int)viewHeight);

        CreateGradient();

        SetNativeControl(layout);
    }

    public void CreateGradient()
    {
        //Need to convert the colors to Android Color objects
        int[] androidColors = new int[gradientColors.Count()];

        for (int i = 0; i < gradientColors.Count(); i++)
        {
            Xamarin.Forms.Color temp = gradientColors[i];
            androidColors[i] = temp.ToAndroid();
        }

        GradientDrawable gradient = new GradientDrawable(GradientDrawable.Orientation.LeftRight, androidColors);

        if (roundCorners)
            gradient.SetCornerRadii(new float[] { cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius });

        layout.SetBackground(gradient);
    }
}

Более подробную информацию вы можете получить:

https://baglabs.com/2017/07/14/creating-gradients-xamarin-forms/

Вы можете получить выборку из:

https://github.com/baileysh9/xamarin_forms_gradient

Наконец, вы можете получить эту градиентную границу следующим образом:

Вы можете изменить другой цвет с помощью GradientColors.

Если мой ответ поможет вам, пожалуйста, не забудьте пометить мой ответ как ответ, спасибо.

Answer 2

Создайте представление Xamarin.Forms с помощью специального средства визуализации, которое рисует градиент в представлении для iOS и Android. Затем разместите это представление там, где вы хотите, возможно, чуть ниже заголовка или строки заголовка.

Сначала прочитайте документы по созданию пользовательских средств визуализации: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/

Я пробовал это, начиная с представления окна Xamarin.Forms.

Сначала создайте новый класс в базовом общем проекте Xamarin.Forms, который наследует от BoxView и задает 3 привязываемых свойства для начального, среднего и конечного цветов:

using System;
using Xamarin.Forms;

namespace YourNameSpace
{
    public class GradientView : BoxView
    {
        public static readonly BindableProperty StartColorProperty =
            BindableProperty.Create(
                nameof(StartColor),
                typeof(Color),
                typeof(GradientView),
                Color.Transparent);

        public Color StartColor
        {
            get
            {
                return (Color)GetValue(StartColorProperty);
            }
            set
            {
                SetValue(StartColorProperty, value);
            }
        }

        public static readonly BindableProperty MiddleColorProperty =
            BindableProperty.Create(
                nameof(MiddleColor),
                typeof(Color),
                typeof(GradientView),
                Color.Transparent);

        public Color MiddleColor
        {
            get
            {
                return (Color)GetValue(MiddleColorProperty);
            }
            set
            {
                SetValue(MiddleColorProperty, value);
            }
        }

        public static readonly BindableProperty EndColorProperty =
            BindableProperty.Create(
                nameof(EndColor),
                typeof(Color),
                typeof(GradientView),
                Color.Transparent);

        public Color EndColor
        {
            get
            {
                return (Color)GetValue(EndColorProperty);
            }
            set
            {
                SetValue(EndColorProperty, value);
            }
        }
    }
}

Используйте приведенный выше вид в вашем 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:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:TestUITest"
                mc:Ignorable="d"
                x:Class="TestUITest.MainPage"
                Title="Gradient View"
                BackgroundColor="Black">
    <StackLayout>
        <!-- Place new controls here -->
        <local:GradientView
            StartColor="DarkBlue"
            MiddleColor="LightBlue"
            EndColor="DarkBlue"
            HeightRequest="5" />
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               TextColor="White"/>
    </StackLayout>
</ContentPage>

Также установите для панели навигации черное (в соответствии с вашим скриншотом), так что в вашем классе приложения Xamarin.Forms App:

public App()
{
        InitializeComponent();

        var navPage = new NavigationPage(new MainPage());

        navPage.BarBackgroundColor = Color.Black;
        navPage.BarTextColor = Color.LightBlue;

        MainPage = navPage;
}

Теперь для специальных средств визуализации Платформы:

Android:

using System;
using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using YourNameSpace;
using YourNameSpace.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(GradientView),typeof(GradientViewRenderer))]
namespace YourNameSpace.Droid
{
    public class GradientViewRenderer : BoxRenderer
    {
        public GradientViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                GradientView formsGradientView = Element as GradientView;

                int[] colors = {
                   Convert.ToInt32(formsGradientView.StartColor.ToHex().Replace("#", "0x"), 16),
                   Convert.ToInt32(formsGradientView.MiddleColor.ToHex().Replace("#", "0x"), 16),
                   Convert.ToInt32(formsGradientView.EndColor.ToHex().Replace("#", "0x"), 16)
                };

                var gradeDrawable = new GradientDrawable(GradientDrawable.Orientation.LeftRight, colors);
                ViewGroup.SetBackgroundDrawable(gradeDrawable);
            }
        }
    }
}

iOS:

using System;
using CoreAnimation;
using CoreGraphics;
using YourNameSpace;
using YourNameSpace.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;


[assembly: ExportRenderer(typeof(GradientView), typeof(GradientViewRenderer))]
namespace YourNameSpace.iOS
{
    public class GradientViewRenderer : BoxRenderer
    {

        public override void Draw(CGRect rect)
        {
            //base.Draw(rect);
            GradientView formsGradientView = Element as GradientView;

            var currentContext = UIGraphics.GetCurrentContext();
            currentContext.SaveState();

            var colorSpace = CGColorSpace.CreateDeviceRGB();

            var startColor = formsGradientView.StartColor;
            var startColorComponents = startColor.ToCGColor().Components;

            var middleColor = formsGradientView.MiddleColor;
            var middleColorComponents = middleColor.ToCGColor().Components;

            var endColor = formsGradientView.EndColor;
            var endColorComponents = endColor.ToCGColor().Components;

            nfloat[] colorComponents = {
                startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3],
                middleColorComponents[0], middleColorComponents[1], middleColorComponents[2], middleColorComponents[3],
                endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]
            };

            nfloat[] locations = { 0f, 0.5f, 1f };

            var gradient = new CGGradient(colorSpace, colorComponents, locations);

            var startPoint = new CGPoint(0, NativeView.Bounds.Height);
            var endPoint = new CGPoint(NativeView.Bounds.Width, NativeView.Bounds.Height);

            currentContext.DrawLinearGradient(gradient, startPoint, endPoint, CGGradientDrawingOptions.None);
            currentContext.RestoreState();

        }
    }
}