Page push -> flickering / blinking on dark background

peyterpeyter Member ✭✭
edited April 2018 in Xamarin.Forms

Whenever one changes the page while using a dark background or the dark theme the screen flickers white once.
I tried it in a personal application from a Navigation page with await PushAsync aswell as on the MasterDetail Template with just the dark theme applied.

Giving epileptic episodes on every Page change isn't a option and a light theme isn't popular on the android world. Does someone have a solution to this?

Tested on android & uwp. Android with background and theme, uwp with a dark background.
GIF of the UWP: https://gfycat.com/WeeJaggedAgama

EDIT: It shouldn't matter since the theme also doesnt work but here is the change that is done to the App.xaml to get the dark background shown in the gif

         <Color x:Key="DARK_Background">#1a1a1a</Color>

                <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
                    <Setter Property="BackgroundColor" Value="{StaticResource DARK_Background}" />
                </Style>

Best Answer

Answers

  • JohnHardmanJohnHardman GBUniversity mod
    edited April 2018

    @peyter - How are you implementing the dark theme? Are you setting the BackgroundColor of the NavigationPage when setting the MainPage, typically in App.xaml.cs, whether directly or using a setter etc?

  • peyterpeyter Member ✭✭
    edited April 2018

    @peyter - How are you implementing the dark theme? Are you setting the BackgroundColor of the NavigationPage when setting the MainPage, typically in App.xaml.cs, whether directly or using a setter etc?

    The dark theme for android got implemented as described in the msdn with the "Merged with" tag in the app.xaml Application.Resources ResourceDictionary
    <ResourceDictionary MergedWith="themes:DarkThemeResources">

    When i tried without the theme i set the TargetType ContentPage in the app.xaml to get a app wide "theme" going. Code below
    #1a1a1a

                <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
                    <Setter Property="BackgroundColor" Value="{StaticResource DARK_Background}" />
                </Style>> @JohnHardman said:
    

    The result was the same with both approaches

  • JohnHardmanJohnHardman GBUniversity mod

    @peyter - That snippet is targeting the ContentPage, not the NavigationPage.

  • peyterpeyter Member ✭✭
    edited April 2018

    @JohnHardman There doesnt seem to be a way to set the content of a NavigationPage to a color other than just setting the ContentPage BackgroundColor. Regardless of that the Dark Theme from Xamarin had the same issue (Which probably did it differently if there is a way to do so).

    Thanks for the help btw :)

  • JohnHardmanJohnHardman GBUniversity mod
    edited April 2018

    @peyter - NavigationPage inherits from Page, which inherits from VisualElement. VisualElement has a BackgroundColor property, so you can set the NavigationPage's BackgroundColor. I do it in code behind currently, but I would be surprised if it were not also possible to do in XAML.

    BTW - this won't stop the flicker, it will just replace the white by whatever color you set, which can make the flicker far less obvious.

  • peyterpeyter Member ✭✭
    edited April 2018

    @JohnHardman When setting the NavigationPage Background in the RessourceDictionary the Property seems to just get ignored.
    Code & Result below, still in the except for that unchanged MasterDetail Template.

    EDIT: When both are set to a dark background the flicker is still white. If the flicker would change to the same color it would be a near none issue, I didn't notice it back when i was running white theme's while programming.

    https://gfycat.com/SpotlessScientificDrongo

  • peyterpeyter Member ✭✭
    edited April 2018

    As with all things XF, there's no guarantee though...

    @JohnHardman Ha, true!

    So I was just about to update, I also did some testing after you mentioned that you are setting it in c# code instead of xaml. I tried that and... it actually works as it is intended too.


    If you want to embrace the white flash as i did. Make a new Xamarin forms project (maser detail) with Ios, Android, UWP enabled and shared selected. Add following line to the App.xaml Resourcedictionary, at the end

            <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
                       <Setter Property="BackgroundColor" Value="{StaticResource DARK_Background}" />
                  </Style>
    

    If that doesnt work and u still want to embrace it i'll upload the project(s). Seems to appear whenever the ContentPage is set to a dark background and the Navigationpage Pushes another Page

  • peyterpeyter Member ✭✭
    edited April 2018

    @JohnHardman Video showing the steps from creation of a project up up to the issue I had and with the following fix thanks to you. One annoying part is left, the Background is not globally applied like that :(

    Youtube because mp4 isnt allowed here. Non-listed, resolution is still getting worked on by youtube.

  • NickKovalskyNickKovalsky USMember ✭✭✭

    Just fix this with a renderer:

    using System;
    using System.Linq;
    using Android.Content;
    using Android.Graphics;
    using AppoMobi.Xam.Android.Renderers;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;
    using Xamarin.Forms.Platform.Android.AppCompat;
    
    [assembly: ExportRenderer(typeof(NavigationPage), typeof(XamNaviPageRenderer))]
    namespace AppoMobi.Xam.Android.Renderers
    {
        //*************************************************************
        public class XamNaviPageRenderer : NavigationPageRenderer
        //*************************************************************
        {
    
            //-----------------------------------------------------------------------------------------------------------
            public XamNaviPageRenderer(Context context) : base(context)
            //-----------------------------------------------------------------------------------------------------------
            {
            }
    
            //-----------------------------------------------------------------
            private NavigationPage FormsControl { get; set; }
            //-----------------------------------------------------------------
    
            //-----------------------------------------------------------------------------------------------------------
            protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
            //-----------------------------------------------------------------------------------------------------------
            {
                base.OnElementChanged(e);
    
                if (e.OldElement != null || Element == null)
                {
                    return;
                }
    
                try
                {
                    //do your stuff here
                    //set manually : SetBackgroundColor(Xamarin.Forms.Color.FromHex("#000000").ToAndroid());
                    //or use the contained page color
                    FormsControl = Element;
                    var pageInside = FormsControl.Pages.First();
                    SetBackgroundColor(pageInside.BackgroundColor.ToAndroid());
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine(@"ERROR: ", ex.Message);
                }
            }
    
    
        }
    }
    
Sign In or Register to comment.