How to transition to another page?

How-to Discussions
1

First, what is the best way to make completely unrelated seperate pages? Split them up between seperate .ux files or have them all in one file split by pagecontent

Second, and more importantly, how do i transition from one to another? Like it if I have a side bar menu and have several pages to choose from, how to does the page change when clicked on a sidebar optino to another page?

Thank you

2

I’d urge you to read the navigation chapter of the handbook. Which type of navigation to use really depends on the behavior you want from it, although it seems like what you want is DirectNavigation.

To navigate to another page, you can use the NavigateTo action.

As for splitting up in separate files, you can do that using ux:Include.

Below is an example of DirectNavigation, NavigateTo, and ux:Include:

Edit: I wrote LinearNavigation instead of DirectNavigation in the example. Fixed now.

MainView.ux
<App Theme="Basic">
    <Panel ux:Class="NavPage">
        <EnteringAnimation>
            <Move X="-1" RelativeTo="ParentSize"/>
        </EnteringAnimation>
        <ExitingAnimation>
            <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
        </ExitingAnimation>
    </Panel>

    <Panel>
        <DirectNavigation Active="page1" />

        <ux:Include File="Page1.ux" />
        <ux:Include File="Page2.ux" />
    </Panel>
</App>
Page1.ux
<NavPage ux:Name="page1">
    <Button Text="Go to page 2">
        <Clicked>
            <NavigateTo Target="page2" />
        </Clicked>
    </Button>
</NavPage>
Page2.ux
<NavPage ux:Name="page2">
    <Button Text="Back to page 1">
        <Clicked>
            <NavigateTo Target="page1" />
        </Clicked>
    </Button>
</NavPage>
3

Thank you so much … it is very helpful