Bug 27605 - ContentPage Background color global style not working
Summary: ContentPage Background color global style not working
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.3.5
Hardware: Macintosh Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2015-03-03 12:29 UTC by laygr
Modified: 2016-10-14 19:23 UTC (History)
11 users (show)

Is this bug a regression?: ---
Last known good build:

Sample Project (176.79 KB, application/zip)
2015-03-04 05:02 UTC, Sadik Ali
Test solution. Only App.xaml is edited. (306.95 KB, application/zip)
2016-10-13 12:33 UTC, Anonymous

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description laygr 2015-03-03 12:29:27 UTC
With the recent updates, more styles are now working, yet, ContentPage.BackgroundColor still doesn't work.
This is how I'm declaring it:

               <Style TargetType="ContentPage">
                  <Setter Property="BackgroundColor" Value="#FAFAFA"/>

If I replace "ContentPage" with "Page", still doesn't work.
Comment 1 Sadik Ali 2015-03-04 05:02:10 UTC
Created attachment 10143 [details]
Sample Project

I have checked this issue and here are my observation.

Steps to reproduce:

1.Open attached sample.
2.Run the sample.

I tried to reproduce this issue with set  style code in content page and also getting same behaviour as mentioned in bug description.

Please let me know are you talking about same behaviour ?

Screencast: http://www.screencast.com/t/QHyX7sC0U

Please review the screencast and share sample project, xamarin.Forms version and build info if behaviour is different	.

Environment Info:
Xamarin.Forms version:
=== Xamarin Studio ===

Version 5.7 (build 661)
Installation UUID: 3d25a767-a003-4a7d-9f5e-e57987cf6cf0
	Mono 3.12.0 ((detached/a813491)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 312000068

=== Apple Developer Tools ===

Xcode 6.1 (6602)
Build 6A1052c

=== Xamarin.iOS ===

Version: (Business Edition)
Hash: dfb682f
Build date: 2015-01-08 13:39:32-0500

=== Xamarin.Android ===

Version: (Business Edition)
Android SDK: /Users/mac360_xamarin/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		2.1   (API level 7)
		2.2   (API level 8)
		2.3   (API level 10)
		3.1   (API level 12)
		4.0.3 (API level 15)
		4.4   (API level 19)
		5.0   (API level 21)
Java SDK: /usr
java version "1.7.0_71"
Java(TM) SE Runtime Environment (build 1.7.0_71-b14)
Java HotSpot(TM) 64-Bit Server VM (build 24.71-b01, mixed mode)

=== Xamarin.Mac ===

Version: (Business Edition)

=== Build Information ===

Release ID: 507000661
Git revision: b70bab61da996da29045ea8ee8aed1a6faedbe78
Build date: 2015-01-05 16:31:31-05
Xamarin addins: 82f6c71490562d6cd125a09287f441902fdac3d7

=== Operating System ===

Mac OS X 10.10.0
Darwin mac360-xamarins-Mac-mini.local 14.0.0 Darwin Kernel Version 14.0.0
    Fri Sep 19 00:26:44 PDT 2014
    root:xnu-2782.1.97~2/RELEASE_X86_64 x86_64
Comment 2 laygr 2015-03-04 17:36:52 UTC
Yes, I would expect the background to be a light gray (#FAFAFA), but in your case (Android) is black and in my case (iOS) is white.
Comment 3 JJ Kelley 2015-04-16 14:47:52 UTC
Additionally, I tried setting the Style implicitly and it also did not work. I was using Visual Studio for this project.

<Style x:Key="DefaultPageStyle" TargetType="ContentPage">
	<Setter Property="BackgroundColor" Value="White"/>
<Style TargetType="ContentPage">
	<Setter Property="Style" Value="{StaticResource DefaultPageStyle}"/>
Comment 4 Jahn Otto Andersen 2015-04-28 12:29:07 UTC
I'm having the same issue with Xamarin Forms 1.4.2 on Android.
Comment 5 Matheus Guimaraes 2015-08-26 04:32:27 UTC
Same issue here. Xamarin Forms

My declarations are in code. 

I have a Styles factory like this:

public static class PageStylesFactory
        public static Style Create(PageStyle style)
            var result = new Style(typeof(ContentPage));
            if (style == PageStyle.Default)
                result.Setters.Add(new Setter() { Property = ContentPage.BackgroundColorProperty, Value = Color.Teal });

            return result;

And I call it to create my style during the App initialization and add the style to the application resources with no key to make it global as such:

public App()
            // The root page of your application
            MainPage = new NavigationPage(new LogInPage());

        private void InitGlobalResources()
            Application.Current.Resources = new ResourceDictionary();

            var defaultButton = ButtonStylesFactory.Create(ButtonStyle.Default);

            var defaultPage = PageStylesFactory.Create(PageStyle.Default);

As you can see I do the exact same approach to apply a global style for buttons and it works fine. However, the page background color is unaffected.

Tested on Android only, but will test on IOS later.
Comment 6 Mike Rowley 2015-09-02 17:52:02 UTC
This looks like another orphaned bug, I have resolved a work around to making the global style work on a content page.  NOTE: I have only tested the BackgroundColor myself but as it is applying the entire Style you define it should work for all the properties that are exposed.

Simply create a Custom Renderer for ContentPage in your PCL:
    public class zoContentPage : ContentPage
        protected override void OnAppearing()
            var sKey = this.GetType().GetTypeInfo().BaseType.GetTypeInfo().BaseType.FullName;
            var objStyle = Application.Current.Resources.FirstOrDefault(x => x.Key == sKey).Value;
            if (objStyle != null) base.Style = (Style)objStyle;

And here is the code for the BackgroundColor Setter:
var contentPageStyle = new Style(typeof(ContentPage))
      Setters = {
           new Setter { Property = VisualElement.BackgroundColorProperty, Value = ContentPages.BackgroundColor }
if (ContentPages.key == null) { Application.Current.Resources.Add(contentPageStyle); } else { Application.Current.Resources.Add(ContentPages.key, contentPageStyle); }

I have however tested this on IOS and Android in Forms 1.5 pre3 and it works.
Comment 7 Matheus Guimaraes 2015-09-03 04:23:42 UTC
That is a pretty good "reverse engineered" solution demonstrating what it probably should be doing behind the scenes. 

For now I got around it by just creating a BasePage class inheriting from ContentPage and settting the background color property in the constructor, which works as well.

let's hope this can be fixed soon. I think this is an important one to fix because we don't want newcomers who may be trying out Xamarin to be put off by having to hit google so early on and have to deal with a bug in the platform for something as simple as setting a background color which could give them a wrong impression about the maturity of the platform.
Comment 8 Mike Rowley 2015-09-03 11:23:16 UTC
Thanks Matheus, I was trying to create a solution that was easy to remove when this gets fixed.

Maybe a little activity on this thread will draw attention to it and Xamarin will get in there and fix the code.  Too bad Forms isn't Open Sourced or we could have submitted a pull request and they wouldn't have to do anything.

XAMARIN, there is no info needed, its a very easy bug to reproduce and a very easy bug to fix.  Lets get it fixed, a 6 month turn around on this issue is unacceptable.

Comment 9 E.Z. Hart [MSFT] 2016-04-08 18:52:41 UTC
Thank you for taking the time to submit this report. After reviewing the description of this bug, we believe it no longer affects the current version of Xamarin.Forms. If you are still experiencing the issue after updating your packages, please reopen this report with an attached reproduction.
For your convenience, we have created some reproduction best practices viewable here: https://gist.github.com/jassmith/92405c300e54a01dcc6d

Warm regards,
Xamarin Forms Team
Comment 10 Anonymous 2016-10-13 12:33:52 UTC
Created attachment 18020 [details]
Test solution. Only App.xaml is edited.

Please re-open, this is still not fixed. See the attached solution (only App.xaml has been edited).

Expected: RED page and a label with white text on blue background

Actual: WHITE page and a label with white text on blue background.

The solution is using Xamarin.Forms
Comment 11 E.Z. Hart [MSFT] 2016-10-14 19:23:32 UTC
(In reply to Christer van der Meeren from comment #10)
> Created attachment 18020 [details]
> Test solution. Only App.xaml is edited.
> Please re-open, this is still not fixed. See the attached solution (only
> App.xaml has been edited).
> Expected: RED page and a label with white text on blue background
> Actual: WHITE page and a label with white text on blue background.
> The solution is using Xamarin.Forms


In your repro project, the background color for ContentPage isn't being applied because the actual class class displayed is actually a derivative of ContentPage (MainPage derives from ContentPage). Normally, styles only apply to the specific class they're applied to.

Xamarin.Forms has a property for handling this situation, ApplyToDerivedTypes: https://developer.xamarin.com/api/property/Xamarin.Forms.Style.ApplyToDerivedTypes/

If you update your ContentPage style to the following, you'll see the results you're expecting:

<Style TargetType="ContentPage" ApplyToDerivedTypes="true">
    <Setter Property="BackgroundColor" Value="Red" />