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

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

0 голосов
/ 10 января 2019

Hy, я новичок в 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>

Синяя полоса - это цвет фона, который я хочу изменить. Цветная панель инструментов

Теперь с использованием TabbedPage объявление выглядит так: Страница с вкладками

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

Ответы [ 3 ]

0 голосов
/ 10 января 2019

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

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

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

0 голосов
/ 15 апреля 2019

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

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

Это изменит ваш цвет фона ToolBarItem.Simple !!

0 голосов
/ 10 января 2019

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