Hello my dear fuse community
Im triggering a PageView like this:
<Set subpages.Active="subpage1" />
As long as it is inside the ScrollView
it works as it should. But as soon as I place it outside the ScrollView
and inside a MultiLayoutPanel
where I want them to be, the Clicked
doesnt get triggered.
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:Name
of the grid with the buttons Im talking about is yzTicketBTNs2
- 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>
_
- 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