Trigger Navigation from outside

Hello my dear fuse community :slight_smile:

Im triggering a PageView like this:

<Set subpages.Active="subpage1" /> As long as it is inside the ScrollViewit works as it should. But as soon as I place it outside the ScrollViewand inside a MultiLayoutPanel where I want them to be, the Clickeddoesnt get triggered. :frowning:

Any help would be awesome!!! I tried things like <Set yzTicketBTNs.subpages.Active="subpage1" /> but those always failed due to ... is not a valid property path ...

I have created 2 examples based on the “Scrolling Animation example” for demonstration. (Sorry i dont know how limit the height of codeblocks and make them scrollable)

The ux:Nameof the grid with the buttons Im talking about is yzTicketBTNs2

  1. Clicked gets triggered correctly
<App Background="#FFF">
    <JavaScript>
    module.exports = {

        category1: [
        {cate: "cat01", datum: "26.08.2016", name: "cat01"},
        {cate: "cat02", datum: "26.08.2016", name: "cat02"},
        {cate: "cat03", datum: "26.08.2016", name: "cat03"},
        {cate: "cat04", datum: "26.08.2016", name: "cat04"},
        {cate: "cat05", datum: "26.08.2016", name: "cat05"},
        {cate: "cat06", datum: "26.08.2016", name: "cat06"},        {cate: "cat07", datum: "26.08.2016", name: "cat07"}],
        category2: [
        {cate: "cat08", datum: "26.08.2016", name: "cat08"},
        {cate: "cat09", datum: "26.08.2016", name: "cat09"},
        {cate: "cat10", datum: "26.08.2016", name: "cat10"},
        {cate: "cat11", datum: "26.08.2016", name: "cat11"},
        {cate: "cat12", datum: "26.08.2016", name: "cat12"},
        {cate: "cat13", datum: "26.08.2016", name: "cat13"},        {cate: "cat14", datum: "26.08.2016", name: "cat14"}]

    };
    </JavaScript>

    <DockPanel>

        <StatusBarBackground Dock="Top"/>

        <Font File="Assets/HelveticaNeue.ttf" ux:Global="font1" />
        <Font File="Assets/Typo.otf" ux:Global="typo"/>
        <Text ux:Class="mapRec" FontSize="16" Color="#424242" />
        <Text ux:Class="mapRecHead" FontSize="25" Color="#424242"/>
        <Text ux:Class="mapRecInfo" FontSize="13" Color="#bdbdbd"/>


        <BottomBarBackground Dock="Bottom" IncludesKeyboard="false"/>
        <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/>
        <Panel>
            <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="TopCenter" Height="40%">
                <Placeholder ux:Name="overBackgroundLayout">
                    <Circle ux:Name="facePicture"  Alignment="TopCenter"
                        Width="60%" Height="60%" Offset="0, 62%">
                        <ImageFill  File="Assets/blade.jpg" />
                    </Circle>
                </Placeholder>


                <StackPanel ux:Name="textPanel" Alignment="Center">
                    <Text ux:Class="TitleText" TextColor="#fff" TextAlignment="Center" />
                    <StatusBarBackground Margin="0,0,0,15"/>
                    <TitleText ux:Name="topText" FontSize="18" Value="Blade" Margin="5"></TitleText>
                    <TitleText ux:Name="bottomText" Margin="0,0,0,0" FontSize="14">Testuser</TitleText>
                </StackPanel>


                <Panel ux:Name="backgroundPicture" TransformOrigin="Anchor" Alignment="Top" Anchor="50%,0%" Padding="0,0,0,0" Background="Black">
                    <Image File="Assets/background.png" StretchMode="UniformToFill" Background="Black"/>
                </Panel>

                <Placeholder ux:Name="underBackgroundLayout" Target="facePicture"/>
                <Panel Height="60" Margin="0,300,0,0" Layer="Overlay">
                </Panel>
            </MultiLayoutPanel>
            <ScrollView >
                <ScrollingAnimation From="0" To="150">
                    <Scale Target="facePicture" Factor=".30" Easing="QuadraticInOut" />
                </ScrollingAnimation>
                <ScrollingAnimation From="0" To="1000">
                    <Set headerPanel.LayoutElement="overBackgroundLayout"/>
                </ScrollingAnimation>

                <ScrollingAnimation From="70" To="200">
                    <Move Target="facePicture" Y="-0.72" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />
                </ScrollingAnimation>
                <ScrollingAnimation From="205" To="360">
                    <Change Target="yzTicketBTNs2.Background" Value="#fafafaff" />
                    <Move Target="facePicture" X="-0.4" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />
                </ScrollingAnimation>
                <ScrollingAnimation From="0" To="250">
                    <Move Target="yzTicketBTNs2" Y="-1" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />

                </ScrollingAnimation>
                <ScrollingAnimation From="0" To="360">
                    <Move Target="backgroundPicture" RelativeTo="Size" Y="-0.6" Easing="QuadraticOut"/>
                    <Move Target="textPanel" RelativeTo="ParentSize" Y="-0.35" Easing="QuadraticOut"/>
                    <Move Target="bottomText" RelativeTo="ParentSize" Y="-0.3" Easing="QuadraticOut" />
                    <Change bottomText.Opacity="0" Easing="QuadraticOut"/>
                </ScrollingAnimation>
                <ScrollingAnimation From="50" To="250">
                    <Change statusBarConfig.Style="Light" />
                </ScrollingAnimation>
                <ScrollingAnimation From="0" To="-1000">
                    <Scale Target="backgroundPicture" Factor="4" />
                    <Move Target="facePicture" Y="800"/>
                </ScrollingAnimation>



                <StackPanel Padding="0,370,0,0" ux:Name="yzTicketBTNs">
                    <Grid Columns="1,1"  Background="#ffffffff" ux:Name="yzTicketBTNs2">

                        <Rectangle Background="#ffffffff" Margin="0,5,0,10" Padding="0,0,0,0" CornerRadius="20" ux:Name="indicator" Color="IndicatorColor" Height="5" Alignment="Bottom" LayoutMaster="outboundSelectedIndicator">
                            <LayoutAnimation>
                                <Move X="1" Duration="0.2" RelativeTo="PositionChange" Easing="QuadraticInOut" />
                            </LayoutAnimation>
                        </Rectangle>
                        <TicketButton  ux:Name="outboundButton" Text="Category 1" IsSelected="true">
                            <Clicked>
                                <Set subpages.Active="subpage1" />
                            </Clicked> 
                            <Panel ux:Name="outboundSelectedIndicator" Height="5" Margin="0,15,0,0" Alignment="Bottom"/>
                        </TicketButton>
                        <TicketButton ux:Name="returnButton" Text="Category 2" IsSelected="false">
                            <Clicked>
                                <Set subpages.Active="subpage2" />
                            </Clicked>
                            <Panel ux:Name="returnSelectedIndicator" Height="5" Margin="0,15,0,0" Alignment="Bottom"/>
                        </TicketButton>
                    </Grid>
                    <Text ux:Class="BodyText" TextColor="#424242" TextWrapping="Wrap" />
                    <Panel ux:Class="TicketButton" Alignment="HorizontalCenter" Width="80%">
                        <string ux:Property="Text" />
                        <bool ux:Property="IsSelected" /> 
                        <Text ux:Name="ticketButtonText" Font="typo" FontSize="18" Value="{Property this.Text}" TextColor="LightGray" Alignment="Center"/>
                        <WhileFalse Value="{Property this.IsSelected}">
                            <Change ticketButtonText.TextColor="LightGrayFaded" Duration="0.3"/>
                        </WhileFalse>
                    </Panel>
                    <float4 ux:Global="LightGray"       ux:Value="#616161"   />
                    <float4 ux:Global="LightGrayFaded"  ux:Value="#bdbdbd" />
                    <float4 ux:Global="IndicatorColor"  ux:Value="#FF2D55"   />

                    <PageControl ux:Name="subpages" Active="subpage1">


                        <NavigationMotion GotoType="SmoothSnap" GotoDuration="0.2" />
                        <Page ux:Name="subpage1">
                            <StackPanel>
                                <Each  Items="{category1}">
                                    <StackPanel Height="60" Width="100%" Margin="0,50,0,0" ux:Name="profilListAng" Color="#FFF">
                                        <Grid Columns="1,1" Rows="1,1">
                                            <mapRecInfo Row="0" Column="1"  Value="{name}">

                                            </mapRecInfo>
                                            <mapRecInfo Row="1" Column="0" Alignment="BottomLeft" Margin="20,0,0,0"  Value="{cate}">

                                            </mapRecInfo>
                                            <mapRecInfo Row="0" Column="0">
                                                <Image Height="40" Width="40" Alignment="CenterLeft" Margin="35,0,0,0" File="Assets/13.png" />

                                            </mapRecInfo>

                                            <mapRecInfo Row="1" Column="1" Alignment="BottomLeft" Margin="25,0,0,0"   Value="{datum}"></mapRecInfo>
                                            <mapRecInfo Row="1" Column="1">
                                                <Image Height="17" Width="17" Alignment="BottomLeft" Color="#424242" Margin="0,0,0,0" File="Assets/clock.png"  />
                                            </mapRecInfo>

                                        </Grid>

                                        <Rectangle Color="#bdbdbd" Height="1" Margin="20,0" Alignment="Top"/>
                                    </StackPanel>
                                </Each>
                            </StackPanel>

                            <WhileActive Threshold="0.1">
                                <Set indicator.LayoutMaster="outboundSelectedIndicator" />
                                <Set outboundButton.IsSelected="true" />
                                <Set returnButton.IsSelected="false" />
                            </WhileActive>
                        </Page>
                        <Page ux:Name="subpage2">

                            <StackPanel>
                                <Each  Items="{category2}" >

                                    <StackPanel Height="60" Width="100%" Margin="0,50,0,0" ux:Name="profilListAng" Color="#FFF">
                                        <Grid Columns="1,1" Rows="1,1">
                                            <mapRecInfo Row="0" Column="1"  Value="{name}">

                                            </mapRecInfo>
                                            <mapRecInfo Row="1" Column="0" Alignment="BottomLeft" Margin="20,0,0,0"  Value="{cate}">

                                            </mapRecInfo>
                                            <mapRecInfo Row="0" Column="0">
                                                <Image Height="40" Width="40" Alignment="CenterLeft" Margin="35,0,0,0" File="Assets/14.png"  />

                                            </mapRecInfo>

                                            <mapRecInfo Row="1" Column="1" Alignment="BottomLeft" Margin="25,0,0,0"   Value="{datum}"></mapRecInfo>
                                            <mapRecInfo Row="1" Column="1">
                                                <Image Height="17" Width="17" Alignment="BottomLeft" Color="#424242" Margin="0,0,0,0" File="Assets/clock.png"  />
                                            </mapRecInfo>

                                        </Grid>
                                        <Image File="Assets/directionLeft.png" Alignment="TopRight" Color="#424242"  Width="40" Height="40" Margin="0,0,0,0"  >
                                            <Rotation Degrees="180" />
                                        </Image> 

                                        <Rectangle Color="#bdbdbd" Height="1" Margin="20,0" Alignment="Top"/>
                                    </StackPanel>


                                </Each>
                            </StackPanel>

                            <WhileActive Threshold="0.1">
                                <Set indicator.LayoutMaster="returnSelectedIndicator" />
                                <Set outboundButton.IsSelected="false" />
                                <Set returnButton.IsSelected="true" />
                            </WhileActive>
                        </Page>
                    </PageControl>



                </StackPanel>
            </ScrollView>
        </Panel>

        <Grid Columns="1,1,1" Height="47" Dock="Bottom">
            <Image ux:Class="Icon" Margin="8" />
            <Panel Background="#FFF">
                <Icon ux:Name="tabBarImage1" Width="38" Height="38" File="Assets/02.png" />
                <Clicked>
                    <!--             <Set pages.Active="page1" />   -->
                </Clicked>
            </Panel>
            <Panel Background="#FFF">
                <Icon ux:Name="tabBarImage2" Width="33" Height="33" File="Assets/01.png" />
                <Clicked>
                    <!--             <Set pages.Active="page2" /> -->
                </Clicked>
            </Panel>
            <Panel Background="#FFF">
                <Icon ux:Name="tabBarImage3" Width="33" Height="33" File="Assets/06.png" />
                <Clicked>
                    <!--                 <Set pages.Active="page3" /> -->
                </Clicked>
            </Panel>

        </Grid>

    </DockPanel>
</App>

_

  1. Clicked does NOT get triggered:

_

_`

module.exports = {

    category1: [
    {cate: "cat01", datum: "26.08.2016", name: "cat01"},
    {cate: "cat02", datum: "26.08.2016", name: "cat02"},
    {cate: "cat03", datum: "26.08.2016", name: "cat03"},
    {cate: "cat04", datum: "26.08.2016", name: "cat04"},
    {cate: "cat05", datum: "26.08.2016", name: "cat05"},
    {cate: "cat06", datum: "26.08.2016", name: "cat06"},  
    {cate: "cat07", datum: "26.08.2016", name: "cat07"}],
    category2: [
    {cate: "cat08", datum: "26.08.2016", name: "cat08"},
    {cate: "cat09", datum: "26.08.2016", name: "cat09"},
    {cate: "cat10", datum: "26.08.2016", name: "cat10"},
    {cate: "cat11", datum: "26.08.2016", name: "cat11"},
    {cate: "cat12", datum: "26.08.2016", name: "cat12"},
    {cate: "cat13", datum: "26.08.2016", name: "cat13"},  
    {cate: "cat14", datum: "26.08.2016", name: "cat14"}]

};
</JavaScript>

<DockPanel>

    <StatusBarBackground Dock="Top"/>

    <Font File="Assets/HelveticaNeue.ttf" ux:Global="font1" />
    <Font File="Assets/Typo.otf" ux:Global="typo"/>
    <Text ux:Class="mapRec" FontSize="16" Color="#424242" />
    <Text ux:Class="mapRecHead" FontSize="25" Color="#424242"/>
    <Text ux:Class="mapRecInfo" FontSize="13" Color="#bdbdbd"/>


    <BottomBarBackground Dock="Bottom" IncludesKeyboard="false"/>
    <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/>
    <Panel>
        <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="TopCenter" Height="40%">
            <Placeholder ux:Name="overBackgroundLayout">
                <Circle ux:Name="facePicture"  Alignment="TopCenter"
                    Width="60%" Height="60%" Offset="0, 62%">
                    <ImageFill  File="Assets/blade.jpg" />
                </Circle>
            </Placeholder>


            <StackPanel ux:Name="textPanel" Alignment="Center">
                <Text ux:Class="TitleText" TextColor="#fff" TextAlignment="Center" />
                <StatusBarBackground Margin="0,0,0,15"/>
                <TitleText ux:Name="topText" FontSize="18" Value="Blade" Margin="5"></TitleText>
                <TitleText ux:Name="bottomText" Margin="0,0,0,0" FontSize="14">Testuser</TitleText>
            </StackPanel>


            <Panel ux:Name="backgroundPicture" TransformOrigin="Anchor" Alignment="Top" Anchor="50%,0%" Padding="0,0,0,0" Background="Black">
                <Image File="Assets/background.png" StretchMode="UniformToFill" Background="Black"/>
            </Panel>

            <Placeholder ux:Name="underBackgroundLayout" Target="facePicture"/>
            <Panel Height="60" Margin="0,300,0,0" >
                <Grid Columns="1`_`,1_"  Background="#ffffffff" ux:Name="yzTicketBTNs2">

                    <Rectangle Background="#ffffffff" Margin="0,5,0,10" Padding="0,0,0,0" CornerRadius="20" ux:Name="indicator" Color="IndicatorColor" Height="5" Alignment="Bottom" LayoutMaster="outboundSelectedIndicator">
                        <LayoutAnimation>
                            <Move X="1" Duration="0.2" RelativeTo="PositionChange" Easing="QuadraticInOut" />
                        </LayoutAnimation>
                    </Rectangle>
                    <TicketButton  ux:Name="outboundButton" Text="Category 1" IsSelected="true">
                        <Clicked>
                            <Set subpages.Active="subpage1" />
                        </Clicked> 
                        <Panel ux:Name="outboundSelectedIndicator" Height="5" Margin="0,15,0,0" Alignment="Bottom"/>
                    </TicketButton>
                    <TicketButton ux:Name="returnButton" Text="Category 2" IsSelected="false">
                        <Clicked>
                            <Set subpages.Active="subpage2" />
                        </Clicked>
                        <Panel ux:Name="returnSelectedIndicator" Height="5" Margin="0,15,0,0" Alignment="Bottom"/>
                    </TicketButton>
                </Grid>
            </Panel>
        </MultiLayoutPanel>
        <ScrollView>
            <ScrollingAnimation From="0" To="150">
                <Scale Target="facePicture" Factor=".30" Easing="QuadraticInOut" />
            </ScrollingAnimation>
            <ScrollingAnimation From="0" To="1000">
                <Set headerPanel.LayoutElement="overBackgroundLayout"/>
            </ScrollingAnimation>

            <ScrollingAnimation From="70" To="200">
                <Move Target="facePicture" Y="-0.72" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />
            </ScrollingAnimation>
            <ScrollingAnimation From="205" To="360">
                <Change Target="yzTicketBTNs2.Background" Value="#fafafaff" />
                <Move Target="facePicture" X="-0.4" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />
            </ScrollingAnimation>
            <ScrollingAnimation From="0" To="250">
                <Move Target="yzTicketBTNs2" Y="-1" RelativeTo="Size" RelativeNode="headerPanel" Easing="Linear" />

            </ScrollingAnimation>
            <ScrollingAnimation From="0" To="360">
                <Move Target="backgroundPicture" RelativeTo="Size" Y="-0.6" Easing="QuadraticOut"/>
                <Move Target="textPanel" RelativeTo="ParentSize" Y="-0.35" Easing="QuadraticOut"/>
                <Move Target="bottomText" RelativeTo="ParentSize" Y="-0.3" Easing="QuadraticOut" />
                <Change bottomText.Opacity="0" Easing="QuadraticOut"/>
            </ScrollingAnimation>
            <ScrollingAnimation From="50" To="250">
                <Change statusBarConfig.Style="Light" />
            </ScrollingAnimation>
            <ScrollingAnimation From="0" To="-1000">
                <Scale Target="backgroundPicture" Factor="4" />
                <Move Target="facePicture" Y="800"/>
            </ScrollingAnimation>



            <StackPanel Padding="0,300,0,0" ux:Name="yzTicketBTNs">

                <Text ux:Class="BodyText" TextColor="#424242" TextWrapping="Wrap" />
                <Panel ux:Class="TicketButton" Alignment="HorizontalCenter" Width="80%">
                    <string ux:Property="Text" />
                    <bool ux:Property="IsSelected" /> 
                    <Text ux:Name="ticketButtonText" Font="typo" FontSize="18" Value="{Property this.Text}" TextColor="LightGray" Alignment="Center"/>
                    <WhileFalse Value="{Property this.IsSelected}">
                        <Change ticketButtonText.TextColor="LightGrayFaded" Duration="0.3"/>
                    </WhileFalse>
                </Panel>
                <float4 ux:Global="LightGray"       ux:Value="#616161"   />
                <float4 ux:Global="LightGrayFaded"  ux:Value="#bdbdbd" />
                <float4 ux:Global="IndicatorColor"  ux:Value="#FF2D55"   />

                <PageControl ux:Name="subpages" Active="subpage1">


                    <NavigationMotion GotoType="SmoothSnap" GotoDuration="0.2" />
                    <Page ux:Name="subpage1">
                        <StackPanel>
                            <Each  Items="{category1}">
                                <StackPanel Height="60" Width="100%" Margin="0,50,0,0" ux:Name="profilListAng" Color="#FFF">
                                    <Grid Columns="1_,1_" Rows="1_,1_">
                                        <mapRecInfo Row="0" Column="1"  Value="{name}">

                                        </mapRecInfo>
                                        <mapRecInfo Row="1" Column="0" Alignment="BottomLeft" Margin="20,0,0,0"  Value="{cate}">

                                        </mapRecInfo>
                                        <mapRecInfo Row="0" Column="0">
                                            <Image Height="40" Width="40" Alignment="CenterLeft" Margin="35,0,0,0" File="Assets/13.png" />

                                        </mapRecInfo>

                                        <mapRecInfo Row="1" Column="1" Alignment="BottomLeft" Margin="25,0,0,0"   Value="{datum}"></mapRecInfo>
                                        <mapRecInfo Row="1" Column="1">
                                            <Image Height="17" Width="17" Alignment="BottomLeft" Color="#424242" Margin="0,0,0,0" File="Assets/clock.png"  />
                                        </mapRecInfo>

                                    </Grid>

                                    <Rectangle Color="#bdbdbd" Height="1" Margin="20,0" Alignment="Top"/>
                                </StackPanel>
                            </Each>
                        </StackPanel>

                        <WhileActive Threshold="0.1">
                            <Set indicator.LayoutMaster="outboundSelectedIndicator" />
                            <Set outboundButton.IsSelected="true" />
                            <Set returnButton.IsSelected="false" />
                        </WhileActive>
                    </Page>
                    <Page ux:Name="subpage2">

                        <StackPanel>
                            <Each  Items="{category2}" >

                                <StackPanel Height="60" Width="100%" Margin="0,50,0,0" ux:Name="profilListAng" Color="#FFF">
                                    <Grid Columns="1_,1_" Rows="1_,1_">
                                        <mapRecInfo Row="0" Column="1"  Value="{name}">

                                        </mapRecInfo>
                                        <mapRecInfo Row="1" Column="0" Alignment="BottomLeft" Margin="20,0,0,0"  Value="{cate}">

                                        </mapRecInfo>
                                        <mapRecInfo Row="0" Column="0">
                                            <Image Height="40" Width="40" Alignment="CenterLeft" Margin="35,0,0,0" File="Assets/14.png"  />

                                        </mapRecInfo>

                                        <mapRecInfo Row="1" Column="1" Alignment="BottomLeft" Margin="25,0,0,0"   Value="{datum}"></mapRecInfo>
                                        <mapRecInfo Row="1" Column="1">
                                            <Image Height="17" Width="17" Alignment="BottomLeft" Color="#424242" Margin="0,0,0,0" File="Assets/clock.png"  />
                                        </mapRecInfo>

                                    </Grid>
                                    <Image File="Assets/directionLeft.png" Alignment="TopRight" Color="#424242"  Width="40" Height="40" Margin="0,0,0,0"  >
                                        <Rotation Degrees="180" />
                                    </Image> 

                                    <Rectangle Color="#bdbdbd" Height="1" Margin="20,0" Alignment="Top"/>
                                </StackPanel>


                            </Each>
                        </StackPanel>

                        <WhileActive Threshold="0.1">
                            <Set indicator.LayoutMaster="returnSelectedIndicator" />
                            <Set outboundButton.IsSelected="false" />
                            <Set returnButton.IsSelected="true" />
                        </WhileActive>
                    </Page>
                </PageControl>



            </StackPanel>
        </ScrollView>
    </Panel>

    <Grid Columns="1_,1_,1_" Height="47" Dock="Bottom">
        <Image ux:Class="Icon" Margin="8" />
        <Panel Background="#FFF">
            <Icon ux:Name="tabBarImage1" Width="38" Height="38" File="Assets/02.png" />
            <Clicked>
                <!--             <Set pages.Active="page1" />   -->
            </Clicked>
        </Panel>
        <Panel Background="#FFF">
            <Icon ux:Name="tabBarImage2" Width="33" Height="33" File="Assets/01.png" />
            <Clicked>
                <!--             <Set pages.Active="page2" /> -->
            </Clicked>
        </Panel>
        <Panel Background="#FFF">
            <Icon ux:Name="tabBarImage3" Width="33" Height="33" File="Assets/06.png" />
            <Clicked>
                <!--                 <Set pages.Active="page3" /> -->
            </Clicked>
        </Panel>

    </Grid>

</DockPanel>

`

Gratefully Blade

Sorry, I got it to work.

It seems it can be outside the scrollviewer but not inside the multilayoutpanel…

Cheers Blade

plz mark as solved