Как изменить цвет фона панели инструментов в BottomBarPage

Хай, я новичок в Xamarin Forms, и я работаю с BottomBarPage, теперь мне нужна настраиваемая панель инструментов с разными элементами, как вы можете видеть в коде, я успешно добавил ToolbarItem, я сомневаюсь, как я могу изменить панель инструментов фоновый цвет? Я пробовал с x: BackgroundColor в xf: BottomBarPage, но не работал. Любое предложение?

<?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

Но цвет полосы вверху по-прежнему синий, как его изменить? Верхняя панель инструментов


xamarin.forms toolbar xaml bottombar
person notarealgreal    schedule 10.01.2019    source источник
comment
Похоже, вы используете устаревшую библиотеку, теперь вы можете сделать это в XF, следуйте этой статье: Официальная нижняя панель навигации / нижние вкладки на Android   -  person FabriBertani    schedule 10.01.2019
comment
@FabriBertani Я делаю кроссплатформенные iOS и Android   -  person notarealgreal    schedule 10.01.2019

Ответы (3)


arrow_upward
2
arrow_downward

Как сказал @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>

Итак, теперь у вас есть панель вкладок красного цвета внизу.

Теперь вам нужно изменить цвет NavigationBar, для этого вам нужно получить доступ к NavigationPage и изменить цвет полосы. Если вы хотите установить его один раз, я бы изменил это в App.cs, как показано ниже:

   public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage())
            {
                BarBackgroundColor = Color.Red
            };
        }
person Ahmad ElMadi    schedule 10.01.2019
comment
Официальная страница с вкладками в Android находится вверху, а в iOS внизу, я использую BarBottomPage, чтобы они оба были внизу. Моя проблема в том, как я могу редактировать панель инструментов, как вы можете видеть на изображении, это синяя полоса. @ Ахмад Эль-Мади - person notarealgreal; 10.01.2019
comment
недавно они начали поддерживать нижнюю панель в Android, просто следуйте коду, который я вам дал, и он будет работать. обратите внимание на BarBackgroundColor - person Ahmad ElMadi; 10.01.2019
comment
Я меняю его, теперь у меня есть полоса внизу, но у меня все еще есть панель инструментов вверху, я синий, как вы можете видеть на изображениях, как я могу ее изменить? - person notarealgreal; 10.01.2019

arrow_upward
1
arrow_downward

Перейдите на свой App.xaml.cs после инициализации компонента на главной странице

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

Это изменит цвет фона вашего ToolBarItem. Просто !!

person Muhammad Ayyaz    schedule 15.04.2019

arrow_upward
0
arrow_downward

Учитывая вкладки @FabriBertani, которые дали вам ответ, нечего добавить к этому.

Учитывая панель инструментов, Xamarin.Forms не поддерживает панель инструментов iOS, и если вы хотите написать что-то в точности такое, вам, вероятно, придется проделать большую работу самостоятельно, и лучше использовать Xamarin.iOS + Xamarin.Android в этом случае.

Если вам нужен Xamari.Forms, нет простого решения, требует высокого уровня навыков и много времени, поэтому вряд ли может быть лучший ответ - никто не сделает это за вас, и я не уверен, соответствуют ли ваши навыки требуемому уровню и даже если они это сделают, вероятно, будет пустой тратой времени прилагать усилия к чему-то подобному вместо использования альтернативных подходов.

person Ivan Ičin    schedule 10.01.2019