如何更改 BottomBarPage 中的工具栏背景颜色

Question

嗨，我是 Xamarin Forms 的新手，我正在使用 BottomBarPage，现在我需要一个包含不同项目的自定义工具栏，正如您在代码中看到的那样，我成功添加了一个 ToolbarItem，我的疑问是，如何我可以更改工具栏的背景颜色吗？我尝试在 xf:BottomBarPage 中使用 x:BackgroundColor 但没有成功。有什么建议吗？

<?xml version="1.0" encoding="utf-8" ?>
<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MyProject.Views.StartPage"
            xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
            xmlns:Views="clr-namespace:MyProject.Views;assembly=MyProject"
            x:Name="TabMenu">


    <xf:BottomBarPage.ToolbarItems x:BackgroundColor="#D60000">
        <ToolbarItem Name="User" Order="Primary" Icon="home.png" Text="Item 1" Priority="0" Clicked="User_Clicked"/>
        <!--<ToolbarItem Name="MenuItem2" Order="Primary" Icon="Xamarin.png" Text="Item 2" Priority="1" />-->
    </xf:BottomBarPage.ToolbarItems>

    <xf:BottomBarPage.Children>
        <Views:MainPage 
            ClassId="Home"
            Title="Page1" 
            Icon="Page1.png" 
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:MainPage 
            Title="Page2" 
            Icon="Page2.png"  
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:Graphs 
            Title="Page3"  
            Icon="Page3.png" 
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:MainPage 
            Title="Page4" 
            Icon="Page4.png"
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:Info 
            Title="Page5" 
            Icon="Page5.png"
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
    </xf:BottomBarPage.Children>
</xf:BottomBarPage>

蓝色条是我要更改的背景颜色 Color ToolBar

现在使用 TabbedPage，声明为： Tabbed Page

但是顶部栏的颜色仍然是蓝色，我该如何更改呢？ Top ToolBar

Answer 1

正如@fabriBertani 所说，使用他分享的文章中描述的带有底部标签规范的官方 TabbedPage 检查我在下面分享的代码

<TabbedPage
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:test="clr-namespace:Test;assembly=Test"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom" 
    BarBackgroundColor="Red"
    x:Class="Test.TabbedPage">
    <test:MainPage Title="Page 1" Icon="alarm"/>
    <test:MainPage Title="Page 2" Icon="watch"/>
</TabbedPage>

所以现在你在按钮中有一个红色的 Tabbar。

现在您需要更改 NavigationBar 的颜色为此您需要访问 NavigationPage 并更改栏颜色。如果您想设置一次，那么我会在 App.cs 中更改它，如下所示：

   public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage())
            {
                BarBackgroundColor = Color.Red
            };
        }

Answer 2

考虑到@FabriBertani 给你的答案，没有什么可以补充的。

考虑到工具栏，Xamarin.Forms 不支持 iOS 工具栏，如果您想编写完全类似的东西，您可能需要自己做很多工作并且在这种情况下使用 Xamarin.iOS + Xamarin.Android 是更好的主意。

如果你想要 Xamari.Forms 没有简单的解决方案，需要高技能水平和大量时间，所以几乎没有更好的答案 - 没有人会为你做，我不确定您的技能是否符合要求的水平，即使符合要求，将精力放在这样的事情上而不是使用其他方法可能是浪费时间。

Answer 3

Go to your App.xaml.cs After Initialize component in Main Page

MainPage = new NavigationPage(new Login())
{
    BarBackgroundColor = Color.DarkOrange
};

这将更改您的 ToolBarItem 背景 Color.Simple!!

如何更改 BottomBarPage 中的工具栏背景颜色

How to change Toolbar Background color in a BottomBarPage

xaml

xamarin.forms

toolbar

bottombar