Search code examples
c#xamlxamarin.formscross-platform

How change color of three btn at toolbar crossplatform


I could not understand why the button with dots is not displayed. But clicking in this area opens drop-down menus.

enter image description here

The dots on the button are white and they just blend in with the background. I found a solution for android, but how do I go about making a cross platform solution to the problem?

enter image description here

<ContentPage.ToolbarItems>
    <ToolbarItem 
        Order="Secondary"
        
        Text="Item 0"
        Priority="0"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 1"
        Priority="1"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 2"
        Priority="2"/>
</ContentPage.ToolbarItems>

Solution

  • When the Order property is set to Secondary, behavior varies across platforms. On UWP and Android, the Secondary items menu appears as three dots that can be tapped or clicked to reveal items in a vertical list. On iOS, the Secondary items menu appears below the navigation bar as a horizontal list.

    A easy is to change the background color of the toolbar.

    App.xaml.cs:

     var navPage = new NavigationPage(new Page2());
            this.MainPage = navPage;
    
            navPage.BarBackgroundColor = Color.Blue;
    

    enter image description here

    Update:

    Android:

    Change the color of 3 dots in style:

      <style name="MainTheme" parent="MainTheme.Base">  
    <item name="android:textColorSecondary">#54FF9F</item> 
    </style>
    

    Use the androidx.appcompat.widget.Toolbar in the Toolbar.xml:

      <?xml version="1.0" encoding="utf-8"?>
     <androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:theme="@style/MainTheme"
    android:popupTheme="@style/MainTheme.Base" 
     />
    

    enter image description here

    iOS:

    Like what i said in previouss reply, the Secondary items menu on ios appears below the navigation bar as a horizontal list.

    enter image description here

    You could use IOSToolbarExtensions instead.

    NuGet: https://www.nuget.org/packages/IOSToolbarExtensions/

    Install it and add the code below into AssemblyInfo.cs:

    [assembly: ExportRenderer(typeof(ContentPage), typeof(IOSToolbarExtensions.iOS.Renderers.IOSToolbarExtensionsContentPageRenderer), Priority = short.MaxValue)]
    

    enter image description here