带有圆角的外壳弹出按钮答案

【问题标题】：Shell flyout with round corners带有圆角的外壳弹出按钮
【发布时间】：2021-07-11 18:33:07
【问题描述】：

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

【问题讨论】：

我从未尝试过，但您是否尝试将弹出的背景颜色设置为透明，然后使用 PancakeView 在内部创建视图？
感谢您的建议，不，我没有，因为弹出内容是根据您的 Appshell hiearchy 自动生成的（默认设置）。我没有设置Shell.FlyoutContent
@FabriBertani 您可以将您的评论建议转换为未来读者的答案，我试过了，它正在工作:)。在设置 FlyoutContent 或 FlyoutContentTemplate 而不是自动生成的情况下，这是一种比自定义渲染器更好的方法。
太棒了，我也假设这在两个平台上都可以工作；-D
@FabriBertani 当然，因为它是在共享代码中实现的，除非 XF 本身存在错误 :)

标签： c# xamarin xamarin.forms custom-renderer xamarin.forms.shell

【解决方案1】：

不幸的是，当使用基于 AppShell 层次结构的自动生成的弹出内容时，我在共享代码中看不到执行此操作的方法（如果您要覆盖它，请跳到编辑部分），这里是使用 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

注意

可以为 iOS 实现类似的类比，这是一个可能对 Xamarin Forms Shell TabBar Rounded Corner 有所帮助的答案。

编辑

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

【讨论】：