I’m not sure if “views” is the correct term. I’ve structured my app with different .ux as different “pages”.
Lets keep it simple: LoginView.ux Success.ux MainView.ux
Mainview contains the and and when login succeeded I’d like to hide loginview and display sucess.ux
I guess that I could wrap a Page around the view and toggle visibility on the Page tag. Would that be the proper way of doing this?
Wrapping the views inside Page's is a good way to do this, but instead of hiding/showing the Page's using Visibility, you should hide/show them using the Navigation mechanism.
This can be done with Page's Active property, something like this:
In JS:
var currentPage = Observable("login");
function goToSuccessPage() {
currentPage = "success";
}
module.exports = {
currentPage: currentPage
};
In UX:
<PageControl Active="{currentPage}">
<Page ux:Name="login">
<LoginView />
</Page>
<Page ux:Name="success">
<Success />
</Page>
</PageControl>
Then, just make sure goToSuccessPage is called on successful login 
Thanks! I’m able to drag myself back to the previous page (which would be the login screen) I tried to disable that by using the CanGoBack and CanGoForward on the PageControl, however I get the error that they are not properties of PageControl, Are there any changes to this compared to the documentation?(https://www.fusetools.com/learn/fuse#keyword-pagecontrol)
The documentation is perhaps incomplete in that area. It’d be unusual to bind directly to those properties, it would be better to use the matching triggers:
<WhileCanGoBack>
//enable back button>
</WhileCanGoBack>
<WhileCanGoForward>
//enable forward button
</WhileCanGoForward>
Note that most while triggers can also have Invert="true" to reverse the condition, thus allowing you to also specifc a can’t go back trigger <WhileCanGoBack Invert="true">.
I’m not sure I following. I wish to disable the user to swipe back to page1 from page2. currently if i try to swipe, I get to see Page1 before it “pops” back to page2, As Activepage is set to page2. I’ve tried different combinations with WhileCanGoBack and with invert true/false without seeing any difference. I’ve also tried to use the DirectNavigation as it seems to be closer to what I’d like, but not sure how to implement that correctly either.
Hi I’m using Jake’s solution for wrapping views but I need something like Instagram views, vertical and Horizontal, how can I make a page appear up or down from another instead of it’s right or left?
Hi Carla, I don’t quite understand what you mean. Could you explain a bit more about what you want to achieve?
I have use this:
and I can swipe right from Page “center” to “right”, but I also want to have another tags Page “Top” and “Bottom” to swipe up from “center” to “Top” or swipe down from “center” to “Bottom”. How could I do that?
You can do this by adding another navigator, in combination with the PageControl you already have. Since we want to customize it more we set up a LinearNavigation from scratch, instead of using another PageControl:
<App Theme="Basic">
<ClientPanel>
<Panel>
<Panel ux:Class="udPage">
<EnteringAnimation>
<Move Y="-1" RelativeTo="Size"/>
</EnteringAnimation>
<ExitingAnimation>
<Move Y="1" RelativeTo="Size"/>
</ExitingAnimation>
</Panel>
<LinearNavigation Easing="QuadraticOut"/>
<SwipeNavigate SwipeDirection="Up"/>
<udPage Color="#f0f">
<Text Value="Top"/>
</udPage>
<udPage>
<PageControl>
<Page Color="#f00">
<Text Value="Left"/>
</Page>
<Page Color="#0f0">
<Text Value="Center"/>
</Page>
<Page Color="#00f">
<Text Value="Right"/>
</Page>
</PageControl>
</udPage>
<udPage Color="#0ff">
<Text Value="Bottom"/>
</udPage>
</Panel>
</ClientPanel>
</App>
This lets you swipe up-down from either of the “Left”, “Center” and “Right” pages.
If you instead want to only allow up-down navigation from the “Center” page then you can place the new navigator inside of the PageControl (on the center page), instead of outside:
<App Theme="Basic">
<ClientPanel>
<PageControl>
<Page Color="#f00">
<Text Value="Left"/>
</Page>
<Page>
<Panel>
<Panel ux:Class="udPage">
<EnteringAnimation>
<Move Y="-1" RelativeTo="Size"/>
</EnteringAnimation>
<ExitingAnimation>
<Move Y="1" RelativeTo="Size"/>
</ExitingAnimation>
</Panel>
<LinearNavigation Active="centerP" Easing="QuadraticOut"/>
<SwipeNavigate SwipeDirection="Up"/>
<udPage Color="#f0f">
<Text Value="Top"/>
</udPage>
<udPage ux:Name="centerP" Color="#0f0">
<Text Value="Center"/>
</udPage>
<udPage Color="#0ff">
<Text Value="Bottom"/>
</udPage>
</Panel>
</Page>
<Page Color="#00f">
<Text Value="Right"/>
</Page>
</PageControl>
</ClientPanel>
</App>
Oh wow you’re awesome.
Thank you so much for the help, the second alternative was exactly what I needed, it works great.
Thanks
Been looking through the forums to see if any question is simliar to mine, and that one is the closest.
So the issue here is that PageControl only shows and hides the pages, but they are still in the tree structure or the DOM if we were talking HTML. What I want to do is to completely get rid of the Pages using the Navigation mechanism. I tried DirectNavigation but no luck so far.
For example, I’m working on a simple side bar navigation menu like that one in the examples, the pages and navigation links are working perfectly, but if I have a video in the of the views, it will still be playing even if I’m not in its view, due to the fact that this view is still there (Still in the DOM).
I hope I’m making any sense, it’s 8 AM in the morning and I didn’t get any sleep, sorry about that 
There’s no way of explicitly killing pages. Instead the resource management in the UI framework should ensure that you don’t end up with tons of unused data.
In the case of video it’s all up to you to decide what should happen when you navigate away from a page. Consider this:
<PageControl>
<Page>
<WhileInactive>
<Pause Target="vid"/>
</WhileInactive>
<WhileActive>
<Resume Target="vid"/>
</WhileActive>
<Video ux:Name="vid" File="concertportrait.mp4" AutoPlay="true" IsLooping="true"/>
</Page>
<Page Color="Red"/>
</PageControl>
Here we simply pause and resume the video when the page it is contained in is moved out / back in. You can of course also use triggers to change the video source or stop playback completely.
On a side note: It’s often better to start a new thread when you can’t find a good match for your question, rather than latching onto old threads.