Issue when select tab on Tabs-layoutmaster example

How-to Discussions
1

Hello,

Disable transition when select tab by code *Transition=“None”*\

But I got this issue:

Steps to Reproduce:

Page 1 (active) - Page 2 - Page 3

  • current active: Page 1
  • select tab Page 3

Actual Behavior:

The indicator and page move from Page 1 -> Page 2 -> Page 3

Expected Behavior:

The indicator and page move from Page 1 -> Page 3

Code:

<PageControl ux:Name="navigation">
    <Page ux:Name="page1" Background="#eee" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page1Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 1</WelcomeText>
    </Page>
    <Page ux:Name="page2" Background="#abb7b7" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page2Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 2</WelcomeText>
    </Page>
    <Page ux:Name="page3" Background="#f2f1ef" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page3Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 3</WelcomeText>
    </Page>
</PageControl>

On this example: Tabs layout master

Could you please help?

Thank you very much!

2

A PageControl has continuous navigation progress, so to get to page 3, it has to activate page 2 for a split second.

Transition only describes how the transition looks - if you set it to None, the page will activate/deactivate immediately, without animation. This does not allow you to “magically jump over” pages.

The other part of the question, how the indicator moves, is described by LayoutAnimation:

<LayoutAnimation>
	<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
</LayoutAnimation>

So, as the pages in PageControl get activated, those trigger the LayoutAnimation on indicator and it slides to wherever the new destination is.

To achieve your expected behaviour then, you need to use a Navigator which does not have continuous progress. In addition to that, you need to make your own custom transitions so you can go from any page to any other page. And you need to create a new LayoutAnimation for the indicator, possibly by using an Attractor.

For custom transitions in a Navigator, take a look at this example.

3

@Uldis,

Supper thanks,

I still keep LayoutAnimation to move indicator.

<Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
    <LayoutAnimation>
        <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
    </LayoutAnimation>
</Rectangle>

And here is code:

JavaScript:

<JavaScript>
    function goHome() {
        router.push('home');
    }

    function goExplore() {
        router.push('explore');
    }

    function goExamples() {
        router.push('fuseExamples');
    }

    module.exports = {
        goHome: goHome,
        goExplore: goExplore,
        goExamples: goExamples
    }
</JavaScript>

UX:

As your suggest, I use Navigator:

<Router ux:Name="router" />

<DockPanel>
    <StatusBarBackground Margin="0,0,0,15"/>
    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>
    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Navigator DefaultPath="splash" ClipToBounds="true">
        
        <SplashPage ux:Template="splash" router="router" Background="#fff"  />

        <LoginPage ux:Template="login" router="router" Background="#fff"/>

        <HomePage ux:Template="home" router="router" Background="#fff"/>

        <ExplorePage ux:Template="explore" router="router" Background="#fff"/>

        <FuseExamplesPage ux:Template="fuseExamples" router="router" Background="#fff"/>

    </Navigator>
    <Grid Dock="Bottom" ColumnCount="3" Height="50" Background="#bdc3c7">
         <Panel ux:Name="page1Tab">
            <Tab Text="Today">
                <Clicked Handler="{goHome}">
                    <Set indicator.LayoutMaster="page1Tab" />
                </Clicked>
            </Tab>
        </Panel>
        <Panel ux:Name="page2Tab">
            <Tab Text="Explore">
                <Clicked Handler="{goExplore}">
                    <Set indicator.LayoutMaster="page2Tab" />
                </Clicked>
            </Tab>
        </Panel>
        <Panel ux:Name="page3Tab">
            <Tab Text="Examples">
                <Clicked Handler="{goExamples}">
                    <Set indicator.LayoutMaster="page3Tab" />
                </Clicked>
            </Tab>
        </Panel> 
    </Grid>
    <BottomFrameBackground Dock="Bottom"/>
</DockPanel>

Can you review and give me your feedback?

Thank you in advance!

4

Well if it works like you wanted, this is solved. What kind of feedback do you want me to give?