xamarin.forms - Xamarin Forms Shell - 更改选项卡颜色

Question

我一直在使用Xaminals 示例，对于大多数元素，有一种方法可以使用“Shell”更改颜色。在 XAML 中。但是，我无法弄清楚如何更改所选标签栏的颜色（见下面的截图）：

它总是灰色的。任何建议，将不胜感激。谢谢！

Answer 1

多亏了这篇文章，我才明白了这一点：Xamarin.Forms Shell Custom Renderers。请注意，这专门针对 shell 的自定义渲染器。

这是我的代码（适用于 Android）：

...

// Create a custom shell renderer (MyShellRenderer in my case):

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

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new MyTabLayoutAppearanceTracker(this);
        }
    }
}

...

// Create a custom appearance tracker for tab layout (MyTabLayoutAppearanceTracker in my case):

public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
    public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
    {
    }

    protected override void SetColors(TabLayout tabLayout, Color foreground, Color background, Color title, Color unselected)
    {
        base.SetColors(tabLayout, foreground, background, title, unselected);

        tabLayout.SetSelectedTabIndicatorColor(Color.Red.ToAndroid());
    }
}

Answer 2

我想通了，需要制作任何自定义渲染器，你可以简单地在 shellcontent 标签中给出它

<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Shell.TabBarTitleColor="#353f7b" Shell.TabBarUnselectedColor="Green" />

Answer 3

根据您的描述，您想更改所选选项卡的颜色，您可以通过样式进行此操作。ShellTitleColor是选定颜色的颜色，ShellUnselectedColor是其他未选定选项卡的颜色。

   <Shell.Resources>
    <Style x:Key="BaseStyle" 
           TargetType="Element">
        <Setter Property="Shell.ShellBackgroundColor" 
                Value="#455A64" />
        <Setter Property="Shell.ShellForegroundColor" 
                Value="White" />
        <Setter Property="Shell.ShellTitleColor" 
                Value="Red" />
        <Setter Property="Shell.ShellDisabledColor" 
                Value="#B4FFFFFF" />
        <Setter Property="Shell.ShellUnselectedColor" 
                Value="#95FFFFFF" />
    </Style>

</Shell.Resources>


<FlyoutItem Route="animals"
            Title="Animals"
            FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="Domestic"
         Route="domestic"
         Icon="paw.png">
        <ShellContent Route="cats"
                      Style="{StaticResource BaseStyle}"
                      Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent Route="dogs"
                      Style="{StaticResource BaseStyle}"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </Tab>
    <ShellContent Route="monkeys"
                  Style="{StaticResource BaseStyle}"
                  Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
    <ShellContent Route="elephants"
                  Style="{StaticResource BaseStyle}"
                  Title="Elephants"
                  Icon="elephant.png"
                  ContentTemplate="{DataTemplate views:ElephantsPage}" />  
    <ShellContent Route="bears"
                  Style="{StaticResource BaseStyle}"
                  Title="Bears"
                  Icon="bear.png"
                  ContentTemplate="{DataTemplate views:BearsPage}" />

    <ShellContent Route="about"
              Style="{StaticResource BaseStyle}"
              Title="About"
              Icon="info.png"
              ContentTemplate="{DataTemplate views:AboutPage}" />
</FlyoutItem>

Answer 4

您只需添加样式并将 TabBar 样式设置为基于此。我建议您将其移到资源文件夹和新文件中，例如 (TabBarStyles.xaml) 并使用合并的字典来拉入。但这里是代码，例如

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">White</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <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 NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White" />
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarTitleColor" Value="Black" />
            <Setter Property="Shell.Clip" Value="True" />
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<TabBar>
    <Tab Title="Home" Icon="account_balance-24px.png" Route="browse">
        <ShellContent Title="A" ContentTemplate="{DataTemplate views:MainView}" Route="a"/>
    </Tab>
    <Tab Title="About" Icon="tab_about.png" Route="about">
        <ShellContent ContentTemplate="{DataTemplate views:MainView}" />
    </Tab>
</TabBar>