xamarin forms - actionbar color

Question

How do I change the color of the actionbar and get the horizontal line back?

I have a successful android app developed in native xamarin android. Now i'm trying to port it to Xamarin Forms using the xaml approach.

I've created a hello world app and added a toolbar item the contentPage. When I initially start the app, the action bar is visible with my icon, the normal teal background and there is a nice horizontal line. However, once my forms code kicks in, it displays my icon, my toolbaritem icon, but the background is black and there is no horizontal line.

I've tried NavigationPage.BackgroundColor and that had no affect. I'm thinking i'm doing something small wrong.

Here is my xaml.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage.Title> My Sample </ContentPage.Title>

 <ContentPage.ToolbarItems>
        <ToolbarItem Name="test" Icon="ic_action_refresh" ></ToolbarItem>
  </ContentPage.ToolbarItems>


<Label Text="Hello Forms" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

Here is my app.cs

public class App 
{ 
public static Page GetMainPage() 
{ 
     var nav = new NavigationPage(new Splash()); 
     nav.BackgroundColor = Color.Teal; 
     return nav; 
} 
}

I'd also like to hide the default actionbar at startup and go with a full splash screen, but I did find this thread that looks like it'll work. http://forums.xamarin.com/discussion/18290/hiding-the-status-bar-and-the-action-bar-in-android-app

Answer 1

This is what I have done.

in App.xaml, add following lines and it works in both iOS and Android

<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="whatever color value here"/>
</Style>

Answer 2

I figured it out. I was using the default template in VS2013 and the Xamarin.Forms.Core library reference was version 1.0. There have been a few updates since and one of them fixed the issue. I just updated via nuget to the latest version and it started working.

Answer 3

I've had a lot of luck with the following method when generating a NavigationPage, with the key being the BarBackgroundColor property being the key to setting the color of the bar itself. The underlying border should still be present as well. You can also use whatever method from Color you like, not just the FromHex method.

private Page GetNavigationPage(Page innerPage){
    var navigation =  new NavigationPage (innerPage);
    navigation.BarBackgroundColor= Color.FromHex ("#00263A"); 
        return navigation;
}

Answer 4

Try to do it at App.xaml.cs

        MainPage = new NavigationPage(new TrainPage());
        ((NavigationPage)Application.Current.MainPage).BarBackgroundColor = Color.Black;
        ((NavigationPage)Application.Current.MainPage).BarTextColor = Color.White;