Как настроить тень в полупрозрачной навигационной панели?

Question

Чтобы сделать панель навигации прозрачной, я использовал Custom Renderer:

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using AView = Android.Views.View;
using App1;
using Android.Content;
using TransparentNavBarXForms.Droid.Renderers;

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace TransparentNavBarXForms.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
    public CustomNavigationPageRenderer(Context context) : base(context)
    {

    }

    IPageController PageController => Element as IPageController;
    CustomNavigationPage CustomNavigationPage => Element as CustomNavigationPage;

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        CustomNavigationPage.IgnoreLayoutChange = true;
        base.OnLayout(changed, l, t, r, b);
        CustomNavigationPage.IgnoreLayoutChange = false;

        int containerHeight = b;

        PageController.ContainerArea = new Rectangle(0, 0, Context.FromPixels(r - l), Context.FromPixels(containerHeight-t));

        for (var i = 0; i < ChildCount; i++)
        {
            AView child = GetChildAt(i);

            if (child is Android.Support.V7.Widget.Toolbar)
            {
                continue;
            }

            child.Layout(0, 0, r, b);
        }
    }
}
}

Чтобы добавить тень, я добавил свойство: android: elevation = "4dp" на Toolbar.a xml тень была добавлена ​​не только снизу панели навигации, но и с разных сторон внутри, благодаря эффекту прозрачности это видно. Как сделать тень только снизу? Можно ли реализовать это как-то иначе?

Answer 1

Прежде всего, если цвет фона панели навигации прозрачен, вы не можете установить android:elevation="4dp".

Вот еще один способ создать тень. Вы можете использовать BoxView для имитации тени. Добавьте BoxView в ваш contentPage.

<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"
             mc:Ignorable="d"
             Title="test"
             x:Class="CustomNavigateBar.MainPage">

    <StackLayout>
        <!-- add showdow here -->
        <BoxView VerticalOptions="StartAndExpand" HeightRequest="10"/>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

Используйте пользовательский рендер в android.

[assembly: ExportRenderer(typeof(BoxView), typeof(MyBoxViewRenderer))]
namespace CustomNavigateBar.Droid
{
  public  class MyBoxViewRenderer: BoxRenderer
    {
        public MyBoxViewRenderer(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);
            ViewGroup.SetBackgroundResource(Resource.Drawable.boxview_shadow);
        }
    }
}

boxview_shadow. xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#CABBBBBB" />

    </shape>
  </item>
</layer-list>

Здесь бегущая сценария.