xamarin.forms - Changed background colors of action bar and pages after update to .forms 3.1

Question

I’m on the way to update my .forms (shared) project:

• VS2015 Update 3 RC -> VS2017 15.7.5
• .forms 2.3.0.49 -> .forms 3.1

Important note: I don’t use XAML yet (I do anything in code).

First I have compiled the “old” project without to update forms -> the colors were identical to the compile with .forms 2.3.0 under VS2015.
Then I have updated the whole project to forms 3.1 (without any further change in the settings / code).
After that, the colors were changed automatically so that the app becomes unusable.
In the old version (.forms 2.3.0):

• The background color of the action (title) bar was white and the title text color was black

• The page back colors were black (therefore I have set the text colors to white and light green, what was good readable on the black background)

In the new version (.forms 3.1)

• The background color of the action (title) bar is black and the title text color also (still is) black (not readable / usable)
• The page back colors is white are white and the text color still is white and light green (not readable / usable)

Also further colors (e.g. to the edit control) were changed in a bad way (old: dark grey background and white text color, new: dark gray background and black text color).

So... something has changed between .forms 2.3.0 and .forms 3.1 - maybe some setting / file is missing in my project to the base color settings...?

As I don’t want to change the colors to any used objects in my app, I search for a way to “restore” the color settings with .forms 3.1 like it was in 2.3.0 but don’t have found any useful information’s yet (trying for day’s now).

Does anybody knows, why this happens and what I have to do to set the "old" base background colors for the whole app?

Answer 1

I still don’t know why the colors were changed by the update to .forms 3.1, but I have found a solution to set the colors to my app.

As I wrote, I don’t have worked with XAML yet and had created my .forms project with .forms 2.3.0.49 and VS2015 (a longer time ago). Therefore, my project only had an app.cs as main entry point in the shared directory (without an app.xaml where it should be possible to define the base colors to the app).

Therefore, I have changed the design of my app regarding the app.cs.
To do this, I had to:

• Exclude the file app.css from my project
• Add a new file to my project, based on template “Content Page” (description “A page for displaying content using XAML”)
• Name the new file App

Then, two files were generated:

• App.xaml (the new description file to the app object)
• App.xaml.cs (the new code file to the app object)

Secure, that both new files are included in the project.
The following properties to the app.xaml have to be set:
Build Action: Embedded resource
Custom Tool: MSBuild:UpdateDesignTimeXaml
(note: I had to enter the text manually)

Then, I had to copy the content of the “old” app.cs file in the file app.xaml.cs and do the following changes:
Change:

public class App : Application

to:

public partial class App : Application

further secure, that:

public App()
{}

contains:

InitializeComponent();

(note: this was missing in my case)

Secure, that App.xaml contains the correct name of the app in the Class= entry

x:Class="YourCorrectAppName.App"><Application.Resources>  

Then:

• Save all files to the project
• Clean project
• Reopen project
• Compile the project

(Note: I had to reload the project multiple times until VS has noted all changes, by first attempt, I had error messages by trying to compile).
As soon as the project has compiled, I was able to open App.xaml and set the needed base colors to my project in App.xaml:

<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="CSCockpit.App">
    <Application.Resources>
        <ResourceDictionary>
            <!-- Platformspecific settings  to the app -->
            <!-- Important!
            ApplyToDerivedTypes="True" include the change to all derived types (only this way it works!) -->
            <!-- ContentPage -->
            <!-- Set background color to ContentPage depending on platform -->
                  <Style
                TargetType="ContentPage" ApplyToDerivedTypes="True">
                <Setter
                    Property="BackgroundColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="Black"
                            iOS="White" 
                            WinPhone="White" />
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- NavigationPage -->
            <!-- Set BarTextColor color to NavigationPage depending on platform -->
            <Style
                TargetType="NavigationPage" ApplyToDerivedTypes="True">
                <Setter
                    Property="BarTextColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="White"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
            </Style>

            <!-- Entry -->
            <!-- Set text- and placeholder color to entry depending on platform -->
            <Style
                TargetType="Entry" ApplyToDerivedTypes="True">
                <Setter
                    Property="TextColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="White"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="PlaceholderColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="SlateGray"
                            iOS="SlateGray" 
                            WinPhone="SlateGray" />
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- Editor -->
            <!-- Set text  color to entry depending on platform -->
            <Style
                TargetType="Editor" ApplyToDerivedTypes="True">
                <Setter
                    Property="TextColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="White"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- Picker -->
            <!-- Set font size and text color to pircker depending on platform -->
            <Style
                TargetType="Picker" ApplyToDerivedTypes="True">
                <Setter
                    Property="TextColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="White"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="FontSize">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="x:Double"
                            Android="18"
                            iOS="20"
                            WinPhone="20" />
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- DatePicker -->
            <!-- Set font size and text color to picker depending on platform -->
            <Style
                TargetType="DatePicker" ApplyToDerivedTypes="True">
                <Setter
                    Property="TextColor">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="White"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="FontSize">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="x:Double"
                            Android="18"
                            iOS="20"
                            WinPhone="20" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style
                TargetType="BoxView" ApplyToDerivedTypes="True">
                <Setter
                    Property="Color">
                    <Setter.Value>
                        <OnPlatform
                            x:TypeArguments="Color"
                            Android="SlateGray"
                            iOS="Black" 
                            WinPhone="Black" />
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Now, my project is usable again...