Android端Xamarin Forms Master Detail Page导航栏添加下方阴影问题

嘿，我之前做Xamarin Forms项目时也碰到过这个阴影位置跑偏的问题，给你几个不用大改代码的方案，按需选就行：

方案1：用TitleView自定义导航栏+底部阴影层 #

Master Detail Page的顶部导航依赖NavigationPage实现，我们可以通过自定义TitleView，在导航栏内部直接添加一个贴在底部的阴影视图，完全不用碰渲染器：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.YourDetailPage">
    <!-- 自定义导航栏标题区域 -->
    <NavigationPage.TitleView>
        <Grid VerticalOptions="FillAndExpand">
            <!-- 保留原来的标题内容 -->
            <Label Text="我的页面" 
                   VerticalOptions="Center" 
                   HorizontalOptions="Center"
                   FontSize="Large"
                   FontAttributes="Bold" />
            <!-- 导航栏底部的阴影层 -->
            <BoxView 
                HeightRequest="4" 
                VerticalOptions="End" 
                HorizontalOptions="Fill"
                BackgroundColor="#00000020"
                CornerRadius="2" />
        </Grid>
    </NavigationPage.TitleView>

    <!-- 页面主体内容 -->
    <StackLayout Padding="20">
        <Label Text="页面内容区域" />
    </StackLayout>
</ContentPage>

这里用半透明灰色的BoxView模拟阴影，CornerRadius能让阴影边缘更柔和。如果想要更真实的模糊阴影，可以给BoxView加个自定义ShadowEffect（网上有很多现成的轻量实现），替换纯色背景就行。

方案2：在页面顶部直接加阴影视图 #

如果觉得自定义TitleView麻烦，还可以在页面Content的最顶部放一个阴影视图，刚好贴在导航栏下方：

<ContentPage ...>
    <StackLayout>
        <!-- 导航栏下方的阴影 -->
        <BoxView 
            HeightRequest="5" 
            HorizontalOptions="Fill"
            BackgroundColor="#00000015" />
        <!-- 页面内容 -->
        <ScrollView Padding="15">
            <!-- 你的内容控件 -->
        </ScrollView>
    </StackLayout>
</ContentPage>

这个方法最省事，唯一要注意的是不同Android版本导航栏高度略有差异，但大部分场景下固定高度的阴影都能完美贴合。如果需要适配，可以用OnPlatform设置不同的HeightRequest。

方案3：轻量自定义NavigationRenderer（工作量极小） #

如果你想要最原生的阴影效果，其实自定义渲染器并没有你想的那么麻烦，只需要写几行代码：

在Android项目中创建一个自定义渲染器类：

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomNavigationRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                // 设置导航栏底部阴影：模糊半径10，向下偏移2，半透明黑色
                Control?.SetShadowLayer(10, 0, 2, Android.Graphics.Color.ParseColor("#33000000"));
            }
        }
    }
}

这个方法直接调用Android原生的SetShadowLayer，阴影效果完全符合原生控件的表现，而且只需要这几行代码，几乎没什么工作量。

内容的提问来源于stack exchange，提问作者toomasz