Status bar style changes on navigation

How-to Discussions
1

I’ve got a simple two-page navigation app. On page 1, I’d like the status bar style to be Light. Page 2, I’d like it to be Dark, but then to return to Light when I go back to Page 1.

Page 1:

<Page ux:Class="Page1">
  <Router ux:Dependency="router" />

  <JavaScript>
    function clickHandler() {
      router.push('page2');
    }

    module.exports = {
      clickHandler: clickHandler
    };
  </JavaScript>

  <DockPanel>
    <StackPanel Dock="Top" Background="#ff674c">
      <StatusBarBackground Dock="Top"/>
      <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Light" />
      <Panel>
        <Text Value="Page 1" TextAlignment="Center" TextColor="#fff" FontSize="24" Margin="0,10,0,5" />
      </Panel>
    </StackPanel>
    <Panel>
      <Button Text="Next" Height="50" Clicked="{clickHandler}" />
    </Panel>

  </DockPanel>

  <Activated>
    <Callback Handler="{loadHandler}" />
    <Set Target="statusBarConfig.Style" Value="Light" />
  </Activated>

</Page>

Page 2:

<Page ux:Class="Page2">
  <Router ux:Dependency="router" />
  <JavaScript>
    module.exports = {
      goBack: function() {
        router.goBack();
      }
    }
  </JavaScript>
  <DockPanel>
    <StatusBarBackground Dock="Top" />
    <Fuse.iOS.StatusBarConfig Style="Dark" />

    <Panel>
      <Button Text="Back" Height="50" Clicked="{goBack}" />
    </Panel>
  </DockPanel>
</Page>

I’ve tried to <Set Target="statusBarConfig.Style" Value="Light" /> on the Activated trigger on Page 1, but it doesn’t change the style. What am I missing?

Archive of project:

Thanks!

2

Hi! I think the issue is due to having multiple instances of Fuse.iOS.StatusBarConfig which may (potentially) be competing for control. I’m not sure but I suspect those are more like a single point of configuration rather than a regular component which becomes active based on the status of its parent.
I’ll check up on this and make sure the docs are updated if necessary.

To achieve what you want you can simply:

  • Remove the statusbarconfig you have in page2
  • change the default style of the one in page1 to Dark
  • Remove the Set from the activated trigger and instead do a Change to Light inside a WhileActive trigger. This will ensure that the style is light whenever page1 is active and then falls back to dark when you leave that page.

You’ll end up with something like this:

  <DockPanel>
    <StackPanel Dock="Top" Background="#ff674c">
      <StatusBarBackground Dock="Top"/>
      <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark" Animation="Slide" />
      <Panel>
        <Text Value="Page 1" TextAlignment="Center" TextColor="#fff" FontSize="24" Margin="0,10,0,5" />
      </Panel>
    </StackPanel>
    <Panel>
      <Button Text="Next" Height="50" Clicked="{clickHandler}" />
    </Panel>

  </DockPanel>

  <WhileActive>
    <Change Target="statusBarConfig.Style" Value="Light" />
  </WhileActive>

  <Activated>
    <Callback Handler="{loadHandler}" />
  </Activated>

Now, if you wanted to control different styles from different pages you could instead have each page do its own modifications to the single StatusBarConfig when they’re active. This should be possible by passing a reference to to your global statusbarconfig as a dependency to each page template (the same method that you use for the router).

Hope this helps!

3

This is great! Thanks, Remy. I followed your advice to pass a reference to the StatusBarConfig like I do for the Router and have each page modify its styling accordingly.

For those that experience this issue, the modified code is attached:

I have one follow-up question, if I may.

My desire is to have page 1 that has a status bar, and page 2 that does not. I set up page 1 to also have a StatusBarBackground. I noticed that when I navigate to page 2 (where the StatusBarConfig.IsVisible field is set to False on the WhileActive trigger), the StatusBarBackground on page 1 disappears rather abruptly as soon as the transition begins. See the attached gif:

file

Is there a different trigger I should be using to prevent that abrupt StatusBarBackground disappearance?

Thanks!

4

Hmm, I don’t think we have any mechanism for gradually removing the statusbarbackground in sync with the animation of the disappearing statusbar.

A possible workaround could be to replace the statusbarbackground with an explicitly sized panel (or just make the page header taller, while keeping the text aligned to the bottom of it). You can then move this upwards and out of the screen as part of the page transition animation (and in reverse when returning to the page, of course). You’ll basically manage this with the <Move> animator and hand-tuned Delay/DelayBack and Duration properties.

The caveat here could be if different OS versions and devices have differently sized statusbars, but if it’s just due to display density then it should work as long as you size your panel using points (which is the default). :slight_smile:

What would make this easier would be:

  • If StatusBarBackground didn’t become zero-sized as soon as you switched visibility of the statusbar
  • If we could query the duration of the built-in iOS animations (Slide and Fade).

I’ll make a ticket on this for the real experts. :slight_smile:

5

Thanks for the feedback, Remy!

Using an explicitly-sized panel instead of a StatusBarBackground is, indeed, an option to get around this, but you’re right to point out different status bar sizes across operating systems. From recollection, I believe the iOS status bar height is 20 points, whereas most Android heights are 25 points, so there’s more per-platform management.

I like the suggestion to not have the StatusBarBackground automatically become zero-sized when the visibility of the status bar is changed. From a flexible API perspective, I’d like to be able to control those independently. On the other-hand, if you are able to sync the animations of the status bar slide/fade with the appearance/disappearance of the StatusBarBackground, it would be good to be able to specify that relationship.

Thanks again! Really enjoying using Fuse even though it’s only been a few days.