Xamarin Forms Shell - 更改选项卡颜色答案

【问题标题】：Xamarin Forms Shell - change tab colorXamarin Forms Shell - 更改选项卡颜色
【发布时间】：2019-07-08 14:54:40
【问题描述】：

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

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

【问题讨论】：

这应该在特定于平台的渲染器中完成TabbedPageRenderer
我猜我们必须使用自定义渲染器？我会试一试并报告

标签： xamarin.forms xamarin.forms.shell

【解决方案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());
    }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

道歉。我的意思是选定的标签 bar，如屏幕截图中红色突出显示的那样。
@karthect，别管我的 gif，请在 style 中将 Shell.ShellTitleColor 属性设置为 Red，这样你就可以在 shell 中使用这种风格了。我已经更新了我的代码

【解决方案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>

【讨论】：