Hello,
I need your light guys, i have a PageControl with some pages inside, on each page i have a list of items that user can click and display details of an item. The idea is that user can slide “main pages” like video list, audio list, et… and when click item it shows details page.
This is my code, page control and list items inside each page are working great but when i click on a item i don’t target the sub page.
I just starting fuse and play on ux navigation to get the mechanism, could you tell me what is wrong here please?
thanks a lot.
<!-- ######## START PAGE CONTROL ######## -->
<PageControl ux:Name="pages">
<!-- Start Pages 34495e -->
<Page ux:Name="home" Background="#ffffff">
<ActivatingAnimation >
<Scale Target="homeBar" Factor="1.2" />
</ActivatingAnimation>
<!-- ######## LIST OF ITEMS IN A PAGE ######## -->
<ScrollView ClipToBounds="true">
<StackPanel Alignment="Top">
<Each Items="{data.responseData}" >
<NewsItem />
<!-- ######## TARGET SUBPAGE WHEN CLICKED ######## -->
<Clicked>
<NavigateTo Target="subPage" />
</Clicked>
</Each>
</StackPanel>
</ScrollView>
</Page>
...
</PageControl>
<!-- ######## DETAILS PAGE ######## -->
<MyPage ux:Name="subPage" ux:AutoBind="false">
<StackPanel>
<Text Value="this is a test body page" />
</StackPanel>
</MyPage>
It sounds like what you need is nested navigation. This is because the navigation between the main pages is done in a different way (swiping) than navigation from a main page to the sub page (clicking).
Could something like this be what you’re looking for?
Thank your Rempi Pedersen, the idea is to swipe between sections of the app : videos, audios, news, this is more fun for user interaction, the link you provided is interesting but i cannot swipe between page sections. Or is it purely impossible?
Thank you
It is absolutely possible. 
That link was merely to show how you can nest multiple navigations in order to achieve what you’re describing. In order to do swiping you would simply need to use a PageControl instead of the panel with DirectNavigation in that example.
Here’s a different variation on the same concept:
<App Theme="Basic">
<ClientPanel>
<Page ux:Class="subpage">
<EnteringAnimation>
<Move Y="1" RelativeTo="Size" Duration="0.2"/>
</EnteringAnimation>
</Page>
<PageControl>
<Page>
<Panel ux:Name="mainPage1">
<HierarchicalNavigation/>
<subpage Color="#f00">
<StackPanel>
<Button Text="go yellow" Alignment="Center">
<Clicked>
<NavigateTo Target="yellow"/>
</Clicked>
</Button>
<Button Text="go purple" Alignment="Center">
<Clicked>
<NavigateTo Target="purple"/>
</Clicked>
</Button>
</StackPanel>
</subpage>
<subpage ux:Name="yellow" Color="#ff0" ux:AutoBind="false">
<Button Text="back" Alignment="TopLeft">
<Clicked>
<GoBack/>
</Clicked>
</Button>
</subpage>
<subpage ux:Name="purple" Color="#f0f" ux:AutoBind="false">
<Button Text="back" Alignment="TopLeft">
<Clicked>
<GoBack/>
</Clicked>
</Button>
</subpage>
</Panel>
</Page>
<Page ux:Name="mainPage2" Color="#0f0"/>
</PageControl>
</ClientPanel>
</App>
Here you have an outer PageControl which lets you swipe between the red and green “main pages”. And inside the first main page we use a HierarchicalNavigation to navigate down into the yellow and purple subpages (and back up to the red one).
Note: the use of ux:AutoBind="false" is just because we have a HierarchicalNavigation as the “inner” navigation. If you instead have a DirectNavigation or LinearNavigation (like PageControl) here, then you don’t need the autobind stuff. You can read more about it here
Hey it’s cool, thank you for help, i will test and “learn” your code after i will post here the results.
Thanks again
Hello again
So here is my test :
When i click on “go purple” button it load the purple page, and when i go back it works too. Now i click again on “go purple” button this not working, either the “go yellow” button get me to the purple page.
My fix is to remplace “go back” by “NavigateTo” and give an ux:Name to the page that contains the main content :
The main page
<App Theme="Basic">
<ClientPanel>
<Page ux:Class="subpage">
<EnteringAnimation>
<Move Y="1" RelativeTo="Size" Duration="0.2"/>
</EnteringAnimation>
</Page>
<PageControl>
<Page >
<Panel ux:Name="mainPage1">
<HierarchicalNavigation/>
<subpage ux:Name="liste" Color="#000">
<StackPanel>
<Button Text="go yellow" Alignment="Center">
<Clicked>
<NavigateTo Target="yellow"/>
</Clicked>
</Button>
<Button Text="go purple" Alignment="Center">
<Clicked>
<NavigateTo Target="purple"/>
</Clicked>
</Button>
</StackPanel>
</subpage>
<subpage ux:Name="yellow" Color="#ff0" ux:AutoBind="false">
<Button Text="back" Alignment="TopLeft">
<Clicked>
<NavigateTo Target="liste"/>
</Clicked>
</Button>
</subpage>
<subpage ux:Name="purple" Color="#f0f" ux:AutoBind="false">
<Button Text="back" Alignment="TopLeft">
<Clicked>
<NavigateTo Target="liste"/>
</Clicked>
</Button>
</subpage>
</Panel>
</Page>
<Page ux:Name="mainPage2" Color="#333"/>
</PageControl>
</ClientPanel>
</App>
There is just two things i wanna know :
- What is the “ClientPanel” means, i searched doc for it but nada
- Why go back not working? what is the difference of this by navitateTo?
Thanks again
That sounds strange. If I take the code you posted and replace <NavigateTo Target="liste"/> with <GoBack/> it works exactly as expected (the same way it did in the original code I posted), also when going back and forth multiple times.
Have you tried this with the latest version of Fuse (0.11)?
As for your questions:
-
ClientPanel is documented here. It is a helper function to easily deal with Status Bars
-
As mentioned above, GoBack should be working just fine. The difference between the two actions is that GoBack has a history and remembers which pages you’ve navigated through earlier, so you don’t have to specify specific pages. With NavigateTo you must explicitly set a navigation target.
That link was merely to show how you can nest multiple navigations in order to achieve what you’re describing. In order to do swiping you would simply need to use a