Mvvmcross Xamarin Forms Navigation page style not working

Question

I'm trying to style Navigation page on xamarin forms app with Mvvmcross.

before "adding" mmvcross I've defined style in App.xaml as follows.

<Style TargetType="NavigationPage">
    <Setter Property="BarBackgroundColor" Value="Black" />
    <Setter Property="BarTextColor" Value="White" />
</Style>

and it worked. I got background color and text color as i defined. Then we "moved" to Mvvmcross - we added all needed backend code, changed all pages from ContentPage to MvxContentPage etc and... background color of navigation page stopped working on Android (I haven't tried on iOS). If i change BarTextColor in App.xaml changes apply, color is changed. if i change BackgroundColor it also works - all application background color is changed. but no matter what value i apply to BarBackgroundColor it is still white.

my App.xaml is as follows:

<?xml version="1.0" encoding="utf-8" ?>
<core:MvxFormsApplication xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
             xmlns:viewModels="clr-namespace:MvvmCross.ViewModels;assembly=MvvmCross"
             xmlns:core="clr-namespace:MvvmCross.Forms.Core;assembly=MvvmCross.Forms"
             xmlns:attributes="clr-namespace:MvvmCross.Forms.Presenters.Attributes;assembly=MvvmCross.Forms"
             x:Class="ShowMeTheLogs.Core.FormsApp">
    <core:MvxFormsApplication.Resources>
        <!--Global Styles-->
        <Color x:Key="ColorPrimary">#98C340</Color>
        <Color x:Key="ColorError">#CF1212</Color>
        <Color x:Key="ColorWarning">#E4AD17</Color>
        <Color x:Key="ColorInfo">#1283CF</Color>
        <Color x:Key="ColorDebug">#989898</Color>
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="{StaticResource ColorPrimary}" />
            <Setter Property="BarTextColor" Value="White" />
        </Style>

        <Style x:Key="SubmitButton" TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
            <Setter Property="TextColor" Value="White" />
        </Style>

        <Style x:Key="circleButton" TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
            <Setter Property="BorderRadius" Value="50" />
            <Setter Property="WidthRequest" Value="100" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="FontSize" Value="50" />
        </Style>

        <Style x:Key="smallSquareButton" TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
            <Setter Property="WidthRequest" Value="100" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="FontSize" Value="Micro" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
    </core:MvxFormsApplication.Resources>
</core:MvxFormsApplication>

my App.xalm.cs is the simpliest as it can be:

public partial class FormsApp: MvxFormsApplication
    {
        public App()
        {
            InitializeComponent();
        }
    }

and the simpliest view:

<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
             x:TypeArguments="viewModels:WebAppListViewModel"
             x:Class="ShowMeTheLogs.Core.Views.WebAppListPage"
             xmlns:bindings="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
             xmlns:viewModels="clr-namespace:ShowMeTheLogs.Core.ViewModels;assembly=ShowMeTheLogs.Core"
             Title="Sample title"
             NavigationPage.HasBackButton="False">
    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="AddNewApp" Order="Secondary" Text="Dodaj aplikację" Priority="0" Command="{bindings:MvxBind NewWebAppCommand}"/>
    </ContentPage.ToolbarItems>

    <RelativeLayout Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
       <Non relevant="Code" />
    </RelativeLayout>

</views:MvxContentPage>

I have literally no idea why it is not working. the only change in androud code was changing class RootActivity: CompatActivity to class RootActivity: MvxFormsAppCompatActivity

have enyone fought this problem before? packages were obtained from NuGet - MvvmCross (and MvvmCross.Forms) ver 6.2.2 - Xamarin ver 28.0.0 - Xamarin.Forms ver 3.4.0

pnavk pnavk · Accepted Answer · 2019-02-05T18:39:39

In your MainActivity OnCreate method, make sure the two lines setting the Toolbar resource are before the base.OnCreate() call:

protected override void OnCreate(Bundle bundle)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;
    base.OnCreate(bundle);
}

https://github.com/MvvmCross/MvvmCross/issues/2301

Mvvmcross Xamarin Forms Navigation page style not working

1 Answers