Shell 带有圆角的弹出窗口

Question

正在尝试通过设置圆角半径来自定义 Shell 弹出按钮，以获得带有圆角的弹出按钮。由于没有属性与 Shell 弹出角半径相关，有没有办法使用自定义渲染器实现它？

Answer 1

不幸的是，当使用基于 AppShell 层次结构的自动生成的弹出内容时，我在共享代码中看不到执行此操作的方法（如果您要覆盖它，请跳至 Edit 部分），这是使用 Android:

的自定义渲染器完成它的解决方案

在您的 Android 项目中，在 Resources\drawable 中添加：

flyoutbackground.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:bottomRightRadius="30dp" android:topRightRadius="30dp" />
</shape>

在您的 Android 项目中，为您的 AppShell 实施 ShellRenderer：

[assembly: ExportRenderer(typeof(App1.AppShell), typeof(AppShellRenderer))]
namespace App1.Droid.Renderers
{
    public class AppShellRenderer : ShellRenderer
    {
        public AppShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
        {
            var flyoutContentRenderer = base.CreateShellFlyoutContentRenderer();
            var flyoutbackground = AppCompatResources.GetDrawable(Platform.CurrentActivity, Resource.Drawable.flyoutbackground);

            if (Android.OS.Build.VERSION.SdkInt > Android.OS.BuildVersionCodes.O)
            {
                flyoutbackground.SetColorFilter(new BlendModeColorFilter(
                    Shell.Current.FlyoutBackgroundColor.ToAndroid(), BlendMode.Color));
                flyoutContentRenderer.AndroidView.SetBackground(flyoutbackground);
            }
            else
            {
                flyoutbackground.SetColorFilter(Shell.Current.FlyoutBackgroundColor.ToAndroid(), PorterDuff.Mode.Src);
                flyoutContentRenderer.AndroidView.SetBackgroundDrawable(flyoutbackground);
            }
            return flyoutContentRenderer;
        }
}

渲染结果

限制

拐角半径是硬编码的。
似乎不适用于 Android API <= 26，请随时 fix/improve 此答案中的代码。

备注

可以对 iOS 实施类似的类比，这里的答案可能对有帮助。

相关问题：Shell TabBar rounded corners with view behind

编辑

如果您使用 Shell.FlyoutContent 或 FlyoutContentTemplate 而不是基于 AppShell 层次结构自动生成的内容来覆盖弹出内容，请选中，因为您不需要自定义渲染器来实现这一点。

Shell 带有圆角的弹出窗口

Shell flyout with round corners

c#

xamarin

xamarin.forms

custom-renderer

xamarin.forms.shell

渲染结果

限制

备注

编辑