Xamarin Forms在MasterDetailPage內容頁面上添加陰影

Question

我正在使用MasterDetailPage，其中Menu和Content頁面都有白色背景。所以我需要在菜單顯示時向內容頁面添加陰影分隔符。就像這樣：

我能找到的唯一的例子是這樣的：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 
    }); 
} 

PanelShadowEffect

[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的出現事件（如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 
    }); 
} 

ħ ere的結果：