How to implement app structure using Navigator

How-to Discussions
1

Hello Community,
I`m trying to define the app structure using Navigator to have the ability to navigate back with clicks on the header and with the Back button on android. The following code is wrong because the header is visible on the Start Screen. What is the basic approach to create such a navigation?

Thank you very much!

<DockPanel>
	<Navigator DefaultPath="start" >
		<StartScreen ux:Template="start" router="router"/>
		<Page1 ux:Template="page1" router="router"/>
		<Page2 ux:Template="page2" router="router"/>
	</Navigator>

    <Grid Dock="Top">
       <Header/>
    </Grid>
</DockPanel>

file
jDZufw5FqMSt-image-1499595153387.png900×450

2

Hi,

the code is not necessarily wrong. There are several approaches you can take, however.

For one, you could define a “Header” ux:Class, and include it in every page you need it on. The possibility to add properties to classes lets you create a fully dynamic header.

Another approach could be to wrap the header in a <WhileTrue Value="{headerVisible}"> where the headerVisible is a global boolean Observable that you change in JavaScript depending on the page you are in.

Sometimes though it might make sense to create a separate header for every page, if the headers are too different. And finally, you could obviously also choose a combination of the 3 approaches.

Which way you choose depends on your exact use-case though, so it’s something you need to decide on. Hope this helps!

3

Thank you very much, Uldis,
WhileTrue is the solution that works.