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

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

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

这将更改您的ToolBarItem背景颜色。简单！

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

3 个答案: