I’m trying to create an application with different kind of navigations, some parts will have a hierarchical and some other just direct navigation. I’m having trouble using both, but that is another question. Let’s say I have this:
And DetailPage more or less the same, you can imagine. The thing is that NavigateTo doesn’t compile because: “‘detailPage’ declared at DetailPage.ux(1) is a member of the class ‘DetailPage’ and cannot be accessed from class ‘ListPage’.”
So is there any way of having this working while keeping file separated?. The code above is just a very simple example, the actual page code is much longer and if they have to be in the same file is going to be hell to edit them…
So my problem now is how to combine two different kind of navigations. Please allow me to explain, I have the following pages:
Top Page showing an artist list My page with some stuff Favorites with some stuff
All these pages have a bottombar with links to each others. Navigation between these should be direct, no animation / hierarchy needed.
But inside top page I do have two subpages: the list and the details I talked about in my first post (most likely they will be many more). These must have hierarchical navigation including also top page, this means if I click on top page artist, it goes to some listing about that artist, and from there to detail, and if going back twice then it goes all the way back to top page.
… I tried the following, but no succeed at all (please allow me to just use classes instead of ux:include for this example):
TopPage should be included also in hierarchical navigation, but don’t know how to do it. Also this doesn’t work, I change navigation to ListPage but it is never shown…
Oskar: This does something similar to what you describe, I guess?
The one “trick” here is that the direct navigation which is conceptually the top level is here actually housed inside the first page of the hierarchical navigation instead. I.e. that first page uses direct navigation to let you select between 3 menus which serve up different options for where to go with hierarchical navigation afterwards.
<App Theme="Basic">
<!-- Used for direct nav. Hides inactive pages -->
<Page ux:Class="dirPage" ux:Name="self">
<WhileActive Invert="true">
<Change self.Visibility="Hidden"/>
</WhileActive>
</Page>
<!-- Animations for hierarchical nav -->
<DockPanel ux:Class="subpage">
<EnteringAnimation>
<Move X="1" RelativeTo="Size"/>
</EnteringAnimation>
<ExitingAnimation>
<Move X="-1" RelativeTo="Size"/>
</ExitingAnimation>
</DockPanel>
<!-- Adds a back-button for the lower levels of hierarchical nav. -->
<subpage ux:Class="subsubpage">
<Button Text="Back" Dock="Top" Alignment="TopLeft">
<Clicked>
<GoBack/>
</Clicked>
</Button>
</subpage>
<ClientPanel>
<Panel>
<HierarchicalNavigation ux:Name="Hnav" Duration="0.3"/>
<!-- First page for Hierarchical nav. This *contains* everything related to the direct navigation -->
<subpage ux:Name="toplevel">
<DockPanel>
<Panel>
<DirectNavigation ux:Name="Dnav" Active="topPage"/>
<dirPage ux:Name="topPage">
<StackPanel>
<Text>Top page</Text>
<Button Text="To 2nd level">
<Clicked>
<NavigateTo Target="p1_2" NavigationContext="Hnav"/>
</Clicked>
</Button>
</StackPanel>
</dirPage>
<dirPage ux:Name="myPage" >
<Text>My page</Text>
</dirPage>
<dirPage ux:Name="favPage">
<StackPanel>
<Text>Favourites</Text>
<Button Text="To 2nd level">
<Clicked>
<NavigateTo Target="p3_2" NavigationContext="Hnav"/>
</Clicked>
</Button>
</StackPanel>
</dirPage>
</Panel>
<Grid Dock="Bottom" ColumnCount="3">
<Button Text="1">
<Clicked>
<NavigateTo Target="topPage" NavigationContext="Dnav"/>
</Clicked>
</Button>
<Button Text="2">
<Clicked>
<NavigateTo Target="myPage" NavigationContext="Dnav"/>
</Clicked>
</Button>
<Button Text="3">
<Clicked>
<NavigateTo Target="favPage" NavigationContext="Dnav"/>
</Clicked>
</Button>
</Grid>
</DockPanel>
</subpage>
<!-- the pages further down in the navigation hierarchy -->
<subsubpage ux:Name="p1_2" ux:AutoBind="false">
<StackPanel>
<Text>2nd level of Top Page</Text>
<Button Text="To 3rd level">
<Clicked>
<NavigateTo Target="p1_3" NavigationContext="Hnav"/>
</Clicked>
</Button>
</StackPanel>
</subsubpage>
<subsubpage ux:Name="p1_3" ux:AutoBind="false">
<Text>3rd level of Top Page</Text>
</subsubpage>
<subsubpage ux:Name="p3_2" ux:AutoBind="false">
<Text>2nd level of Favourites</Text>
</subsubpage>
</Panel>
</ClientPanel>
</App>
I checked the code and it works great! thank you very much for it! I’m trying now to refactor the whole xml tree I have so I can do the navigation propertly, but I do have another question (sorry for so many, if you come to Tokyo one day, you have a sushi dinner paid, I promise!)
Using the above structure, I have now the two navigations:
But still didn’t work. I’m doing this because I have everything split into a lot of files and the buttons are depth in the hierarchy so I was relying in JS Observable for navigation control instead of refactoring the whole markup.
Unfortunately there is a bug with databinding the Active property of HierarchicalNavigation and I’m not sure when this will be fixed.
For the time being you’ll either have to use NavigateTo with “absolute” Targets (as in the code I pasted) or try to achieve a similar experience using some of the other navigation modes. (Switching between multiple linear navigations might achieve the same but is obviously clumsier and a bit more bloated).
In general I believe the purpose of <Match> is to manage different layout sub-trees and not to trigger actions (such as NavigateTo).
However, since data binding the Active property for a HierarchicalNavigation doesn’t work it becomes hard to implement this in a clean way (= using JS logic for the navigation). So, we can do this little hack
Set up this way the WhileTrue will autotrigger the NavigateTo-action as soon as that sub-tree becomes active. The surrounding Panel is just there because WhileTrue needs a node to attach to. It might not be terribly elegant but it does the job.
