# MultiLayoutPanel not working

**URL:** <https://forums.fusetools.com/t/multilayoutpanel-not-working/3175>\
**Category:** How-to Discussions\
**Created:** [December 23, 2015, 5:09pm UTC](https://forums.fusetools.com/t/multilayoutpanel-not-working/3175 "2015-12-23T17:09:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [December 23, 2015, 5:09pm UTC](https://forums.fusetools.com/t/multilayoutpanel-not-working/3175/1 "2015-12-23T17:09:05Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 25, 2015, 11:31am UTC](https://forums.fusetools.com/t/multilayoutpanel-not-working/3175/2 "2015-12-25T11:31:26Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [December 25, 2015, 6:49pm UTC](https://forums.fusetools.com/t/multilayoutpanel-not-working/3175/3 "2015-12-25T18:49:32Z")

</div>

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`.