MultiLayoutPanel not working

How-to Discussions
1

So after a user logs into my app I change the Visibiity of the login page to Collapsed and then the Tabs and Panels for my MultiLayoutPanel to Visible. They all show up correct appart from the colours / styling. Also when I try to move through the Panels it stays fixed on the first Panel even though the a Tab selection at the top Dock is changing. Here’s the layout code:

<App Theme="Basic" ClearColor="#200c50">
    <iOS.StatusBarConfig Style="Light" />

    <DockPanel>
        <Style>
            <Text TextColor="#ffffff" />
            <TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
        </Style>

        <!-- Button colors -->
        <float4 ux:Key="C600" ux:Value="#8869e5" />
        <float4 ux:Key="C700" ux:Value="#6447b3" />
        <float4 ux:Key="CFillFore" ux:Value="#644793" />

        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <JavaScript File="Main.js"/>

        <!-- All pages here! -->
        <HierarchicalNavigation ux:Name="nav" Active="launchpage" ReuseExistingNode="false" />

        <Style>
            <Page>
                <EnteringAnimation>
                    <Move X="1" RelativeTo="ParentSize" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="-1" RelativeTo="ParentSize" />
                </ExitingAnimation>
            </Page>
        </Style>

        <!-- Launching login page -->
        <Page Visibility="{launchpageVisibility.value}" ux:Name="launchpage">

            <Video Layer="Background" Volume="0.0" File="Assets/video.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" ContentAlignment="CenterRight" Opacity="0.3" Padding="0">
                <Blur Radius="3.31" />
            </Video>



            <Grid Rows="1*,1*">
                <StackPanel Alignment="VerticalCenter">
                    <Image File="Assets/logo.jpg" StretchMode="PointPrecise" />
                    <Text Alignment="HorizontalCenter" FontSize="50">SSMXC</Text>
                    <Text Alignment="HorizontalCenter" FontSize="46">Booking In</Text>
                    <Text Alignment="HorizontalCenter" Opacity=".5">book into the next event fast and easy</Text>
                </StackPanel>
                <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
                    <TextInput PlaceholderText="email" Value="{email}" />
                    <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
                    <Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{login}">
                        <WhileTrue Value="{loggedin}">
                            <NavigateTo Target="navigation" />
                        </WhileTrue>
                    </Button>
                </StackPanel>
            </Grid>
        </Page>

        <StackPanel Visibility="{appbarVisibility}" Dock="Top" Background="#bdc3c7">
            <Style>
                <Button ux:InheritStyle="false" ClipToBounds="False" Margin="0,0,0,4" Background="#bdc3c7" Name="self">
                <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" Value="{Property self.Text}" TextAlignment="Center"/>
                </Button>
            </Style>
            <StatusBarBackground />
            <iOS.StatusBarConfig Style="Light"/>
            <MultiLayoutPanel Height="50" ux:Name="tabBar">
                <GridLayout ColumnCount="3" Rows="1*"/>
                <Panel ux:Name="page1Tab">
                    <Placeholder>
                        <Rectangle ux:Name="indicator" Alignment="Bottom" Height="4" Fill="#6c7a89">
                            <LayoutAnimation>
                                <Move RelativeTo="LayoutChange" X="1" Duration="0.4" Easing="BackIn"/>
                            </LayoutAnimation>
                        </Rectangle>
                    </Placeholder>
                    <Button Text="Page 1">
                        <Clicked>
                            <Set navigation.Active="page1" />
                        </Clicked>
                    </Button>
                </Panel>
                <Panel ux:Name="page2Tab">
                    <Placeholder  Target="indicator"/>
                    <Button Text="Page 2">
                        <Clicked>
                            <Set navigation.Active="page2" />
                        </Clicked>
                    </Button>
                </Panel>
                <Panel ux:Name="page3Tab">
                    <Placeholder Target="indicator"/>
                    <Button Text="Page 3">
                        <Clicked>
                            <Set navigation.Active="page3" />
                        </Clicked>
                    </Button>
                </Panel>
            </MultiLayoutPanel>
        </StackPanel>

        <PageControl Visibility="{tabpagesVisibility}" ux:Name="navigation">
            <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>
            <Page ux:Name="page1" Background="#eee">
                <WhileActive Threshold="0.5">
                    <Set tabBar.LayoutElement="page1Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 1</WelcomeText>
            </Page>
            <Page ux:Name="page2" Background="#abb7b7">
                <WhileActive Threshold="0.5">
                    <Set tabBar.LayoutElement="page2Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 2</WelcomeText>
            </Page>
            <Page ux:Name="page3" Background="#f2f1ef">
                <WhileActive Threshold="0.5">
                    <Set tabBar.LayoutElement="page3Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 3</WelcomeText>
            </Page>
        </PageControl>
    </DockPanel>
</App>
2

Hi, thanks for reporting.

Due to christmas holidays we’re a little short on bandwidth to investigate right now. It’s on record though. If you find any more intel on this in the meantime please post updates :slight_smile:

3

Don’t directly style Page but use a custom subtype instead:

<Page ux:Class="MyPage"><EnteringAnimation>...

This will prevent conflicting styles/behaviours on the various pages (since Pagecontrol introduces it’s own Page style).

You Set calls in the WhileActive trigger should be Change calls. Set is a permanent change and when used ina While... trigger can lead to unexpected results (it is deterministic and predictable, just rarely what you want). Change will ensure the actual active panel’s change is having effect.

We also have a limitation with MultiLayoutPanel that it doesn’t know it’s “initial” state. Give the first placeholder a name and set the LayoutElemenet in the MulitLayoutPanel.