What I want to achieve is to implement two difference actions in each page ,
Those actions can disable/enable the element ux:Name=“backbuttom”,
and those two actions also visually display a relative Panel to cover the whole navBar,
Example like Subpage1 has an extra search icon at the right corner and click that icon will disable the action the ux:Name=“backbuttom” elements,
Then, it will show a search input field that cover the textfield “PAGE1” or “PAGE2”
you should use AlternateRoot to only inject visuals in necessary places. What you have described as your target goal requires the use of UX properties, WhileActive, WhileTrue and Change triggers and maybe even something else.
Using your snippets, I have put together a little example that shows what you can and what you should do. Hope this helps!
Is that wrong if I do the following. I replace <Visual ux:Dependency="navBar" /> to <Navbar ux:Dependency="navBar" /> in Subpage2 , and add <Change navBar.backBtnEnabled="true" /> inside<WhileActive>Tab?
Just like the following. It was because I found it work but I dont know why.
No, that is perfectly fine. I just wanted to show you that you can have multiple WhileActive triggers and that they all get executed. You can, of course, do it with the dependency and just one, like this:
What if I extend the structure like the following.
The Page 1 has two level and Page 2 has one level.
I used the “Home Page” to negative between Page 1 and Page 2, it works fine.
However, I can not further negative form “Page 1 level 1” to “Page 1 level 2” by using router push.
Also, when I clicked the back button from “Page 1 level 1” and goback to ‘Home page’ , the visual in alternative root is remain there.
Yes, you can navigate on many levels. To do that, you have two options:
Pass the full path to where you want to go, like so: router.push("subPage1", {}, "subPage4", {}); (note each page accepts params, so it’s “template name, params, template name, params”).
router.push("subPage1", {}, "subPage4", {});
``` . it works what i want.
But the visual still have some problem when I click goto page 1 then click back to home.
The ``` <Text Alignment="Center">PAGE 1 Level 1</Text> ``` and back button still exist.
Router and Navigator take care about recycling and reusing page instances, as well as activating and deactivating them. When you go to subPage1/subPage3 path, both the first and second level Navigators get pages activated (you can use <DebugAction Message="Page X activated" /> inside WhileActive/WhileInactive triggers to see this).
Now, when you click Back, only the first level Navigator receives that it needs to switch page back to “home”. The second level Navigator stays intact, and so the “Page 1 Level 1” thing still shows, because that page is still active (even if not in foreground).
To solve this, you again have several ways to go:
You could have multiple navigation bars, one for each level and switch those according to which navigation level you are on.
If you need a single and properly global navigation bar, use a JavaScript module for it instead.
Since this already covers far more than the initial question and deviates from the topic, I suggest to end this thread here. If you run into further issues, please post very specific, short questions in a new thread.