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

【问题标题】：How to change Toolbar Background color in a BottomBarPage如何更改 BottomBarPage 中的工具栏背景颜色
【发布时间】：2019-01-10 13:03:16
【问题描述】：

嗨，我是 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

【问题讨论】：

看来您使用的库已经过时了，您现在可以在 XF 上执行此操作，请关注这篇文章：Official Bottom Navigation/Bottom Tabs on Android
@FabriBertani 我正在做跨平台的 iOS&Android

标签： xaml xamarin.forms toolbar bottombar

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

所以现在你在底部有一个标签栏，颜色为 red 。

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

   public App()
        {
            InitializeComponent();

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

【讨论】：

Android 中的官方标签页位于顶部，iOS 中位于底部，我使用 BarBottomPage 将它们都放在底部。我的问题是，我如何编辑工具栏，正如您在图像中看到的蓝色栏。 @Ahmad ElMadi
最近他们开始支持Android的底部栏，只要按照我给你的代码就行了。关注BarBackgroundColor
我改了，现在底部有栏，但顶部的工具栏仍然是蓝色的，你可以在图片中看到，我该如何更改？

【解决方案2】：

转到您的 App.xaml.cs 在主页面初始化组件后

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

这将改变你的 ToolBarItem 背景颜色。简单！！

【讨论】：

【解决方案3】：

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

考虑到工具栏，Xamarin.Forms 不支持 iOS 工具栏，如果你想写一些完全一样的东西，你可能需要自己做很多工作，最好使用 Xamarin .iOS + Xamarin.Android 在这种情况下。

如果您想要 Xamari.Forms，没有简单的解决方案，需要高技能水平和大量时间，因此几乎没有更好的答案 - 没有人会为您做，我不确定您的技能是否匹配达到要求的水平，即使他们这样做了，在这样的事情上付出努力而不是使用替代方法可能是浪费时间。

【讨论】：