Xamarin Forms Shell - 更改选项卡颜色

Question

我一直在玩 Xaminals sample，对于大多数元素，可以使用 XAML 中的 "Shell." 来改变颜色。但是，我一直无法弄清楚如何更改所选选项卡的颜色 bar（请参见下面的屏幕截图）：

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

Answer 1

根据你的描述，你想改变选中标签的颜色，你可以通过样式来实现。 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 2

感谢这篇文章，我弄明白了：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 3

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

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

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>

Xamarin Forms Shell - 更改选项卡颜色

Xamarin Forms Shell - change tab color

xamarin.forms

xamarin.forms.shell