2
votes

Comment changer la couleur d'arrière-plan de la barre d'outils dans une BottomBarPage

Hy, je suis nouveau dans Xamarin Forms et je travaille avec BottomBarPage, maintenant j'ai besoin d'une barre d'outils personnalisée avec différents éléments, comme vous pouvez le voir dans le code j'ai ajouté un ToolbarItem avec succès, mon doute est, comment puis-je changer la couleur d'arrière-plan de la barre d'outils? J'ai essayé avec x: BackgroundColor dans xf: BottomBarPage mais n'a pas fonctionné. Une suggestion?

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

La barre bleue est la couleur d'arrière-plan que je souhaite modifier Color ToolBar

Maintenant, avec l'utilisation d'un TabbedPage, la déclaration est : Page à onglets

Mais la couleur de la barre en haut étant toujours bleu, comment puis-je le changer? Barre d'outils supérieure

toolbar xamarin.forms xaml bottombar

2 commentaires

Il semble que vous utilisez une bibliothèque obsolète, vous pouvez le faire maintenant sur XF, suivez cet article: Navigation inférieure officielle / Onglets inférieurs sur Android

@FabriBertani je le fais multi-plateforme iOS et Android

3 Réponses :

2
votes

Comme l'a dit @fabriBertani, utilisez la spécification officielle TabbedPage avec les onglets inférieurs comme décrit dans l'article qu'il a partagé vérifiez le code que j'ai partagé ci-dessous

   public App()
        {
            InitializeComponent();

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

Vous avez maintenant une barre d'onglets dans le bouton avec la couleur rouge.

Vous devez maintenant changer la couleur de la NavigationBar pour ce faire, vous devez accéder à la NavigationPage et changer la couleur de la barre. Si vous voulez le définir une fois, je le changerais dans App.cs comme ci-dessous:

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

3 commentaires

La page officielle à onglets dans Android est en haut et dans iOS en bas, j'utilise BarBottomPage pour les avoir tous les deux en bas. Mon problème est, comment puis-je modifier la barre d'outils, comme vous pouvez le voir dans l'image est la barre bleue. @Ahmad ElMadi

Récemment, ils ont commencé à prendre en charge la barre inférieure sous Android, il suffit de suivre le code que je vous ai donné et cela fonctionnerait. faites attention au BarBackgroundColor

Je le change, maintenant j'ai la barre en bas mais j'ai toujours la barre d'outils en haut en bleu comme vous pouvez le voir sur les images, comment puis-je la changer?

0
votes

Compte tenu des onglets @FabriBertani vous a donné la réponse, rien à ajouter à cela.

Compte tenu de la barre d'outils, Xamarin.Forms ne prend pas en charge la barre d'outils iOS et si vous voulez écrire quelque chose exactement comme ça, vous devrez probablement faire beaucoup de travail vous-même et c'est une meilleure idée d'utiliser Xamarin .iOS + Xamarin.Android dans ce cas.

Si vous voulez Xamari.Forms, il n'y a pas de solution facile, cela nécessite un haut niveau de compétence et beaucoup de temps, donc il ne peut guère y avoir de meilleure réponse - personne ne le fera pour vous et je ne suis pas sûr que vos compétences correspondent le niveau requis et même s'ils le font, c'est probablement une perte de temps de faire des efforts dans quelque chose comme ça au lieu d'utiliser des approches alternatives.

0 commentaires

1
votes

Accédez à votre App.xaml.cs Après l'initialisation du composant dans la page principale
MainPage = new NavigationPage(new Login())
{
    BarBackgroundColor = Color.DarkOrange
};
Cela changera la couleur d'arrière-plan de votre ToolBarItem. Simple !!

0 commentaires