Xamarin.Forms学习之路——基于Shell.Flyout的渐变色的使用

今天学习到了Shell定义Flyout的渐变色背景，希望能够记录下来，为以后所用，参考自
https://ianvink.wordpress.com/2019/07/26/xamarin-forms-shell-creating-a-gradient-flyout/

效果图

项目准备

步骤

App.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application 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"
             mc:Ignorable="d"
             x:Class="DesignForEM_V1.App">
    <Application.Resources>
        <ResourceDictionary>
            <!--主题设置-->
            <Color x:Key="FlyoutGradientStart">#38AECC</Color>
            <Color x:Key="FlyoutGradientEnd">#347FB9</Color>
        </ResourceDictionary>
    </Application.Resources>
</Application>

.Android.GradientShellRenderer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms.Platform.Android;
using DesignForEM_V1.Droid;
using Xamarin.Forms;
using Android.Graphics.Drawables;
using Android.Support.Design.Widget;

//file:///D:/Documents/Tencent%20Files/2841954631/FileRecv/MobileFile/%23Xamarin%20Forms%20%23Shell_%20Creating%20a%20Gradient%20Flyo.mhtml
[assembly:ExportRenderer(typeof(Shell),typeof(GradientShellRenderer))]
namespace DesignForEM_V1.Droid
{
    class GradientShellRenderer : ShellRenderer
    {
        bool _disposed;
        public GradientShellRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementSet(Shell shell)
        {
            base.OnElementSet(shell);
        }

        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            return base.CreateShellSectionRenderer(shellSection);
        }

        protected override IShellFlyoutRenderer CreateShellFlyoutRenderer()
        {
            return base.CreateShellFlyoutRenderer();
        }

        protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
        {
            var flyout = base.CreateShellFlyoutContentRenderer();
            try
            {
                GradientDrawable gradient = new GradientDrawable(
                    GradientDrawable.Orientation.TopBottom,
                    new int[]
                    {
                        ((Color) Xamarin.Forms.Application.Current.Resources["FlyoutGradientStart"]).ToAndroid(),
                        ((Color) Xamarin.Forms.Application.Current.Resources["FlyoutGradientEnd"]).ToAndroid()
                    });

                var c1 = ((CoordinatorLayout)flyout.AndroidView);
                c1.SetBackground(gradient);

                var g = (AppBarLayout)c1.GetChildAt(0);
                g.SetBackgroundColor(Color.Transparent.ToAndroid());
                g.OutlineProvider = null;

                var header = g.GetChildAt(0);
                header.SetBackgroundColor(Color.Transparent.ToAndroid());
            }
            catch(Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(ex);
            }
            return flyout;
        }

        protected override void Dispose(bool disposing)
        {
            if (_disposed)
            {
                return;
            }

            if(disposing && Element != null)
            {
                Element.PropertyChanged -= OnElementPropertyChanged;
                Element.SizeChanged -= 
                    (EventHandler)Delegate.CreateDelegate(typeof(EventHandler), this, "OnElementSizeChanged"); 
                // OnElementSizeChanged is private, so use reflection
            }

            _disposed = true;
        }
    }
}

.iOS.GradientShellRender.cs

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

[assembly:ExportRenderer(typeof(Shell),typeof(GradientShellRenderer))]
namespace DesignForEM_V1.iOS
{
    class GradientShellRenderer : ShellRenderer
    {
        private CAGradientLayer _flyoutBackGround = null;

        protected override void OnElementSet(Shell element)
        {
            base.OnElementSet(element);
        }

        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer == null)
            {
                return null;
            }
            if(renderer is ShellSectionRenderer r)
            {
                r.NavigationBar.ShadowImage = new UIImage();
            }

            return (IShellSectionRenderer)renderer;
        }

        protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
        {
            var flyout =  base.CreateShellFlyoutContentRenderer();
            flyout.WillAppear += OnFlyoutWillAppear;
            var tv = (UITableView)flyout.ViewController.View.Subviews[0];
            tv.ScrollEnabled = false;
            return flyout;
        }

        private void OnFlyoutWillAppear(object sender, EventArgs e)
        {
            if(_flyoutBackGround == null && sender!=null && sender is IShellFlyoutContentRenderer flyout)
            {
                var view = flyout.ViewController.View;
                var FlyoutGradientStart = ((Color)Xamarin.Forms.Application.Current.Resources["FlyoutGradientStart"]).ToCGColor();
                var FlyoutGradientEnd = ((Color)Xamarin.Forms.Application.Current.Resources["FlyoutGradientEnd"]).ToCGColor();
                _flyoutBackGround = new CAGradientLayer
                {
                    Frame = new CGRect(0, 0, view.Bounds.Width, view.Bounds.Height),
                    Colors = new[]
                    {
                        FlyoutGradientStart,
                        FlyoutGradientEnd
                    }
                };
                flyout.ViewController.View.Layer.InsertSublayer(_flyoutBackGround, 0);
                flyout.WillAppear -= OnFlyoutWillAppear;
            }
        }
    }
}

欢迎交流

Xamarin开发群：906556968
QQ:1972353869