C# 如何自定义Xamarin Shell中顶部选项卡（ShellSection）的外观？

我做了很多研究：

然而，我找不到如何正确实现我的想法

我的应用程序使用带有弹出式菜单的XamarinShell，一些页面显示顶部的选项卡栏。举个例子，我的应用程序如下所示：

。现在，我想自定义这些选项卡并更改字体、选择指示器的颜色等。起初，我认为我可以在我的Android项目的

styles.xml

文件中创建一个特定的样式，并在

Android.support.design.widget.TabLayout

中引用它。举个例子，我在Xamarin解决方案的Android项目中的

Tabbar.xml

文件中做了如下操作：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/sliding_tabs"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   app:tabIndicatorColor="@android:color/white"
   style="@style/MyCustomTabLayout"
   app:tabGravity="fill"
   app:tabMode="fixed" />

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MainTheme" parent="MainTheme.Base">
    <item name="android:textAllCaps">false</item>
  </style>

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#FFFFFF</item>
    <item name="tabIndicatorHeight">3dp</item>
    <item name="tabSelectedTextColor">#FFFFFF</item>
  </style>
</resources>

但是，什么也没有发生，并且没有应用样式。我认为这是对如何真正实现我的想法的误解，我认为可能“子”顶部选项卡栏不被认为是真正的

表格布局

，因为它只是

ShellSection

的产品。最后，我发现也许我需要的是一份工作。我正在实现它，但是我被这个问题困住了：我不知道如何设置

外壳部分的外观。自定义渲染器的当前代码如下：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace A {
    internal class CustomShellRenderer : ShellRenderer {
        public CustomShellRenderer(Context context) : base(context) { }

        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection) {
            return new CustomShellSectionAppearance(this);
        }
    }

    class CustomShellSectionAppearance : ShellSectionRenderer {
        public Fragment Fragment { get; }
        public event EventHandler AnimationFinished;
        public void Dispose() {
            throw new NotImplementedException();
        }

        public ShellSection ShellSection { get; set; }

        public CustomShellSectionAppearance(IShellContext shellContext) : base(shellContext) { }

        // I thought I need to make my customization here, but it was only a guess:
        // I found nobody talking about customizing a ShellSection on the Web
        protected override void SetAppearance(ShellAppearance appearance) {
            base.SetAppearance(appearance);
            appearance.TabBarDisabledColor = Color.Aqua; // ERROR: appearance has only "get" properties
        }
    }
}

在自定义Xamarin应用程序顶部选项卡栏的外观的过程中，我是否遗漏了一些内容？
您可以使用以下Shell自定义渲染器来实现这一点


对于颜色：
SetColors（TabLayout TabLayout，颜色前景，颜色背景，颜色标题，未选择的颜色）
方法的参数名称是不言自明的
如果在下面的代码中，颜色类型前面没有名称空间，那么它来自XF，因为
使用Color=Xamarin.Forms.Color

对于字体，您需要创建自定义视图并定义所需的任何属性
您可以使用
TabSelected
和
TabUnSelected
事件修改属性、更改样式或在更改选择时执行任何逻辑，在我的演示中，我将在文本上应用粗体，并在选择tab时使其变大，在取消选择tab时恢复，您也可以在那里实现一个漂亮的动画

公共类MyShellRenderer:ShellRenderer
{
公共MyShellRenderer（上下文）：基（上下文）
{
}
受保护的覆盖IShellTableLayoutAppearanceTracker CreateTableLayoutAppearanceTracker（ShellSection ShellSection）
=>新的MyTableLayoutAppearanceTracker（此）；
}
公共类MyTableLayoutAppearanceTracker:ShellTableLayoutAppearanceTracker
{
公共MyTableLayoutAppearanceTracker（IShellContext shellContext）：基（shellContext）
{
}
公共覆盖无效集合外观（TabLayout TabLayout、SHELL外观）
{
基本设置外观（表格布局、外观）；
tabLayout.TabSelected+=tabLayout\tabu选中；
tabLayout.TabUnselected+=tabLayout\u TabUnselected；
对于（var i=0；i



编辑

没有自定义渲染器的更简单解决方案

查看xamarin communitytoolkit的软件包。
如果您想更改所选选项卡的颜色而不需要自定义渲染器，您可以通过编辑Shell选项卡的ShellUnselectedColor、ShellTitleColor和ShellForegroundColor来执行此操作：

  <Style x:Key="BaseStyle"
                   TargetType="Element">
                <Setter Property="Shell.BackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TitleColor"
                        Value="White" />
                <Setter Property="Shell.DisabledColor"
                        Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarTitleColor"
                        Value="White" />
            </Style>

我相信这也会影响底部选项卡和导航栏。@op还想更改字体。
  <Style x:Key="BaseStyle"
                   TargetType="Element">
                <Setter Property="Shell.BackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TitleColor"
                        Value="White" />
                <Setter Property="Shell.DisabledColor"
                        Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarTitleColor"
                        Value="White" />
            </Style>