title: Xamarin Forms Add shadow on MasterDetailPage content page
body: <p>I'm using a MasterDetailPage, where both the Menu and the Content page have a white background. So I need to add a shadow separator to the Content page when the menu is showing. Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Yi5wj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yi5wj.png" alt="enter image description here"></a></p>
  
  <p>The only example I could find is this: <a href="https://gist.github.com/SeeD-Seifer/120971b4dda7a785a7f4bda928c9dc2b" rel="nofollow noreferrer">https://gist.github.com/SeeD-Seifer/120971b4dda7a785a7f4bda928c9dc2b</a></p>
  
  <p>I've implemented the code, and the shadow effect works on Labels, Images and other elements. But I cannot get it to work on a NavigationPage.</p>
  
  <p>My code: </p>
  
  <p><strong>ShadowEffect.cs</strong></p>
  
  <pre><code>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")
      {
      }
  }
  </code></pre>
  
  <p><strong>ShadowNavigationPage.cs</strong></p>
  
  <pre><code>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
      });
  }
  </code></pre>
  
  <p><strong>PanelShadowEffect</strong></p>
  
  <pre><code>[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 =&gt; 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()
          {
          }
      }
  }
  </code></pre>