Hide Top Nav Bar when in Splash screen

How-to Discussions
1

Is there a way to start a app with with a top bar menu on a “splash” page without the bar but animate it later in? I want to show the splash page, initialize my database and then swap to another page with the top bar visible.
Code so far:

<App>

  <JavaScript File="Menu.js" />
  <Router ux:Name="router" />

  <iOS.StatusBarConfig Style="Light" />
  <EdgeNavigator>

   <Panel ux:Name="sidebar" ...... >
    ...
    </Panel>

 <ClientPanel>
      <iOS.StatusBarConfig Style="Dark"/>

        <!--TODO  <Android.StatusBarConfig TextColor="#000" /> -->

      <Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
      
      <StackPanel ux:Name="TopBar" Dock="Top" Color="#fff">

        <Panel Height="56">

          <MenuButton Alignment="Left">
            <Clicked>
              <NavigateToggle Target="sidebar" />
            </Clicked>
          </MenuButton>

          <Panel>
                <!-- image --> 
          </Panel>

        </Panel>

      </StackPanel>

      <Navigator DefaultPath="startPage">

        <StartPage ux:Template="startPage" router="router" />
        <ANOTHERPAGEHERE ux:Template="ANOTHERPAGEHERE" router="router" />
     </Navigator>
</ClientPanel>
</EdgeNavigator>
</App>
2

Rather than having multiple instances of StatusBarConfig you should have just one and instead use animators to change the value of .IsVisible depending on which page you are on.

You’ll find a discussion about similar things ( + a lot more) here :slight_smile:

3

ah… i just realize i copied the code wrong… But anyway i dont really care about the statusbar but i wanted to hide my MenuBar at the top ( ux:Name=“TopBar” < this part in code).

corrected code:

<App>

  <JavaScript File="Menu.js" />
  <Router ux:Name="router" />

  <EdgeNavigator>

   <Panel ux:Name="sidebar" ...... >
    ...
    </Panel>

 <ClientPanel>
      <iOS.StatusBarConfig Style="Dark"/>

      <Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />

      <StackPanel ux:Name="TopBar" Dock="Top" Color="#fff">

        <Panel Height="56">

          <MenuButton Alignment="Left">
            <Clicked>
              <NavigateToggle Target="sidebar" />
            </Clicked>
          </MenuButton>

          <Panel>
                <!-- image --> 
          </Panel>

        </Panel>

      </StackPanel>

      <Navigator DefaultPath="startPage">

        <StartPage ux:Template="startPage" router="router" />
        <ANOTHERPAGEHERE ux:Template="ANOTHERPAGEHERE" router="router" />
     </Navigator>
</ClientPanel>
</EdgeNavigator>
</App>
4

You have a couple of different options here:

The cleanest is to just have your splash page outside of the Navigator, covering both the top bar and the other pages. When your initialization has finished you simply fade out / remove the splash page.

The other option, which feels a bit more hackish, is to keep the structure you have now pass a reference to the top bar into the StartPage as a dependency. You can then change the visibility of the top bar there.

E.g.
In MainView.ux : <StartPage ux:Template="startPage" router="router" topbar="TopBar" />

and then in StartPage.ux :

	<StackPanel ux:Dependency="topbar"/>
	<WhileActive>
		<Change topbar.Visibility="Collapsed"/>
	</WhileActive>