Xamarin 表单在 MasterDetailPage 内容页面上添加阴影

Question

我正在使用 MasterDetailPage，其中菜单和内容页面都有白色背景。所以我需要在菜单显示时向内容页面添加一个阴影分隔符。像这样：

我能找到的唯一例子是：https://gist.github.com/SeeD-Seifer/120971b4dda7a785a7f4bda928c9dc2b

我已经实现了代码，阴影效果适用于标签、图像和其他元素。但我无法让它在 NavigationPage 上工作。

我的代码：

ShadowEffect.cs

public class ShadowEffect : RoutingEffect
{
    public float Radius { get; set; }
    public Color Color { get; set; }
    public float DistanceX { get; set; }
    public float DistanceY { get; set; }
    public ShadowEffect() : base("MyCompany.PanelShadowEffect")
    {
    }
}

ShadowNavigationPage.cs

public ShadowNavigationPage(Page root) : base(root)
{

}

protected override void OnAppearing()
{
    base.OnAppearing();

    Effects.Add(new ShadowEffect()
    {
        Radius = 0,
        DistanceX = -20,
        DistanceY = 0,
        Color = Color.Black
    });
}

面板阴影效果

[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(PanelShadowEffect), "PanelShadowEffect")]
namespace MyApp.iOS.Renderer
{
    public class PanelShadowEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            try
            {
                var effect = (ShadowEffect)Element.Effects.FirstOrDefault(e => e is ShadowEffect);
                if (effect == null)
                {
                    return;
                }

                var control = Control;
                if (control == null)
                {
                    var renderer = Platform.GetRenderer((VisualElement)Element);
                    control = renderer.ViewController.View;
                }

                control.Layer.CornerRadius = effect.Radius;
                control.Layer.ShadowColor = effect.Color.ToCGColor();
                control.Layer.ShadowOffset = new CGSize(effect.DistanceX, effect.DistanceY);
                control.Layer.ShadowOpacity = .5f;
                control.Layer.MasksToBounds = false;


                // This doesn't work either
                //Container.Layer.CornerRadius = effect.Radius;
                //Container.Layer.ShadowColor = effect.Color.ToCGColor();
                //Container.Layer.ShadowOffset = new CGSize(effect.DistanceX, effect.DistanceY);
                //Container.Layer.ShadowOpacity = .5f;
                //Container.Layer.MasksToBounds = false;
            }
            catch (Exception ex)
            {
                Console.WriteLine("Cannot set property on attached control. Error: {0}", ex.Message);
            }
        }

        protected override void OnDetached()
        {
        }
    }
}

Answer 1

我很确定您将效果附加到错误的控件或错误的位置。我通过订阅 NavigationPage 的 Appearing 事件（如 MainPage.xaml 中所示）并在其中附加效果来让它工作。

PanelShadowEffect.cs

[assembly: ResolutionGroupName("MasterDetailPageNavigation")]
[assembly: ExportEffect(typeof(PanelShadowEffect), "PanelShadowEffect")]
namespace MasterDetailPageNavigation.iOS
{
    public class PanelShadowEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            try
            {
                var effect = (ShadowEffect)Element.Effects.FirstOrDefault(e => e is ShadowEffect);
                if (effect == null)
                {
                    return;
                }

                Container.Layer.CornerRadius = effect.Radius;
                Container.Layer.ShadowColor = effect.Color.ToCGColor();
                Container.Layer.ShadowOffset = new CGSize(effect.DistanceX, effect.DistanceY);
                Container.Layer.ShadowOpacity = .5f;
                Container.Layer.MasksToBounds = false;
            }
            catch (Exception ex)
            {
                Console.WriteLine("Cannot set property on attached control. Error: {0}", ex.Message);
            }
        }

        protected override void OnDetached()
        {
        }
    }
}

MainPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                  xmlns:effects="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
                  xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
                  x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
  <local:MasterPage x:Name="masterPage" />
  </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage x:Name="NaviPage" Appearing="NavigationPage_Appearing">
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

MainPage.xaml.cs

void NavigationPage_Appearing(object sender, System.EventArgs e)
{
    NaviPage.Effects.Add(new ShadowEffect()
    {
        Radius = 0,
        DistanceX = -20,
        DistanceY = 0,
        Color = Color.Black
    });
}

结果如下：