Notification bar appears all white in light mode

0
votes

I'm using Template 10 and in Windows 10 Mobile when I choose the light mode, the notifications bar appears all white

http://imgur.com/F6T7TKy.png

and can not see the notifications, the hours, etc.

In the dark mode everything seems fine image:

http://imgur.com/j7nXoee.png

How do I solve this?

2
c#uwpuwp-xamlwindows-10-mobiletemplate10
right because you didn't sent the background color of the status bar. it's not handled automagically. The framework doesn't take that into account don't think it ever will. Left up to developer since it could be a contrasting color or close in hue to the default - mvermef

2 Answers

1
votes

I do this in my hamburger's override for UIElement CreateRootElement() after my database setup/migrations are done.

 if(Template10.Utils.DeviceUtils.Current().IsPhone()){
   var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
   if(statusBar != null)
   {  
       if(Application.Current.RequestedTheme == ApplicationTheme.Light)
          //background && foreground or combination, and dependent on color choices
          statusBar.ForegroundColor = Windows.UI.Colors.Black;
      else if(Application.Current.RequestedTheme == ApplicationTheme.Dark
          statusBar.ForegroundColor = Windows.UI.Colors.White;
  }
}

Template10 already has a lot of the logic built in just have to know where it is. As @Jay Zuo said you have to also include the Mobile reference as well..

1
votes

As @mvermef said, to solve this problem, we can set the color used in status bar according to application's theme. We can get application's theme by using Application.RequestedTheme property and set status bar's color by using properties in Status​Bar Class. For a simple example:

public MainPage()
{
    InitializeComponent();
    NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

    if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
    {
        var statusBar = StatusBar.GetForCurrentView();
        if (statusBar != null)
        {
            if (Application.Current.RequestedTheme == ApplicationTheme.Light)
            {
                statusBar.ForegroundColor = Windows.UI.Colors.Black;
            }
            else if (Application.Current.RequestedTheme == ApplicationTheme.Dark)
            {
                statusBar.ForegroundColor = Windows.UI.Colors.White;
            }
        }
    }
}

Please note to use Status​Bar Class, we need reference Windows Mobile Extensions for the UWP in the project.